ESLint 설치 방법

ESLint
ESLint는 ES(ECMAScript)와 Lint의 합성어로,
자바스크립트를 분석하여 오류나 버그를 찾는데 도움을 주는 정적 분석도구

 

1.  설치

 yarn add --dev eslint eslint-config-prettier

 eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 끔

 

2. ESLint 설정 파일을 생성하고 초기 설정을 도와주는 마법사(wizard) 를 실행

npx eslint --init

 

위의 과정이 끝나고 설치되면 eslint.config.mjs 파일이 만들어짐

 

3. eslint.config.mjs 파일 설정

import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";
import tseslint from "typescript-eslint";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{ts,tsx,js,jsx}"],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module"
      },
      globals: {
        ...globals.browser,
      },
    },
    plugins: {
      "@typescript-eslint": tseslint.plugin,
      react: pluginReact,
    },
    settings: {
      react: {
        version: "19.1.3",  // 현재 설치된 react 버전으로 설정
      },
    },
    rules: {
      ...tseslint.configs.recommended.rules,
      ...pluginReact.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",  // import react form React 안해도됨
    },
  },
]);

 

 

4. 오류 등 확인

yarn eslint ./src

 

 

 

 

아래처럼 설정해두면 ctrl+s 로 저장 시 자동으로 eslint 코드 적용된다.