[VSCode] 협업시 프로젝트 환경설정 (.vscode 폴더)

VSCode는 여러 확장을 통해 기능을 강화시키고, 커스터마이징이 가능해서 많은 개발자들이 사랑하는 IDE 중 하나입니다.

그러다보니 협업을 할때 팀원들도 VSCode를 사용하는 경우가 많이 있습니다.

사용하는 IDE가 같다면 VSCode가 지원하는 .vscode 폴더를 사용해서 해당 프로젝트에서 적용할 확장 프로그램, 설정값 등을 공유할 수 있습니다.

 

제가 자주 사용하는 설정 몇가지를 공유해드리겠습니다.

settings.json

settings.json은 VSCode 설정을 저장하는 파일입니다.

프로젝트를 진행하면 공백관련(탭이냐 스페이스냐) 문제와 포매팅 관련 문제를 경험하는 경우가 다수 있었습니다.

그래서 저장시 자동 포맷이 적용되게, 그리고 기본 포매터를 Prettier로 설정하고 공백 관련 옵션도 통일시켰습니다

{
  // 저장시 자동 포매팅
  "editor.formatOnSave": true,
  // 후행 공백 삭제
  "files.trimTrailingWhitespace": true,
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  },

  // 탭 사이즈
  "editor.tabSize": 2,
  // 공백 출력 옵션
  "editor.renderWhitespace": "all",

  // Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.semi": true,
  "prettier.singleQuote": true
}

 

extensions.json

settings.json에서 기본 포매터를 Prettier로 설정했습니다.

하지만 팀원의 VSCode에 Prettier 확장이 설치되어 있지 않다면 포매팅이 되지 않습니다.

그렇게 되면 저장시 자동 포매팅도 동작하지 않게 되죠.

 

그래서 팀원에게 필요한 확장을 설치하라고 요구해야하는데요. 

extensions.json에 확장 프로그램의 식별자를 작성해두면 VSCode로 해당 프로젝트를 열었을 때, 확장을 설치하라고 알려줍니다.

 

예시

 

아래 코드는 제가 자주 사용하는 설정입니다.

• Prettier
• Prettier ESLine
• ESLint
• Code Spell Checker

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "rvest.vs-code-prettier-eslint",
    "dbaeumer.vscode-eslint",
    "streetsidesoftware.code-spell-checker"
  ]
}

---

마치며...

팀원들과의 소통 및 협업은 언제나 중요하면서도 어려운 일입니다. 이 글이 협업에 도움이 되었기를 바랍니다.

 

추천 포스트

리액트 폴더 구조 설계 5단계

 

[Modern][Javascript]Enum 올바르게 쓰는법 (클린코드)