프로젝트 또는 언어별로 VS Code 사용자 지정

VS Code는 매우 사용자 정의가 가능하며 (대부분의) 귀하의 변덕과 성가신 일을 처리할 수 있습니다!

특정 프로젝트에 대해 또는 특정 언어로 작업할 때 무언가 다르게 수행되기를 원할 수 있습니다. 그렇다면 상황에 맞게 VS Code를 어떻게 꾸밀 수 있을까요? 😎

설정 범위

VS Code는 두 가지 설정 범위를 제공합니다.

사용자 설정: 여는 VS Code의 모든 인스턴스에 적용합니다.

작업 공간 설정: 현재 프로젝트에만 적용됩니다. 그들은 <<workspace>>/.vscode/settings.json에 저장됩니다. 이러한 설정은 팀과 공유하여 노력을 동기화하는 데 유용할 수 있습니다!

작업 공간 설정은 사용자 설정보다 우선합니다.

A VS Code "workspace" is usually just your project root folder. You can also have more than one root folder in a VS Code workspace through a feature called Multi-root workspaces.

편집 설정

키보드 단축키( Ctrl+, )를 사용하거나 Preferences: Open Settings (UI) 명령을 실행하여 설정 UI를 열 수 있습니다.



사용자 및 작업 공간 설정을 위한 탭이 있습니다. 작업 영역 설정을 추가하는 즉시 작업 영역settings.json 파일이 생성됩니다.

사용자 설정 파일을 직접 열려면 Preferences: Open Settings (JSON) 명령을 실행할 수 있습니다. 자동 완성을 위한 intellisense가 있으며 옵션에 더 익숙해지려면 this settings list을 참조하십시오.

더 자세히 알아보려면 User and Workspace Settings User Guide을 확인하세요.

언어별 설정

일부 언어별 설정을 만들려면 사용자 또는 작업 공간에 언어 항목을 추가해야 합니다settings.json. 언어 항목에서 language IDs의 배열을 속성으로 지정하고 재정의할 설정이 있는 객체를 키-값 쌍으로 제공합니다.

{
    "editor.tabSize": 2,
    "[python]":{
        "editor.tabSize": 4,
    }
}

위의 예에서 모든 언어에 대한 설정은 탭 크기를 2로 하는 것이지만 Python은 탭 크기를 4로 설정합니다.

언어별로 원하는 설정을 변경할 수 있습니다. 그러나 일부 기본 제공 기능에는 특정 언어를 대상으로 하는 설정이 있습니다. 그러한 예 중 하나가 Emmet입니다.

기본적으로 Emmet은 html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less 및 stylus 파일에 대해 활성화되어 있습니다. 더 많은 언어에 대해 활성화하려면 다음을 설정해야 합니다.

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

이렇게 하면 Vue 및 React용 Emmet이 활성화됩니다.

마크다운에 대한 Emmet 지원을 포함하기 위한 bug이 있습니다. 해결 방법은 아래 스니펫에 따라 제외된 언어 목록이 비어 있는지 확인하는 것입니다.

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

확장 프로그램에는 사용하거나 사용하지 않을 수 있는 일부 언어별 설정이 있을 수 있습니다.

예를 들어 마크다운을 제외한 모든 언어의 포맷터로 Prettier을 사용할 수 있습니다. Prettier는 마크다운을 잘 처리하지 못하므로 이것을 고려하는 것이 좋습니다! 😅

대신 마크다운을 위해 다른 포맷터를 선택할 수 있습니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[markdown]": {
    "editor.defaultFormatter": "robole.marky-formatter"
  }
}

또는 마크다운을 위해 pretier를 비활성화할 수 있습니다. 이렇게 하면 Markdown의 서식이 모두 비활성화됩니다.

  "prettier.disableLanguages": ["markdown"],

작업

프로젝트별로 작업을 구성할 수도 있습니다. 새 작업을 구성하면 Atasks.json가 .vscode 폴더에 추가됩니다.

VS Code는 Gulp, Grunt, Jake 및 npm 앱에 대한 작업을 자동 감지합니다. 그러나 다른 사용자가 사용하기를 원하는 프로젝트에 대해 사용자 지정 VS Code 작업을 생성할 수 있습니다. 이는 환경을 올바르게 설정하거나 테스트를 실행하는 것과 같은 작업일 수 있습니다.

Tasks User Guide에서 자세한 내용을 확인할 수 있습니다.

사진 제공: Dimitri Houtteman on Unsplash