NodeJS 프로젝트 초기설정: ESLint + Prettier + Husky Git hook

안녕하세요.

 

오늘은 NodeJS에 기반한 프로젝트들 (Express, React 등등)에서 사용되는 ESLint 관련 초기설정에 대해 다루려고 해요.

 

매번 찾아보기 귀찮아서, 게시물 형태로 남겨두려고 합니다.

ESLint 설치 및 초기화

먼저, ESLint를 다음 명령어로 설치하고, 초기화해줘요.

pnpm create @eslint/config@latest

실행하여 프로젝트에 질문들에 대답하면 이에 맞는 eslint.config.mjs 파일이 생성됩니다.

Prettier 설치

ESLint를 초기화 했다면, Prettier도 설치하고 초기설정을 해줘요.

 

다음의 명령어로 설치해요.

pnpm add prettier -D

 

Prettier 설치 후에

• .prettierrc 파일 생성해서, {} 입력
• .prettierignore 파일 생성해서 무시할 파일 작성

하면 prettier 초기화가 완료됩니다.

ESLint + Prettier 세팅

ESLint와 Prettier를 같이 사용하면 충돌하는 세팅이 생겨요.

이런 컨플릭트가 있는 세팅들을 무시해주는 역할을 담당하는 패키지들이예요.

pnpm add eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

eslint-plugin-prettier: Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  eslintConfigPrettier,
];

 

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  // Any other config imports go at the top
  eslintPluginPrettierRecommended,
];

Git Hook

husky, lint-staged 설치

pnpm add husky lint-staged -D
pnpm exec husky init
chmod +x .husky/pre-commit

.husky/precommit 에 자동으로 test 돌리는 스크립트를 넣나봅니다..
pnpm exec lint-staged 추가해줍니다.

pnpm test
pnpm exec lint-staged

create-react-app 에서 기본으로 설정된 pnpm test 스크립트는.. watch를 켜두기 때문에 husky에서 못넘어간다..
이럴 경우 "test": "react-scripts test --watchAll=false" 이런식으로 --watchAll=false 속성 지정해줄것

package.json에 스크립트 작성

{
  "lint-staged": {
    "**/*": [
      "prettier --cache --write --ignore-unknown",
      "eslint --cache --fix"
    ]
  },
}

React 참고: eslint config 추가설정..

.test.js 로 끝나는 jest 파일때문에 eslint에서 막힐 경우가 있다...
이는 ...globals.jest option 추가해줘서 해결

그리고, react-in-jsx-scope 역시 v17부터 필요없다.

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier/flat";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest, // 이 부분
      },
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    rules: {
      "react/react-in-jsx-scope": "off", // 이 부분
    },
  },
  eslintPluginPrettierRecommended,
  eslintConfigPrettier,
];

Reference

https://prettier.io/docs/install
https://eslint.org/docs/latest/use/getting-started
https://medium.com/@bkn020612/using-eslint-husky-lint-staged-6d6609b02fc2