Vscode - Eslint, Prettier 설정

 

 

1. Prettier & Eslint Extension 설치

 

2. Settings.json 설정 (Open User Setting)

 

내용에 주석을 확인하고 

Eslint, Prettier 활성화 하면됨

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "emmet.triggerExpansionOnTab": true,
  "workbench.settings.applyToAllProfiles": [
    "emmet.triggerExpansionOnTab"
  ],
  "[html]": {
    // html Prettier 사용시
    // "editor.defaultFormatter": "esbenp.prettier-vscode" 

    // html Prettier 미사용시
    "editor.defaultFormatter": null
  },
  "[javascript]": {
    // 자바스크립트 Prettier 사용시
    // "editor.defaultFormatter": "esbenp.prettier-vscode" 

    // 자바스크립트 Prettier 미사용시
    "editor.defaultFormatter": null                       
  },
  
  "editor.codeActionsOnSave": {
    // Esliunt 자동 수정
    "source.fixAll.eslint": true
  },

  "[javascriptreact]": {
    // 리액트 Prettier 사용시
    // "editor.defaultFormatter": "esbenp.prettier-vscode"

    // 리액트 Prettier 미사용시
    "editor.defaultFormatter": null
  },
  // 개행할 간격 수치
  // "prettier.printWidth": 100,
  "prettier.singleQuote": true,

  "[typescriptreact]": {
    // 타입스크립트 Prettier 사용시
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 1,

  // 저장시 자동 포맷 끄기/켜기
  "editor.formatOnSave": false,
  "workbench.settings.enableNaturalLanguageSearch": false,
  "[json]": {
    // json Prettier 사용시
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    "editor.defaultFormatter": null
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

 

 

Prettier 모두 null로 하고

Eslint만 키면 

Project의 .eslintrc 파일 셋팅 따라감