VS Code에 ESLint와 Prettier 적용하기

난 주로 PHP 로 개발을 진행하기 때문에 ESLint와 Prettier는 거의 사용을 하지 않지만 간혹 React Native App을 개발하거나 할 때는 사용할 때가 있다. 그리고 자바스크립트 역시 개발을 해야할 경우가 있어서 이번에 제대로 세팅을 진행하게 됐다. 포맷팅은 Prettier가 담당하고 문법오류는 ESLint에서 체크한다.

우선 아래 2개의 Extension을 VS Code에 설치한다.

특히 ESLint의 경우는 Extension만 설치했다고 사용할 수 있는 것은 아니다. 아래 내용처럼 npm install eslint 와 같이 별도로 eslint 패키지를 설치해줘야 한다.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

이제 VS Code settings.json 파일에 설정을 추가해준다.

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        },
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        },
        "editor.formatOnSave": true
    },
    "prettier.configPath": ".prettierrc.js",
    "eslint.useESLintClass": true,
    "eslint.options": { "useEslintrc": false, "overrideConfigFile": ".eslintrc.json" }
}

위 설정은 javascript 와 typescript 파일을 저장할 때 기본 포맷터를 prettier 로 설정하고 문법 오류 등은 eslint로 체크한다는 내용이다. 팀 단위로 협업을 진행하게 되면 prettier 와 eslint 설정이 따로 관리되고 있을 터이기 때문에 공통된 설정을 적용하기 위해 각각의 설정 파일을 별도로 지정해줬다. 다만 "useEslintrc": false 설정은 꼭 필요한 내용인지는 모르겠다. 만약 Parsing error: The keyword 'import' is reservedeslint 오류가 발생한다면 위 설정 중 "eslint.useESLintClass": true 부분이 해당 오류를 해결 할 수 있다.

각 설정 파일 .prettierrc.js, .eslintrc.json 의 설정은 아래와 같은 형식으로 지정하면 된다.

module.exports = {
  bracketSpacing: false,
  bracketSameLine: true,
  singleQuote: true,
  printWidth: 80,
  useTabs: false
};

{
  "rules": {
    "no-console": 2
  }
}

참고로 VS Code 가 아닌 다른 에디터를 사용하거나 직접 eslint 명령어로 문법 오류를 체크하는 경우라면 eslint-config-prettier 를 추가로 설치해서 eslint 설정과 prettier 설정이 서로 충동하는 것을 막을 수 있다. 그리고 아래 내용을 .eslintrc 파일에 추가해 준다.

{
  "extends": [
    "prettier"
  ]
}