[ESLint, Prettier] React 프로젝트에 ESLint 와 Prettier 적용하기 | ESLint 와 Prettier 사용법과 차이점

ESLint 란?

Linter의 기능

동적 언어인 Javascript에서는 코드 에러가 자주 발생한다.
동적 분석(프로그램을 직접 실행해서 코드를 분석)을 하기 때문에 에러를 찾기 위해서는 코드를 직접 실행해서 확인을 해봐야 한다.

이를 도와주는 것이 Linter이다. Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다. 추가적으로 간단한 코드 포맷팅 기능도 있다.

우선, VScode의 확장부터 깔아주자 !
다음과 같이 두 개를 깔아주자

ESLint 설치

$ npm install eslint

이제 ESLint 패키지 설치가 완료되면 초기화를 한다.

$ eslint --init

그럼 다음과 같은 단계별 질문이 나온다.

// ESLint의 사용 목적은 무엇인가?

? How would you like to use ESLint? … 
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style

// 어떤 타입의 모듈을 사용하는가?

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

// 어떤 프레임워크에서 사용할 것인가?

? Which framework does your project use? … 
❯ React
Vue.js
None of these

// 타입 스크립트를 사용하는가?

? Does your project use TypeScript? › No / Yes

// 어떤 환경에서 코드가 동작하는가?

? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ Browser
Node

// 어떤 포맷으로 ESLint 설정파일을 생성할 것인가?

? What format do you want your config file to be in? … 
JavaScript
YAML
❯ JSON

나는 다음과 같이 답변했당

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
✔ Would you like to install them now with npm? · Yes

🤭 여기서, 내가 원하는 것은 command + s(저장)를 누를때마다 ESLint 가 fix되는 것인데, 일일이 명령어를 터미널에 수행해야만 fix가 되는 현상이 있었다.

아래와 같이 해결했다 !

1. 기본설정 열기( Command + ,(콤마) )
2. 설정 창에서 code action on save 라고 입력

3. settings.json에서 편집 클릭
4. 아래구문 추가 또는 수정

"editor.codeActionsOnSave": {
  "source.fixAll": true,
},
"editor.formatOnSave": false,

그럼 command + s(저장)를 누를때마다 ESLint가 fix되는 것을 볼 수 있다.

이제 ESLint 규칙을 설정해보자.
root폴더 바로 하단에 .eslintrc.json 파일을 생성하자.
아래 코드를 복붙해준다.

// .eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "never"],
        "no-extra-semi": "error",
        "no-tabs": ["error", { "allowIndentationTabs": true }]
    }
}

여기서 우리는 맨 밑의 rules를 수정하여 규칙을 추가할 것이다.
아래 공식 문서에서 여러 규칙들을 찾아볼 수 있다 !
https://eslint.org/docs/rules/  

위의 몇 개의 예시만 설명해보자면, 우선, "error" 는 규칙에 어긋나는 코드를 에러로 취급한다는 뜻이다.

• "semi"는 "always"와 "never"로 설정할 수 있는데,

  1. "always"(default) : 명령문의 끝으로 세미콜론을 무조건 붙이도록 한다.
  2. "never" : 명령문의 끝으로 세미콜론을 허용하지 않는다는 뜻이다.

• "quotes"는 다음과 같은 3가지 옵션이 있다.

  1. "double"(default) : 큰따옴표(")를 사용해야 한다.
  2. "single" : 작은 따옴표(')를 사용해야 한다.
  3. "backtick" : 백틱(`)을 사용해야 한다.

이런식으로 협업에 필요한 ESLint 규칙을 추가하면 된다.

이제 ESLint와 한 세트로 붙어 다니는 Prettier에 대해 알아보자

---

Prettier 란?

Prettier는 2016년에 등장한 코드 포맷터이다.
Prettier를 사용하면 코드를 완전히 다시 작성해준다. (변경이 필요한 부분만 바꾸는 것이 아니라, 코드 전체를 새로 작성한다.)
새로 작성한다고 해서 코드 내용이 변하는 것이 아니라, 구조적 뷰만 변경된다 !

다음과 같이 설치부터 해주자.

$ npm install -g -E prettier

-E는 --save-exac의 축약어로서 해당 패키지를 정확한 버전으로 설치해준다.
Prettier에서는 버전이 달라지면서 스타일이 변할 수 있기 때문에 이 옵션을 붙이는 것을 권장한다.

이제 설정 파일인 .prettierrc.json 파일을 생성한다.
Prettier 옵션은 https://prettier.io/docs/en/options.html 에서 참고하면 된다.나는 다음과 같이 작성했당

// .prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all", 
  "printWidth": 80,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false
}

이제 코드를 작성 후, 

// test.js

const abc
= 0

console.
log(abc)

prettier를 적용하면 다음과 같은 결과가 나온다.

$ prettier test.js --write

// test.js

const abc = 0;
    
console.log(abc);

---

ESLint VS Prettier

ESLint는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 둔다.

Prettier는 코드의 최대 길이, 함수에서, 작은따옴표(')를 사용할 것인지 큰 따옴표(")를 사용할 것인지 등 코드가 예쁘게 보이도록 하는지에 중점을 둔다. 하지만 코드의 에러를 잡아내진 못한다.

ESLint에도 코드 포맷팅이 있긴 하지만 Prettier의 코드 포맷팅에 비해 특화되어있지 않기 때문에,
코드 에러와 문법을 정적으로 탐지할때는 ESLint를 사용하고, 포맷팅에는 Prettier를 사용하면 된다 !

---

ESLint + Prettier 같이 사용하기

이제 ESLint와 Prettier를 같이 사용해보자.
하지만 위에서 말했듯이, ESLint가 코드 포맷터 역할도 하기 때문에 Prettier와 충돌할 수도 있다.
이를 방지하기 위해서 아래의 패키지를 추가하자.

eslint-config-prettier 패키지는 ESLint 규칙에서 Pretter 규칙과 충돌하는 규칙들을 OFF 시키는 역할을 한다.

$ npm install -D eslint-config-prettier

eslint-plugin-prettier 패키지는 Prettier 규칙들을 ESLint 규칙에 추가하는 패키지이다.
즉, eslint --fix 만 실행해줘도 prettier --write를 사용할 필요 없이 prettier까지 적용시켜준다.

$ npm install -D eslint-plugin-prettier

.eslintrc.json 에 다음을 추가하면 된다.

// .eslintrc.json

{
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
}

이제 ESLint만 실행해도 Prettier의 포맷팅 기능을 포함해서 실행하게 된다.