개발을 위한 VSCode 설정

이 글은 제가 개발에 필요한 최소한의 기능이라고 생각하는 기능과 보기 좋게 만들기 위해 VSCode에서 만든 설정을 모아놓은 것입니다.

최종 결과:

Improving visual hiding lateral bar, title bar and minimap
1.1. Adding keyboard shortcuts
1.2. Hiding the bars in settings

Adding JetBrains Mono with ligatures
2.1. Installing the font on your computer
2.2. Using it on VSCode

Additional Settings

Adding extensions

4.1 General
4.2 React Development
4.3 Themes
4.4 Flutter

추신: macbook을 사용하는 경우 ctrl을 cmd로 바꿉니다.

1. 시각적으로 가려지는 측면 바, 제목 표시줄, 미니맵 개선

1.1. 키보드 단축키 추가

Open the command search using the shortcut ctrl + shift + p and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)' as showed in the image bellow.

그런 다음 열린 파일에 다음 코드를 추가합니다.

// Place your key bindings in this file to override the defaults
[
  /**
   * Activity Bar
   **/
  {
    "key": "ctrl+k ctrl+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+k ctrl+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "ctrl+k ctrl+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "ctrl+k ctrl+x",
    "command": "workbench.extensions.action.showInstalledExtensions"
  }
]

1.2 설정에서 막대 숨기기

Open the settings similar to how we did previously, using the shortcut ctrl + shift + p and searching for 'Preferences: Open Settings (JSON).

JSON 파일에서 다음 옵션을 추가합니다.

  "window.titleBarStyle": "custom",
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,

2. 합자가 포함된 JetBrains Mono 추가

2.1 컴퓨터에 글꼴 설치

Head to https://www.jetbrains.com/lp/mono/ , 글꼴을 다운로드하고 운영 체제에 따라 설치하십시오.

2.2. VSCode에서 사용하기

Open the settings.json (explained in step 1.2) and add the following content inside the file:

    "editor.fontLigatures": true,
    "editor.fontFamily": "'JetBrains Mono','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",

3. 추가 설정

The following settings are for improving git usage, editor update import, enable bracket pair ( Check VSCode update for more info ), 저장 시 포맷, 기본 포맷터를 정의합니다. "컴팩트 폴더"는 폴더에 하나의 중첩 폴더만 있는 경우에 사용되며 비활성화되면 인라인으로 표시되지 않습니다.

압축 폴더 비활성화됨:

압축 폴더 활성화:

    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "git.autofetch": true,
    "explorer.compactFolders": false,
    "editor.wordWrap": "on",
    "extensions.ignoreRecommendations": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
    "eslint.validate": [
      "javascript"
    ],
    "eslint.format.enable": true,
    "[typescriptreact]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }

4. 확장 기능 추가

These are the main extensions that I'm currently using:

Reference

이 문제에 관하여(개발을 위한 VSCode 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wps13/vscode-setup-for-development-4cd5

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다