ESLint, Prettier 함께 사용하기.

VSCode를 이용하여 react-native 프로젝트를 진행하던 시기, 회사에서는 commit - create pull request - review - merge .. 의 과정으로 협업을 진행하고 있었다.

 

commit과 review 과정을 겪으면서 개발자마다 코딩 스타일이 다르고, 이를 구두 또는 일반 문서로 합일화 하는 것은 어렵다고 생각했다.

 

그래서 코딩 스타일을 하나의 스타일로 규제할 수는 없을까 라는 생각을 시초로 EsLint, Prettier에 접근하게 되었다.

 

스타트업에서의 기술부채가 늘어가는 것은 당연한 것이라고 생각하고 있고, 기술부채를 꾸준히 지워가는게 중요하다고 생각한다. 그래서 ESLint를 적용해야겠다.

ESLint

ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project.

 

ESLint는 쉽게 말해서 javascript에서 코딩 컨벤션과 에러를 체크해주는 프로그램이다. 독립적으로 또는 IDE 플러그인으로도 존재한다.

 

 

Prettier

프리티어....? 아마존 잠깐 했을때 프리티어...?

 

• An opinionated code formatter
• Supports many language
• Integrates wirh most editors
• Has few options

음... 한마디로 많은 언어를 지원해주는 코드 포매터다.

 

ESLint, Prettier 같이 사용하는 이유

처음에 들었던 생각은 'ESLint, Prettier 둘 중에 하나만 사용하면 되는 걸.. 왜 두가지를 함께 사용해야할까? ' 였다.

 

각각의 doc와 구글링을 통해서 내린 결론은 서로의 부족한점을 매꿔주기 위해서 함께 사용하는 것이다.

 

ESLint는 code quality, Prettier은 code style위주라고 생각하면된다.

 

예를 들어서 ESLint는 사용하지 않는 변수, 전역변수의 사용 등을 알려준다면 Prettier은 한줄의 최대길이,  ' 과 " 등을 신경써준다.

 

 

ESLint 모듈 설치

$ npm install eslint --save-dev

Prettier 모듈 설치

npm install prettier --save-dev --save-exact

 

eslint-plugin-react-native 모듈 설치

npm install eslint-plugin-react-native --save-dev

react-native 개발시 사용하면 좋다.

 

eslint-config-prettier 모듈 설치

npm install eslint-config-prettier --save-dev

eslint와 prettier를 함께 사용하는 경우 불필요하거나 충돌 위험이 있는 eslint 설정을 해제하는 모듈이다.

 

 

VS Code 세팅

설치가 완료되면 setting창에 들어가서 오른쪽 상단 아이콘을 통해 settings.json 접근한다.

 

"editor.formatOnSave": true,

"javascript.format.enable": false,

"prettier.eslintIntegration": true ( 포스팅 시간 기준 2019.12.18 deprecate되어서 삭제 )

 

위 코드를 settings.json 에 추가하면 설정파일만 생성해주면 된다.

 

설정파일 생성

프로젝트의 루트레벨에서 .eslintrc.json을 생성한 후에, 아래 코드를 작성하면된다.

 

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["prettier", "react"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {},
      {
        "usePrettierrc": false
      }
    ]
  }
}

 

위 코드를 적용하게 되면, Prettier의 규칙을 ESLint의 규칙으로 사용하게 된다.

 

그리고 아래 코드는 Prettier의 규칙 설정을 무시하겠다는 뜻이다.

"usePrettierrc": false

 

코딩 스타일을 사용자화 하고 싶은 경우에 ESLint 규칙은 rules레벨에서, prettier 규칙은 rules~~prettier/prettier레벨에서 변경하면 된다.