eslint 설치 및 설정 prettier추가하기

by

개발을 하다 보면 코드 스타일이 팀원마다 다르게 작성되는 경우가 많다. 이런 문제를 해결하기 위해 “코딩 스타일을 자동으로 맞춰주는 도구”를 사용하는데, 대표적인 것이 ESLint와 Prettier이다. 이 글에서는 ESLint와 Prettier를 설치하고, 충돌 없이 함께 사용할 수 있도록 설정하는 방법을 정리한다.

ESLint란

ESLint는 JavaScript 코드에서 문법 오류나 잠재적인 버그를 찾아내고, 일관된 코드 스타일을 유지하도록 도와주는 역할을 한다. 특히, 팀 단위 개발에서는 코드 스타일 가이드를 강제할 수 있어 협업 효율을 높일 수 있다.

✅ 코드 품질 유지 → 버그 예방 및 안정적인 코드 작성
✅ 코드 스타일 강제 → 협업 시 일관성 유지
✅ 자동 포맷팅 지원 → 개발 생산성 향상

ESLint 설치

설치 전 npm init 명령어를 사용해서 package.json 파일을 생성해야 아래 명령어를 사용할 수 있음

npm init @eslint/config@latest

명령어를 입력했으면 여러가지 물어보는데, 프로젝트에 맞게 설정

How would you like to use ESLint? (ESLint를 어떻게 사용하고 싶습니까?)

  • To check syntax only → 문법만 검사
  • To check syntax and find problems) → 문법 검사 + 문제 찾기 (권장)

What type of modules does your project use? … (프로젝트에서 어떤 모듈 시스템을 사용합니까?)

  • JavaScript modules (import/export) → ES6 모듈 (import/export 사용)
  • CommonJS (require/exports) → CommonJS 모듈 (require/module.exports 사용, 주로 Node.js에서 사용)
  • None of these → 모듈 시스템을 사용하지 않음

Which framework does your project use? … (어떤 프레임워크를 사용합니까?)

  • React
  • Vue.js
  • None of these → 프레임워크를 사용하지 않음

Does your project use TypeScript? … (프로젝트에서 TypeScript를 사용합니까?)

  • No
  • Yes

Where does your code run? … (Press to select, to toggle all, to invert selection)

  • Browser → 브라우저에서 실행 (클라이언트 사이드 코드)
  • Node → Node.js 환경에서 실행 (서버 사이드 코드)
  • 여러 개 선택 가능

eslint, globals, eslint-plugin-react? Would you like to install them now? (eslint, globals, eslint-plugin-react를 지금 설치하시겠습니까?)

  • No → 설치하지 않음
  • Yes → 지금 설치

Which package manager do you want to use? (어떤 패키지 매니저를 사용하겠습니까?)

  • npm → npm 사용
  • yarn → yarn 사용
  • pnpm → pnpm 사용
  • bun → bun 사용

설치가 완료 되었으면 eslint.config.mjs 파일이 생성이 됨

import globals from "globals";
import pluginReact from "eslint-plugin-react";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginReact.configs.flat.recommended, //eslint에서 추천하는 규칙
];

옵션

files

files 옵션은 ESLint가 검사할 파일을 지정하는 옵션

files: ["src/**/*.js"], // src 폴더 내 모든 JS 파일 검사
files: ["*.js", "*.jsx", "*.ts", "*.tsx"], // JS, JSX, TS, TSX 파일 검사
files: ["tests/**/*.js"], // tests 폴더 내 JS 파일만 검사
...

ignores

ESLint가 검사하지 않을 파일이나 폴더를 지정하는 옵션

  1. 기본적으로 ESLint는 [“**/node_modules/”, “.git/”]을 무시함.
  2. 파일 이름이 .(점)으로 시작하는 경우도 기본적으로 ESLint 검사 대상이 됨. 예를 들어, .foo.js, .fixtures/ 같은 파일도 검사됨. 하지만 .git/ 폴더는 ESLint가 기본적으로 무시함.
ignores: [
    "node_modules/",  // 모든 설정에서 node_modules/ 무시
    "dist/",          // 모든 설정에서 빌드 폴더(dist/) 무시
    "logs/",          // 모든 설정에서 로그 폴더(logs/) 무시
    "*.min.js"        // 모든 설정에서 압축된 JS 파일 무시
    "src/temp/",       // temp 폴더 내부 파일만 무시 (temp/ 자체는 무시되지 않음)
    "**/*.test.js"    // 테스트 파일 무시
]

languageOptions

JavaScript 생태계에는 다양한 런타임, 버전, 확장 및 프레임워크가 있음, 이들은 모두 각기 다른 환경을 가지는데, 그 부분을 정의하는 옵션

ecmaVersion 지정하기

ecmaVersion은 ESLint가 인식하는 JavaScript 버전을 결정하는 설정

languageOptions: {
  ecmaVersion: 5
}
  • latest: 기본 값이고, 항상 최신 ECMAScript 버전을 사용
  • 2015 ~ 2022: 2015년부터 현재까지의 버전
  • 3 ~ 5: ECMAScript 버전

설정한 버전에 따라서, 사용할 수 있는 문법(syntax)과 전역 변수(global variables)가 결정

sourceType 지정하기

sourceType은 모듈 시스템 설정, 이 값에 따라 모듈 시스템, 엄격 모드 적용 여부, 변수 범위(scope)이 달라

languageOptions: {
  sourceType: "module"
}
  • module: 기본 값, ESM 모듈, strict 모드
  • commonjs: CommonJS 모듈, 기본적으로 strict 모드가 적용되지 않음
  • script: 일반 자바스크립트 파일, 기본적으로 strict 모드가 적용되지 않음
