1. Prettier, ESLint 세팅하기

코드 스타일을 통일해봅시다

Table Of Contents

0. Prettier와 ESLint, 왜 필요한가요?

Prettier, ESLint 설정은 아주아주아주 중요해요.

개인 프로젝트에서도 굉장히 유용하게 살 수 있지만, 팀 프로젝트에서는 거의 없으면 안 되는 존재가 된답니다..!

 

예를 들어서, Prettier를 설정하지 않아 어떤 사람은 큰따옴표(")를, 어떤 사람은 작은따옴표(')를 사용한다면 코드가 아주 중구난방이 되겠죠..?🤔

ESLint의 규칙 역시 코드의 품질을 일정 수준 이상으로 유지할 수 있도록 도와줘요. 함수/변수의 선언 방식 및 네이밍 방식을 일관되게 맞추도록 도와주고, 불필요한 변수 선언이 남아 있는지를 탐지하거나, 비효율적인 코드를 작성하지 않도록 해줍니다.

몇 가지 예시를 살펴봅시다!

 

이제 ESLint와 Prettier를 프로젝트에 세팅하는 방법을 알아봅시다!

 

1. Prettier

1. 1. Prettier 설치하기

설치 가이드에 따라서 prettier를 설치할 수 있어요.

npm install --save-dev --save-exact prettier
# or
yarn add --dev --exact prettier
# or
pnpm add --save-dev --save-exact prettier
# or
bun add --dev --exact prettier

1. 2. Prettier 적용해보기

먼저 코드 스타일이 통일되지 않은 파일을 준비해봤어요!

// test.js

// 통일되지 않은 따옴표, 세미콜론 형식
const a = 'a';
const b = 'b'
const c = "c";
const d = "d"

// 통일되지 않은 중괄호 위치
function foo()
{
  console.log("foo");
}

function bar() {
  console.log("bar");
}

// 이상한 인덴트!
foo();
    bar();

npx prettier . --write명령어를 입력하면

// test.js

// 통일되지 않은 따옴표, 세미콜론 형식
const a = "a";
const b = "b";
const c = "c";
const d = "d";

// 통일되지 않은 중괄호 위치
function foo() {
  console.log("foo");
}

function bar() {
  console.log("bar");
}

// 이상한 인덴트!
foo();
bar();

이렇게 코드를 확인하고, 같은 스타일로 통일해줘요!

 

만약 파일 수정이 아니라 스타일이 통일되지 않은 파일만 확인하고 싶다면 npx prettier . --check 명령어를 이용할 수 있어요.

--check 옵션으로 실행시키면 터미널에서 이렇게 확인할 수 있답니다.

Checking formatting...
[warn] test.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

1. 3. 내 설정 파일 만들기

방금 포매팅한 코드는 Prettier의 기본 설정에 따른 것이에요.

이런 설정들을 .prettierrc 파일에서 정해줄 수 있어요!

{
  "semi": false,
  "singleQuote": true
}

이런 식으로 key-value 형식의 JSON 파일로 옵션을 주면 돼요.

.prettierrc.js, .prettierrc.yaml 파일로도 설정할 수 있으니 https://prettier.io/docs/en/configuration.html 에서 예시를 확인해봅시다!

1. 4. 옵션 알아보기

이제 많이 쓰이는 옵션을 몇 가지 알아봅시다.

 

이제 아래 prettierrc 파일을 가지고 포매팅을 하면, 이런 결과물을 얻을 수 있어요.

// .prettirrc

{
  "semi": false,
  "singleQuote": true
}

// 통일되지 않은 따옴표, 세미콜론 형식
const a = 'a'
const b = 'b'
const c = 'c'
const d = 'd'

// 통일되지 않은 중괄호 위치
function foo() {
  console.log('foo')
}

function bar() {
  console.log('bar')
}

// 이상한 인덴트!
foo()
bar()

2. ESLint

2. 1. ESLint 설치하기

2. 1. 0. 잠깐!

만약 create-next-app등을 이용해서 프로젝트를 시작하면 알아서 ESLint도 세팅해주기도 해요. ESLint를 사용할 것인지를 물어 볼 때 Yes를 선택해줍시다!

> npx create-next-app start-team-project
...
✔ Would you like to use ESLint? … No / Yes

ESLint가 깔려 있는지 아닌지 모르겠다면, 아래처럼 package.json 파일을 열어 봤을 때, devDependencies 안에 eslint가 있는지 확인해보면 돼요.

// package.json

{
  "name": "start-team-project",
  ...
  "devDependencies": {
    ...
    "eslint": "^8",
    "eslint-config-next": "15.0.3"
  }
}

2. 1. 1. 수동으로 설치하기

설치 가이드(https://eslint.org/docs/latest/use/getting-started)를 따라 설치하면 돼요.

아래 명령어를 통해 설치 및 설정을 할 수 있어요!

npm init @eslint/config@latest
# or
yarn create @eslint/config
# or
pnpm create @eslint/config@latest

 

저는 npm init @eslint/config@latest를 통해 세팅을 진행했더니 24/11/20 기준, @eslint/create-config v1.4.0를 이용해서 설치가 진행됐어요.

npm init @eslint/config@latest
@eslint/create-config: v1.4.0

✔ 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? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-react
? Would you like to install them now? › No / Yes

이렇게

등에 따라서 필요한 플러그인들까지 한번에 설치할 수 있어요.

2. 2. 설정 확인하기

이렇게 설치를 마치면 프로젝트 폴더 안에 eslint.config.mjs라는 파일이 생겨요. (eslint v9.15.0 기준)

파일을 열어보면 이런 모습이에요.

// eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

저는 typescript-eslint, eslint-plugin-react같은 플러그인을 추가로 설치했는데, 선택한 옵션에 따라 다른 플러그인들이 들어 있을 수도 있어요.

3. Prettier와 ESLint 함께 사용하기

그런데 정말 충격적이게도, Prettier와 ESLint 사이에는 충돌하는 규칙들이 있답니다🤯

이 규칙들을 비활성화하기 위해서, 보통 eslint-config-prettier를 설치해 충돌하는 ESLint 규칙들을 비활성화해요.

또한, 포매팅 규칙에 어긋나는 코드가 있다면 ESLint 경고로 보여주기 위해서 eslint-plugin-prettier라는 플러그인을 설치하기도 해요.

 

아래 명령어를 통해서 두 플러그인을 설치해봅시다!

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# or
yarn add --dev eslint-config-prettier eslint-plugin-prettier
# or
pnpm add --save-dev eslint-config-prettier eslint-plugin-prettier

 

설치 후, 위에서 만들었던 eslint.config.mjs 파일에 추가적으로 import해줘야 해요.

// eslint.config.mjs

import prettier from "eslint-config-prettier";
import pluginPrettier from "eslint-plugin-prettier";

export default [
  // 기존 설정들
  ...pluginPrettier.configs.recommended,
  prettier,
  {
    rules: {
      "prettier/prettier": ["error"], // Prettier 규칙 위반 시 에러로 표시
    },
  },
];

4. 자동화하기

이렇게 열심히 세팅을 해줬는데, 일일이 쉘에 명령어를 입력해서 코드를 포매팅하기에는 수고가 너무 많이 듭니다...!

추가적인 설정을 통해서 더 편리하게 사용해봅시다!

4. 1. 자동 포매팅

VSCode에는 Prettier나 ESLint 사용을 편하게 해 주는 확장들이 있기 때문에 같이 사용하면 좋아요🥰

그 중에서도, Prettier 확장을 사용하면 저장, 붙여넣기같은 액션을 할 때마다 자동으로 포매팅되도록 할 수 있어요.

1. prettier extension

해당 extension을 설치하고, VSCode에서 Default Formatter를 Prettier로 설정해주세요.

또한, Format on Paste, Format on Save도 체크해주면 저장 및 붙여넣기시에 코드가 자동으로 포매팅된답니다.

2. Default Formatter

4. 2. Git Hook으로 자동화하기

husky와 lint-staged를 사용하여 커밋 전에 자동으로 린팅 및 포매팅을 실행하도록 설정할 수 있어요.

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

위 명령어로 husky와 lint-staged를 설치하고,

{
  ...
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

package.json에 이렇게 설정을 추가하면 커밋 전에 린팅과 포매팅이 자동으로 적용돼요!

참고