ESLint와 Prettier로 컨벤션 준수하기 with Webstorm

서론

코드 컨벤션을 준수하는건 협업뿐만 아니라 클린코드를 지향하는데에도 필수적이다. 이를 도와주기 위한 툴로 여러가지가 있는데 그중에 가장 많이 쓰이는 eslint와 prettier를 webstorm에서 쓰는 방법에 대해 알아보고자한다.

 

ESLint와 Prettier에 대하여

 ESLint는 코드 스타일을 바꾸는데 효과적이다. 사용자가 규칙을 설정할 수 있기에 많이 쓰는 airbnb-style로 설정할 경우 스타일을 위반하면 경고문구가 출력된다. 예를 들어 airbnb-style의 경우 상수에 대문자 snakecase를 쓰는것을 권하기에 이를 준수하지 않은 경우 경고문구가 출력된다.

 Prettier는 코드 포맷을 바꾸는데 효과적이다. 프로젝트에서 일관된 코드 포맷을 가지게 하고 싶을때 쓰면 좋다. 예를 들어 탭 한번에 띄워쓰기를 2번으로 할지 4번으로 할지, 세미 콜론을 사용할지 안할지, 문자열은 작은 따옴표로 할지 큰 따옴표로 할지를 정할 수 있다.

 ESLint와 Prettier 둘의 차이점은 Prettier는 코드를 자동으로 바꿔줄수 있고 ESLint는 경고문구만 출력한다는 점이다. 따라서 둘을 같이 쓰면 일관된 코드 스타일을 더 쉽게 맞출 수 있다.

 

ESLint 사용법

ESLint 설치

이제 webstorm에서 ESLint를 쓰는 방법에 대해 알아보자.

npm install --save-dev eslint

먼저 npm으로 eslint를 설치해준다. 개인적으로 global이 아닌 development mode로 설치하였다.

npx eslint --init

다음으로 airbnb style을 사용하기 위해 eslint를 init한다. 

이제 .eslintrc.js파일의 설정을 다음과 같이 바꿔준다. 세미콜론이나 들여쓰기는 본인 프로젝트 코드 컨벤션에 따라 바꿔주면 된다. 혹은 prettier를 사용한다면 rules는 굳이 쓰지 않아도 된다.

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:airbnb-base', 
  ],
  parserOptions: {
    ecmaVersion: 2018,
  },
  rules: {
    // 세미콜론을 사용하지 않도록 설정
    'semi': ['error', 'never'],

    // 들여쓰기를 탭으로 2번만 하도록 설정
    'indent': ['error', 'tab'],
  },
};

ESLint 자동 사용 설정

 그리고 나서 기본적으로 eslint는 disable되어있기에 설정에서 eslint를 사용하도록 바꿔줘야 한다.

현재 프로젝트에서 ESLint를 자동으로 사용하도록 설정하려면 설정을 열고(ctrl + alt + s) Languages & Frameworks | JavaScript | Code Quality Tools | ESLint에서 Automatic ESLint configuration를 선택한다.

 

 모든 새 프로젝트에서 ESLint를 자동으로 구성하려면 Settings for New Projects dialog (File | New Projects Setup | Settings for New Projects)를 열고 Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option를 선택하면 된다.

ESLint 자동 적용 설정

 만약 eslint가 파일저장시마다 코드를 자동으로 수정하게 하고 싶다면 설정에서 Languages & Frameworks | JavaScript | Code Quality Tools | ESLint에서 Run eslint --fix on save를 선택하면 된다.

Prettier 사용법

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

 설치 후 Languages & Frameworks | JavaScript | Prettier에서 Reformat with Prettier를 누르면 된다. Prettier가 이미 저장된 퍼일에 자동으로 적용되게 하려면 on save 체크박스를 클릭하면 된다. Prettier를 기본 포맷툴로 설정하려면 Run on reformat code action을 선택하면 된다.

 Prettier 규칙들을 설정하려면 .prettierrc에서 설정하면 된다 다음은 간단한 예시이다.

{
  "singleQuote": true,     // 작은 따옴표 사용
  "semi": false,           // 세미콜론(;) 사용하지 않음
  "tabWidth": 4,           // 탭의 너비를 4로 설정
  "trailingComma": "all"   // 객체나 배열의 마지막 항목에 항상 쉼표를 추가
}