개발을 위한 VSCode 설정

18552 단어 developmentvscodesetup
이 글은 제가 개발에 필요한 최소한의 기능이라고 생각하는 기능과 보기 좋게 만들기 위해 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:

    4.1 일반:

  • Color Highlight


  • EditorConfig for VSCode


  • ESLint


  • Highlight Matching Tag


  • Image Preview


  • Import Cost


  • Gitlens


  • vscode-styled-components



    • 4.2 반응 개발:

  • ES7 React/Redux/GraphQL/React-Native snippets


    • 4.3 테마:

  • Panda Theme


  • Lukin Theme


  • Eva Theme


  • Material Icon Theme



    • 4.4 플러터:

  • Awesome Flutter Snippets


  • Dart

    • Scheme 스즈메1
    「Scala 함수형 디자인＆프로그래밍」의 연습 문제를 풀기 위한 개발 환경의 구축(IntelliJ IDEA편)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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