![[2] VS Code Extension 설정 (with Salesforce)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyTltw%2FbtsD3M90b0W%2FypTibXT8Cw3r3o6kkoWSkK%2Fimg.png)
안녕하세요🥰 트레슬 유냐냐냐입니다~☁️
이전 게시글에서는 VSCode 설치 방법을 알려드렸는데요~
설치한 VSCode를 좀 더 스마트하게 사용하고 VSCode에서 Salesforce 개발을 하기 위해서 Extension 설치는 필수입니다.
Extension 설치 방법과 Salesforce 개발에 필요한 필수 Extension들의 목록에 대해 설명드리겠습니다.
✅ 필수 Extension 설치
Salesforce 개발에 필요한 필수 Extension 들의 목록입니다.
각각의 Extension을 제대로 사용하기 위해선 각각의 역할과 사용법을 숙지하시는 것이 개발하실 때 많은 도움이 됩니다.
필수 Extension List
1. Salesforce Extension Pack (Expanded)
2. Prettier
3. Salesforce Package.xml Generator Extension for VS Code
4. Salesforce Documenter
5. Git Graph
6. Git Lens
이번 포스트에서는 Salesforce 개발에 필수인 Extension을 소개드렸지만, 개발에 도움이 되는 더 많은 Extension이 있기 때문에 추후에 추천하는 Extension을 소개하는 포스트도 올려볼게요😉
설치 방법
VS Code의 Extension 설치 방법은 아주 쉽고 모두 동일합니다.
예시로 바로 아래에서 진행할 Salesforce Extension Pack (Expanded)을 설치해볼까요?
1. 상단의 검색창에 Salesforce를 입력합니다.
2. Salesforce Extension Pack (Expanded)를 클릭합니다. (이름이 짤려서 안보일 경우 창 오른쪽 모서리를 드래그해서 창을 넓히시면 됩니다~)
3. Install 버튼을 클릭해서 설치를 진행합니다.
참 쉽죠? 😎
1. Salesforce Extension Pack (Expanded)
Salesforce Extension Pack (Expanded)는 Salesforce 개발에 필요한 VS Code Extension들의 묶음입니다.
Salesforce Extension Pack (Expanded) 안에는 아래의 Extension들이 포함되어 있어서 아래의 Extenstion들이 한꺼번에 설치됩니다.
- Apex
- Apex Language Server로 구동되는 Apex 코드 편집 기능과 Apex와 Trigger의 Code completion을 제공하고 코드의 구문 오류를 찾아주는 Extension입니다.
- Apex Interactive Debugger
- Apex Replay Debugger의 엔진으로 break point, check point를 작동하게 해줍니다.
- Apex Replay Debugger
- 생성된 Debug log를 기반으로 Debugging을 제공합니다.
- Salesforce CLI Integration
- Visual Studio Code가 Salesforce CLI를 사용하여 Org와 상호 작용할 수 있습니다.
- Aura Components
- Aura Component의 코드 편집 기능을 제공합니다. VS Code의 기본 HTML Language Server를 사용하여 구문 강조, Code completion 및 파일의 개요 보기를 제공합니다.
- Visualforce
- Visualforce Language Server와 VS Code의 기본 HTML 언어 서버를 사용하여 구문 강조, Code completion 및 파일의 개요 보기를 제공합니다.
- SLDS Validator
- 세일즈포스 라이트닝 디자인 시스템(SLDS)에 대한 권장 토큰 및 유틸리티 클래스를 사용한 검증, 구문 강조 표시, Code completion을 제공하여 Aura와 LWC에서 손쉽게 작업할 수 있습니다.
자세한 내용이 궁금하시다면 각 Extension 설치 페이지에서 확인하실 수 있습니다!
2. Prettier
Prettier는 Auto Formatter Plugin 입니다.
Auto Formatter가 왜 필요할까요?🧐
Apex Class, LWC, Trigger 등의 코드를 작성하는 방식과 Tab의 크기 등 개발자마다 각자 다른 코드 작성 방식으로 코드를 읽는 데 불편을 겪곤 합니다.
복잡한 로직을 코딩하다보면 코드 형식을 일일히 확인하는 것은 상당히 피곤한 업무가 되곤 합니다.
Prettier를 사용하면 이런 불편을 쉽게 해결 할 수 있습니다!
미리 정해놓은 세팅 값으로 코드의 형식을 통일화 시켜줍니다.🤩
아래 예시를 보면서 Prettier가 하는 일을 살펴볼까요?
Prettier를 활성화하면, 세팅파일(.prettierrc)에 저장된 값에 따라서 자동형식맞춤(Auto formatting)을 실행합니다.
개발을 하다보면 아래 코드 예시처럼 Space, Tab, 줄바꿈을 사용하는 위치를 개발자마다 다르게 사용하게 됩니다.
이렇게 각자 다른 형식 때문에 에러가 나기도 합니다. 😢
아래 예시는 Prettier가 적용된 예시 입니다. (코드를 저장해야 자동으로 Prettier의 Auto formatting이 적용됩니다!)
깔끔하죠? 🤣
이렇게 자동으로 포맷팅을 하기 위해서는 어떤 형식으로 포맷팅을 할 지를 설정한 파일인 .prettierrc가 필요합니다.
{
"trailingComma": "none",
"overrides": [
{
"files": "**/lwc/**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
}
],
"tabWidth": 4,
"printWidth": 125,
"apexInsertFinalNewline": false,
"xmlSelfClosingSpace": false
}
Prettier는 .prettierrc에 적힌 내용을 기반으로 동작하게 됩니다.
위에서부터 내용을 차례대로 살펴볼까요? 🤓
1. trailingComma
"trailingComma"와 "overrides"는 sfdx project의 Default 값입니다.
"trailingComma"는 여러 줄을 사용할 때 후행 콤마를 넣어주는 기능으로 JSON file에 작성에 유용합니다.
하지만 세일즈포스의 Aura Component에 에러를 발생시켜서 Default는 "none"으로 설정해야 합니다.
2. overrides
“overrides“는 특정 경로에 있는 파일을 따로 지정한 형식으로 사용할 수 있습니다.
세일즈포스 개발에서는 특수하게 LWC와 Aura를 사용합니다.
LWC의 경우 .html 파일형식을 사용하게 되는데, 이미 prettier에는 html의 포맷팅이 적용되어 있습니다.
때문에, /lwc//*.html 을 사용하여 LWC파일 아래 모든 폴더 안에 있는 .html 파일을 lwc 포맷을 따르도록 설정해주는 세팅이 필요합니다.
Aura도 LWC와 같은 방식으로 작동하게 됩니다.
3. Others
나머지 간단한 내용들은 표로 정리했습니다.
| "tabWidth": 4 | Tab의 크기를 Space 4개로 설정 |
| “printWidth": 125 | Space 크기를 125px로 설정합니다. |
| "apexInsertFinalNewline": false | Apex Class를 저장할 때, 마지막 줄에 빈 라인 추가 기능을 끕니다. |
| "xmlSelfClosingSpace": false | XML 파일에서 <foo></foo> 을 <foo/>로 자동변환하는 기능을 끕니다. |
제가 현재 진행 중인 프로젝트에서는 위의 세팅만 사용하고 있지만, Prettier 공식 문서에 방문하시면 좀 더 많은 옵션을 보실 수 있습니다.
Prettier은 잘 사용하면 정말 유용한 툴이 될 수 있지만, 잘 못 사용하면 에러의 주범이 됩니다!
그렇기 때문에 항상 Lead 분들께서 정해주신 포맷을 따라야합니다. 만약 추가가 필요한 기능이 있다면 꼭 리더분들과 상의 후에 추가하셔야합니다!
추가로, VS Code 우측 하단에 빈 공간을 채울 때, Space를 사용할지, Tab을 사용하지를 설정하는 버튼이 있습니다.
VS Code 우측 하단을 살펴보시면 Spaces:4, 또는 Tab size:4 로 표시되어있는 버튼을 확인하실 수 있습니다.
이 사이즈는 해당 문서에서 빈 공간을 채울 때 사용하는 Space나 Tab의 크기를 표시합니다.
클릭하시면 설정 팝업이 나타나고 설정에 맞는 방식과 크기를 선택합니다.
이 공간을 채우는 방식과 크기는 통일된 설정과 다른 설정으로 푸쉬를 하시면 충돌이 일어나기 때문에 모든 개발자가 동일하게 설정해주셔야합니다.
설정을 완료하셨다면, Prettier가 제대로 작동하는지 확인해볼까요?
간단하게 manifest/package.xml을 사용하여 알아보도록 하겠습니다.
(Apex Class, Trigger 등 프로젝트 트리 안에 존재하는 파일은 모두 적용되어야 합니다!)
manifest/package.xml을 열고 Ctrl/Command + A를 입력하여 전체 선택을 하셔서, 아래 그림과 같이 Tab으로 구성되었는지 Space로 되어있는지 확인 하셔야합니다.
리더분들께서 정의한 .prettierrc 설정에 따라 바뀌겠지만, 제가 경험한 모든 프로젝트에서는 Space 4 로 설정하였습니다~
때문에 앞으로 여러분께서도 대부분 Spaces:4로 설정하시겠지만, 인계받으실 때 꼭! 잘 확인하야 합니다.
Space 4로 설정이 되어있으나, Tab으로 저장이된다면 Prettier가 정상 작동이 안되고 있는 상황입니다.
이 경우에는 설정을 다시 하셔서 (java —version 확인 후, npm install부터 진행하셔야 합니다.) 정상 작동하도록 재설정 하셔야 합니다.
3. Salesforce Package.xml Generator Extension for VS Code
Package.xml Generator는 Deploy와 Retreive를 편리하게 할 수 있는 Extension입니다.
1. VS Code에서 Control + Shift + P 를 입력하여 Command Palette를 열어 package를 입력합니다.
2. 하위 검색 목록에서 SFDX Package.xml Generator를 클릭하여 Salesforce Package.xml Generator를 엽니다.
3. Package.xml Generator를 열면 아래와 같은 화면이 나타납니다.
4. 원하는 Metadata Types을 검색하여 이름을 클릭합니다.
(왼쪽 체크박스를 클릭하시면 연결된 오그에 있는 모든 Metadata를 선택하니 주의하셔야 합니다!)
- 저는 간편한 예시로 Apex를 검색하여 ApexClass를 선택하였습니다.
5. 이름을 클릭하면 오른쪽 창에 해당 타입의 모든 소스의 목록이 표시됩니다.
오른쪽 목록에서 원하는 항목을 체크한 후 상단의 Copy to Clipboard를 클릭합니다.
(클립보드에 선택한 항목을 기준으로 생성된 Package.xml이 저장됩니다.)
- 예시에서는 제가 만든 Apex Class와 Test Class를 선택하고 상단의 Copy to Clipboard를 클릭하였습니다.
- 오그에 존재하는 Metadata Type의 양에 따라서 검색하는데 다소 시간이 걸릴 수 있습니다.
- 오른쪽 하단에 검색 중이라는 팝업 박스가 표시되는 동안은 오그에서 Metadata를 검색하는 중입니다.
⛔️ 간혹 오류로 인해 목록에 아무것도 표시되지 않거나 검색도 되지 않는 경우가 발생합니다.
이 경우에는 VS Code를 전체 종료 후 다시 실행하시면 대부분 해결이 가능합니다!
6. Project Tree의 manifest 폴더에 package.xml file에 덮어씌웁니다.
- 선택한 항목이 Metadata Type기준으로 나열된 것을 확인할 수 있습니다.
이렇게 Deploy 또는 Retrieve 해야 하는 항목을 손쉽게 package.xml로 작성이 가능합니다.
package.xml은 주로 Sandbox를 이용한 개발에서 사용됩니다.
Soap API 기반으로 연결된 Org에서 Source를 Deploy 하거나 Retrieve 할 때 사용됩니다.
Scratch Org를 이용한 개발에서는 package.xml이 사용되지 않습니다.
Scratch Org는 Source Tracking이 지원되기 때문에 sfdx force:source:push, pull, status 등을 이용하여 현재 연결된 오그와 로컬 소스의 변동 사항을 체크하고 push와 pull로 소스를 동기화 시킬 수 있습니다.
최근 Sandbox에서도 Source Tracking을 지원하는 기능이 GA되었습니다.
때문에 앞으로는 package.xml의 사용이 많이 줄어들 것 같습니다.
하지만 추후에 다루게 될 CI/CD 문서에도 설명드리겠지만, Destructive Change Pre 또는 Post에서 삭제 항목을 체크하는데에도 사용되기 때문에 사용법을 익혀두시는 것이 좋습니다. 😆
4. Salesforce Documenter
Salesforce Documenter는 파일을 저장할 때, 작성자의 정보와 마지막 수정일 등을 주석으로 자동입력을 지원하는 Extension입니다.
Documenter의 기본기능은 하단의 왼쪽 이미지 입니다. 오른쪽 이미지는 트레슬의 성호님이 사용하고 있는 주석입니다.
수정 내역까지 좀 더 디테일하게 입력하는 포맷입니다.
VS Code의 세팅 파일인 Setting.json에 제일 하단에 아래 코드블럭을 추가하면 세팅이 완료됩니다.
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"prettier.useTabs": true,
"editor.comments.insertSpace": false,
"editor.detectIndentation": false,
"editor.insertSpaces": false,
"editor.fontSize": 12,
"SFDoc.username": “User.Name”,
"SFDoc.FileHeaderProperties":[
{
"name": "description"
},
{
"name": "author",
"defaultValue": "$username"
},
{
"name": "group",
"defaultValue": “i2max”
},
{
"name": "last modified on",
"defaultValue": "$date"
},
{
"name": "last modified by",
"defaultValue": "$username"
}
]
5. Git Graph
Github의 현재 상태와 나의 로컬 상태를 GUI를 통해 쉽게 파악할 수 있게 도와주는 Extension 입니다.
실무를 하면서 정말 많이 사용하는 중요한 Extension이기 때문에 꼭 설치하셔야 합니다!
다른 Extension에 비해 더 많은 내용을 다뤄야 하기때문에 Git Graph의 자세한 사용법은 현재 깃허브 상황과 나의 Local 상황 파악하기.에서 다루도록 하겠습니다. 😉
6. Git Lens
Git Lens는 아래 이미지와 같이 각각의 라인을 누가 언제 수정했는지를 보여줍니다.
에러가 생기면 그 라인을 누가 어떻게 수정했는지, 그 당시의 커밋 메세지는 무었이어는지 확인이 가능합니다.
다들 잘 따라오셨나요?👍
지금까지는 처음으로 VS Code를 설치하고 진행해야하는 환경에 대한 설정이었습니다. 지금까지 하신 작업은 앞으로 다른 프로젝트나 패키지 개발에 참여하셔도 따로 진행할 필요가 없는 작업입니다.
다음 포스트에서 다룰 내용은 새로운 프로젝트마다 확인 및 설정 해야 하는 작업입니다.
감사합니다.🙇🏻♀️❤️
'Salesforce Dev > sfdx CLI' 카테고리의 다른 글
| [1] VS Code 및 필수 프로그램 설치 (with Salesforce) (0) | 2024.01.17 |
|---|