포매터와 린터

코딩 컨벤션

개발자들이 논의를 통해 어떤 스타일로 코드를 작성할지 약속해 놓은 규칙, 매뉴얼이다.
코딩컨벤션

포매터와 린터

코딩 컨벤션을 일일이 외우고 사용하기는 어렵다. 그래서 이것을 대신해주는 개발 도구가 포매터와 린터이다.
규칙을 미리 정해두면 포매터는 코드 스타일을 검사/수정(포매팅)해주고, 린터는 코드의 구조를 검사해서 잘못 작성된 코드가 없는지 확인해준다.

자동화 도구들

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

Husky

husky를 사용하면 커밋을 하기 전이나 푸시를 하기 전에 포매터와 린터를 실행해서 자동으로 코드를 검사하도록 할 수 있다.
참고로 Husky는 Git에서 제공하는 깃 훅(Git Hooks)이라는 기능을 쉽게 사용할 수 있도록 해주는 패키지이기 때문에, 꼭 husky를 사용하지 않더라도 Git의 기능으로 이런 자동화를 할 수 있다.

Github Action

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

Editor Config

코드 스타일 설정을 모두 동일하게 하는 것
.editorconfig 파일을 만들고 프로젝트 최상위 폴더에 배치해두면, 기본적인 에디터 설정을 할 수 있다.
이렇게 해두면 프로젝트 소스코드만 다운 받으면 별도로 에디터 설정 할 필요 없이 기본적인 코드 스타일을 설정할 수 있다는 장점이 있다.

root = true

[*]
indent_style = space          # 들여쓰기에 스페이스 사용
indent_size = 2               # 들여쓰기 크기는 스페이스 2개로 쓰기
charset = utf-8               # 파일 인코딩은 utf-8
insert_final_newline = true   # 파일 맨 마지막에 빈 줄 추가하기

Prettier

패키지로 설치하기

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

npm install --save-dev prettier

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

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

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

VS Code의 Extension 메뉴에서 prettier를 검색해서 설치할 수 있다.
마찬가지로 .prettierrc.json를 만든다.
Prettier

ESLint

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

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: {},

Next.js에서 사용하기

Next.js에서는 기본적으로 ESLint를 별도의 설정 없이 사용할 수 있다.
.eslintrc.js 파일을 만들고 npm run lint 를 실행해 보면 된다.
Basic Features: ESLint | Next.js

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

확장 프로그램을 설치하고 .eslintrc.js와 같은 설정 파일을 만들어 두면 VS Code에서 바로바로 린트 결과를 확인할 수 있다.
확장 프로그램 탭에서 eslint를 검색해 설치하고 소스 코드에 생긴 빨간 줄에 마우스 커서를 올려보면 ESLint 오류를 확인할 수 있다.

자주 쓰이는 설정들

규칙 추가하는 법
rules라는 프로퍼티에서 객체를 만들고, 그 객체에서는 각 프로퍼티의 이름으로 규칙의 이름을 쓴 다음 규칙을 설정할지 말지를 결정한다.
어떤 규칙을 쓸 수 있는지는 공식문서에서 찾아보면 된다.

팁1: Prettier와 ESLint 충돌없이 사용하기

포매터와 린터를 함께 쓰다보면 포매터와 린터의 규칙이 조금씩 달라서 곤란할 때가 있다. 이럴 때는 린터에서 포매터의 설정들을 포함하도록 설정해 주면 된다.

먼저, eslint-config-prettier 패키지를 설치한다. 이 패키지는 ESLint의 규칙 중에서 Prettier와 충돌의 여지가 있는 규칙들을 꺼주는 역할을 한다.

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

그리고나서 다음과 같이 .eslintrc 에 prettier 를 추가하면 된다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'airbnb',
    'airbnb/hooks',
    **'prettier',**
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
};

팁2: TypeScript와 ESLint 사용하기

typescript-eslint

최신 버전에서는 ESLint 안에서 타입스크립트를 지원한다. 마찬가지로 공식 홈페이지의 설명을 참고해 TypeScript와 관련된 패키지들을 설치하고, .eslintrc 를 수정하면 된다.

참고하면 좋은 자료

JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)

Stylelint

ESLint가 자바스크립트의 구문을 분석해 검사하는 도구하면 Stylelint는 CSS를 위한 린터이다.
일반적인 CSS 문법이 아니라, SCSS같은 프리프로세서 문법이라던지 Styled-Components 같은 CSS-in-JS 라이브러리에서도 Stylelint를 위한 플러그인을 만들어서 제공하는 경우도 있다.

Husky

깃 훅(Git Hooks) 기능을 손쉽게 쓰도록 도와주는 NPM 패키지

패키지를 설치하고 공식 문서의 설명처럼 prepare 라는 NPM 스크립트로 husky install 을 추가한 다음에 한 번 실행해준다. (참고로 여기서 첫 번째 줄은 package.json 파일에서 scripts 안에다가 preprare: "husky install" 을 추가하는 명령어임)

npm pkg set scripts.prepare="husky install"
npm run prepare

이제 npm run lint 명령어를 통해 pre-commit 훅을 추가한다.

npx husky add .husky/pre-commit "npm run lint"

코드를 수정하고 커밋을 해 보면, npm run lint 를 먼저 실행하고, 만약에 린트가 깨진다면 커밋이 생성되지 않는다.