• 0. Prettier와 ESLint, 왜 필요한가요?
• 1. Prettier
  • 1. 1. Prettier 설치하기
  • 1. 2. Prettier 적용해보기
  • 1. 3. 내 설정 파일 만들기
  • 1. 4. 옵션 알아보기
• 2. ESLint
  • 2. 1. ESLint 설치하기
    • 2. 1. 0. 잠깐!
    • 2. 1. 1. 수동으로 설치하기
  • 2. 2. 설정 확인하기
• 3. Prettier와 ESLint 함께 사용하기
• 4. 자동화하기
  • 4. 1. 자동 포매팅
  • 4. 2. Git Hook으로 자동화하기
• 참고

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

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

• Prettier는 코드를 자동으로 format해주어 일정한 코드 스타일을 유지하는 데 도움이 돼요.
  • 들여쓰기(tab을 사용하는지, space를 사용하는지, 몇 칸을 들여 쓰는지), 세미콜론 사용 여부, 따옴표(큰따옴표인지 작은따옴표인지) 등을 설정할 수 있어요.
• ESLint는 JS 코드에서 문법 오류나 규칙 위반을 감지해 주는 도구에요.

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

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

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

• no-console 규칙은 console 내의 메소드들(console.log, console.warn 등)을 사용하지 못하도록 해요. console.log같은 명령어는 디버깅에는 유용하지만, 실제 배포 환경에서는 여러 문제를 일으킬 수 있어요. 민감한 정보가 외부로 유출되리 수 있고, 많은 출력 명령은 브라우저의 성능 저하를 일으킬 수도 있기 때문이에요.
• no-await-in-loop 규칙은 반목문 내에서 async/await를 사용하지 않도록 해요. 만약 반목문 안에서 async/await를 사용하는 경우, 작업들이 병렬적으로 처리되지 않아 비용 손실이 발생해요. 이를 방지하기 위해 async/await를 사용하지 않고 결과값을 Promise 객체로 반환받은 다음, Promise.all로 처리해 비동기 작업을 효율적으로 할 수 있답니다!

이제 ESLint와 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

• --save-dev나 --dev 같은 옵션을 주고 있는 게 보이나요? 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. 옵션 알아보기

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

• printWidth: 한 줄의 최대 길이를 지정한다. 기본값은 80이다.
• tabWidth: 인덴트의 너비를 지정한다. 기본값은 2이다(2칸의 공백이 들어간다).
• useTabs: 인덴트에 탭을 사용할지를 결정한다. 기본값은 false이다(space를 사용한다).
• semi: 명령문 끝에 세미콜론을 사용할지를 결정한다. 기본값은 true이다.
• singleQuote: 작은따옴표를 사용할지를 결정한다. 기본값은 false이다.
• trailingComma: 객체나 배열 등의 마지막 요소 뒤에 쉼표를 추가할 지 결정한다. 기본값은 "es5"이다.
  • "none": 마지막 쉼표를 사용하지 않는다.
  • "es5": ES5에서 허용되는 위치에만 추가한다.
  • "all": 가능한 모든 곳에 추가한다.
• arrowParens: 화살표 함수의 매개변수가 하나일 때, 괄호를 사용할 지 결정한다. 기본값은 "always"이다.
  • "always": 항상 괄호를 사용한다.
  • "avoid": 매개변수가 하나인 경우, 괄호를 생략한다(x => x).

이제 아래 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. 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

이렇게

• ESLint를 어떤 용도로 사용하는지,
• 어떤 프레임워크를 사용하는지,
• TS를 사용하는지

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

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같은 플러그인을 추가로 설치했는데, 선택한 옵션에 따라 다른 플러그인들이 들어 있을 수도 있어요.

그런데 정말 충격적이게도, 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. 1. 자동 포매팅

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

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

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

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

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에 이렇게 설정을 추가하면 커밋 전에 린팅과 포매팅이 자동으로 적용돼요!

• ESLint: https://eslint.org/
• Rules Reference: https://eslint.org/docs/latest/rules/