다양한 방법으로 eslint, prettier 적용

빡기·2020년 3월 30일

기존에 블로그에 작성했던 방식은 CRA를 이용한 eslint 및 pretiier 적용방법이였지만, 이번에는 webpack 설정에 이어 CRA를 이용하지 않고 적용하는 방법을 알아보고자 합니다.

시작하기 앞서
보통 airbnb 방식을 채택해서 사용하기 때문에 보편적으로 가장 많이 사용한다.
그리고, 회사마다 eslint,prettier 방식이 다르기 때문에 회사 프론트엔드 팀에 따라 맞게 사용하면 될 것 같아 크게 걱정할 필요는 없을 것 같다

두 파일 모두 제일 상위(root)에 생성하여 설정한다.

1. Eslint, 에어 비앤비의 구성 및 필수 패키지를 설치

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

2. Prettier, 그리고 Eslint와의 충돌을 피하기 위한 패키지를 설치

npm i -D prettier eslint-config-prettier eslint-plugin-prettier babel-eslint

3. .eslintrc 설정

// .eslintrc
{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["airbnb", "prettier", "prettier/react"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/prop-types": 0,
    "no-underscore-dangle": 0,
    "import/imports-first": ["error", "absolute-first"],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "import/newline-after-import": "error",
    "import/prefer-default-export": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "linebreak-style": 0,
    "no-unused-vars": 0

    // ❗️error off : 0 , warning 1,❗️
  }
}

4. .prettierrc 설정

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "avoid"
}
/*
문자열을 사용 할 때에는 ' 를 사용
코드는 ; 로 끝나야합니다.
탭 대신에 스페이스를 사용
들여쓰기 크기는 2칸
객체나 배열을 작성 할 때, 원소 혹은 key-value 의 맨 뒤에있는 것에도 쉼표 붙인다
한 줄이 120칸이 까지
화살표 함수 매개변수 하나인건 괄호 x
*/

5. 추가로 제대로 된 코드 아니면 git commit 막기

Husky

Husky는 git에 어떤 명령이 실행될 때 같이 실행하게 할 수 있는 명령을 관리하는 도구
npm install husky --save-dev

// package.json
  "husky": {
    "hooks": {
      "pre-commit": "eslint . --fix && prettier --write"
    }
  },
// 여기서 eslint . --fix로는 현재 디렉토리의 모든 코드를 eslint를
// 사용해 자동으로 고친다는 의미입니다. 이 작업이 끝나면 
// prettier --write를 실행해 prettier 규칙을 적용한 뒤 자동으로 수정

Lint-staged

Husky가 다 좋은데, 문제는 모든 코드를 다 검사한다는 겁니다. 매번 이러면 낭비가 심하니, staged된 코드들만 검사하도록 합시다. 그러려면 lint-staged라는 모듈을 설치
npm install lint-staged --save-dev

// package.json
"lint-staged": {
  "*.js": ["eslint . --fix", "prettier --write"]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }

최근에 사용한 가장 간단한 방법

참고사이트

eslint 와 prettier 연동

npm i --save-dev prettier-eslint 를 추가

settings.json 수정

{
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true
}

가장 많이사용하는 airbnb 스타일 추가

npm i --save-dev eslint-config-airbnb

eslintrc 수정

//eslintrc
{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": 0
  },
  "env": {
    "browser": true,
    "node": true
  }
}