VSC[Visual Studio Code] Extension 정리

Extension 목록 정리

컨벤션용(들여쓰기, 저장시 스타일 정형화)

• ESLint(TSLint)
• Prettier

협업 간편화용(for Git)

• Git Graph (깃 branch를 gui 형태로 확인 가능하다.)
• Git Extension Pack

VSC 한글화(설치시 기본이 영어로 되어있음)

• Korean Language Pack for Visual Studio Code

react 스타일드 컴포넌트 자동완성용

    react 스타일링 방법에 따라 결정할 것. scss나 sass를 위한 Extenstion도 존재한다.

• vscode-styled-components

다국어 지원을 위한 i18n 적용시 편의성

    해당 플러그인을 통해 코드상에서 미리 번역될 글자로 볼 수 있다.

• i18n Ally

해야할 일 체크용

    TODO: / FIXME: 를 주석으로 작성시 해당 부분을 편하게 찾고 모아볼 수 있다. 

• TODO Tree

Extension 공유용

• Extension Import/Export

 

개인적으로 쓰는 설정 (settings.json) 공유합니다!

{
    "workbench.colorTheme": "One Dark Pro",
    "todo-tree.tree.showScanModeButton": false,
    "emmet.excludeLanguages": [
        "",
        "markdown",
    ],
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    //"prettier.useTabs": true,
    //"prettier.singleQuote": true,
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true
    },
    // "javascript.implicitProjectConfig.experimentalDecorators": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.suggestSelection": "first",
    "editor.fontFamily": "d2coding, '나눔고딕코딩', Menlo, Monaco, 'Courier New', monospace",
    "window.zoomLevel": 0,
    "editor.mouseWheelZoom": true,
    "prettier.proseWrap": "always",
    "editor.wordWrap": "on",
    "workbench.statusBar.visible": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "powermode.enableShake": false,
    "powermode.enabled": true,
    "powermode.presets": "fireworks",
    "settingsSync.ignoredExtensions": [
        "esbenp.prettier-vscode"
    ],
    "git.enableSmartCommit": true,
    "i18n-ally.displayLanguage": "en",
    "color-highlight.languages": [
        "*"
    ],
}