옵션 값사용 환경특징
“module”브라우저, ES6+ 환경, 최신 프로젝트import/export 사용 가능, 자동 strict mode 적용
“commonjs”Node.js (ESM 미사용)require() / module.exports 사용 가능, strict mode 없음
“script”브라우저용 일반 스크립트전역 변수 공유, strict mode 없음

globals(전역변수) 지정하기

linting할 때 글로벌 스코프에 추가할 추가적인 객체를 지정하는 객체, ESLint가 특정 전역 변수를 인식하게 함.

기본 파서(espree) 외에 TypeScript, Babel 등을 사용할 수 있음.

export default {
  languageOptions: {
    globals: {
      window: "readonly",  // 브라우저 환경
      process: "readonly", // Node.js 환경
      MY_GLOBAL: "writable" // 사용자가 추가한 전역 변수 (수정 가능)
    }
  }
};

✅ “readonly” → 읽기 전용 (변경 불가능)
✅ “writable” → 수정 가능

parser

파싱을 위해 parse() 또는 parseForESLint() 메서드를 포함하는 객체 기본값은 espree

파서에 추가 옵션을 전달하여 ES 버전, JSX 지원 등을 설정 가능.

export default {
  languageOptions: {
    parser: "@typescript-eslint/parser" // TypeScript 지원
  }
};

✅ espree (기본값) → JavaScript 기본 문법을 파싱
✅ @typescript-eslint/parser → TypeScript를 사용하려면 이 파서 필요
✅ babel-eslint (구버전) → Babel을 통해 최신 JS 문법을 지원

parserOptions

파서의 parse() 또는 parseForESLint() 메서드에 직접 전달되는 추가 옵션을 지정하는 객체

export default {
  languageOptions: {
    parserOptions: {
      ecmaVersion: 2022,  // ECMAScript 최신 문법 지원
      sourceType: "module", // ES 모듈 사용
      ecmaFeatures: {
        jsx: true, // JSX 문법 지원 (React 사용 시 필수)
        globalReturn: false // 최상위 `return` 허용 여부
      }
    }
  }
};

✅ ecmaVersion → ECMAScript 버전 (기본값: 5)
✅ sourceType → "module"(ES6 모듈) 또는 "script"(전역 스크립트)
✅ ecmaFeatures.jsx → JSX 지원 (React 프로젝트에서 필요)
✅ globalReturn → 전역 return 허용 (Node.js 환경에서 필요할 수도 있음)

규칙 추가하기

규칙은 아래 코드예시처럼 추가할 수 있음, 규칙 리스트 확인하기: https://eslint.org/docs/latest/rules

import globals from "globals";
import pluginReact from "eslint-plugin-react";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginReact.configs.flat.recommended,
  {
    rules: {
      "no-unused-vars": "warn",
      "no-undef": "warn"
    }
  }
];

eslint-plugin-prettier 플러그인: ESLint에 Prettier추가하기

eslint-plugin-prettier 설치, 해당 플러그인에 대한 https://prettier.io/docs/integrating-with-linters.html 

npm i -D eslint-plugin-prettier
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import prettier from "eslint-plugin-prettier";

export default [
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    plugins: {
      prettier,
    },
    rules: {
      // 이렇게 사용
      "prettier/prettier": [
        "error",
        {
          endOfLine: "auto",
          semi: true,
        },
      ],
    },
  },
  { languageOptions: { globals: globals.node } },
];

eslint-config-prettier 플러그인: ESLint와 Prettier를 함께 사용할 때 두 도구 간의 규칙 충돌을 방지

해당 플러그인은 ESLint와 Prettier의 충돌하는 규칙들을 해제하는 기능을

eslint-config-prettier git: https://github.com/prettier/eslint-config-prettier

npm i -D eslint-config-prettier
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import prettier from "eslint-plugin-prettier";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  pluginJs.configs.recommended, // ESLint 추천 규칙
  pluginReact.configs.flat.recommended, // ESLint React 추천 규칙
  // 추천하는 규칙보다 아래 있어야 함
  eslintConfigPrettier,
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    plugins: {
      prettier,
    },
    rules: {
      "prettier/prettier": [
        "error",
        {
          endOfLine: "auto",
          semi: true,
        },
      ],
    },
  },
  { languageOptions: { globals: globals.node } },
];

VSCode 내에서 자동 실행하여 실시간 코드 검사: VSCODE ESLint Extension

VSCode Extension에서 ESLint Extension을 설치하면 ESLint를 VSCode 내에서 자동 실행하여 실시간 코드 검사 및 오류 수정 지원함

prettier가 동작하지 않을때 Default Formatter 설정하기

cursor를 사용하면서 프리티어가 동작하지 않았는데, default formatter 설정이 안되어 있었다.

file > preferences > settings > formatter 검색

만약에 Prettier – Code formatter가 없다면, market place에서 Prettier – Code formatter가 없는지 확인하라, 없으면 위에 옵션 선택에 나오지 않음

format on save 체크 > 체크 해야 저장할때마다 동작한다.

prettier config 파일이 존재할때만 동작하게 하기

default formatter와 format on save를 사용하면 저장할때마다 항상 동작하게 되는데, prettier config 파일이 존재할때만 동작하게 할 수 있다.

settings에서 > settings 검색 > settings.json 파일 열기(edit in settings.json 클릭)

이미지 처럼 옵션들이 나오는데 여기에 아래 코드를 추가한다. 위치는 상관 없음

  "prettier.requireConfig": true,

이렇게 추가하면, config 파일이 존재할때만 동작함

참조

eslint docs

prettier docs

Leave a Comment