Eslint와 Prettier

포매터와 린터

• 포매터 | 코드 스타일 검사/수정(포매팅) → 규칙과 다른 코드가 있는지
• 린터 | 코드의 구조를 검사해서 잘못 작성된 코드가 없는지 확인

0️⃣ 자동화 도구들

포매터와 린터의 실행을 대신해 주는 자동화 도구를 사용한다.

Husky

husky를 사용하면 커밋을 하기 전이나 푸시를 하기 전에 포매터와 린터를 실행해서 자동으로 코드를 검사하도록 할 수 있다.

참고로 Husky는 Git에서 제공하는 깃 훅(Git Hooks)이라는 기능을 쉽게 사용할 수 있도록 해주는 패키지이기 때문에, 꼭 husky를 사용하지 않더라도 Git의 기능으로 이런 자동화를 할 수 있다.

Github Action

자동화 스크립트를 내 컴퓨터에서만 실행하는 게 아니라, 깃허브 같은 원격 저장소에서도 실행할 수 있다. 최근에는 깃허브에서 기본적으로 제공하는 Github Action이라는 걸 많이들 사용한다.

1️⃣ Prettier

01. 패키지로 설치하기

프로젝트에 devDependencies 로 prettier 라는 패키지를 설치한다.

npm install --save-dev prettier

Prettier에서 사용할 규칙을 적은 파일인 .prettierrc.json 파일을 만든다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

02. VS Code 확장 프로그램으로 사용하기

VS Code의 Extension 메뉴에서 prettier를 검색해서 설치할 수 있다.

마찬가지로 .prettierrc.json를 만든다.

2️⃣ ESLint

: 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구

01. React (Create React App)에서 사용하기

프로젝트 폴더에서 터미널을 열고, ESLint에서 제공하는 도구를 사용해서 초기화 한다.

npm init @eslint/config

설치 목적을 선택한다. 일단 문법을 검사하고, 문제를 찾아내는 것을 선택한다.

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

모듈 문법은 import/export 를 위주로 쓴다면 그렇게 설정한다.

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

그 외에도 필요한 설정을 선택한다.

성공적으로 세팅했다면 package.json 의 devDependencies에 아래 두 패키지가 추가되어 있을 것이다.
(버전은 달라도 상관 없음)

"eslint": "^8.39.0"
"eslint-plugin-react": "^7.32.2"

이제 NPM 스크립트를 추가한다.

{
  ...
  "script": {
    "lint": "eslint src/**/*.js",
    ...
  }
}

src 폴더 아래에 있는 모든 자바스크립트 파일에 eslint를 실행하도록 하는 코드이다.

npm run lint 를 실행하면 eslint가 실행된다.

.eslintrc.js라는 파일이 만들어져 있는데, 이 파일은 eslint에 적용할 규칙을 코드로 작성한 파일이다. 이걸 수정하면 적용할 규칙을 바꿀 수 있다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},

02. VS Code에서 확장 프로그램으로 사용하기

확장 프로그램을 설치하고 .eslintrc.js와 같은 설정 파일을 만들어 두면 VS Code에서 바로바로 린트 결과를 확인할 수 있다.

확장 프로그램 탭에서 eslint를 검색해 설치하고 소스 코드에 생긴 빨간 줄에 마우스 커서를 올려보면 ESLint 오류를 확인할 수 있다.