eslint 설치 및 설정 prettier추가하기

공식 사이트

https://eslint.org/

Eslint 설치

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

npm init @eslint/config@latest

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

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

files는 ESLint가 어떤 파일에 규칙을 적용할지 정의합니다.

js: 일반 JavaScript 파일 mjs: 모듈 기반의 JavaScript 파일 cjs: CommonJS 모듈을 사용하는 JavaScript 파일 jsx: React 컴포넌트가 포함된 JavaScript 파일 (JSX 구문 사용)

languageOptions는 전역 변수나 ECMAScript 버전 등 언어 옵션을 정의하는 데 사용됩니다.

예를 들어 node 프로젝트인데 node와 browser를 둘다 인식하게 하려면 아래처럼 작성함, 만약 node만 작성할 경우 document, window같은 객체들에서 lint는 오류라고 표시하지만 browser를 추가해주면 둘 다 사용한다고 인식하고 오류를 발생시키지 않음

import pluginJs from '@eslint/js';
import globals from 'globals';

export default [
  pluginJs.configs.recommended,
  {
    files: ['**/*.js'],
    languageOptions: {
      sourceType: 'commonjs',
      globals: {
        ...globals.node,
        ...globals.browser,
      },
    },
    rules: {
      'no-unused-vars': 'off',
    },
  },
];

Eslint에 Prettier추가하기

eslint-plugin-prettier 설치

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와 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,
  pluginReact.configs.flat.recommended,
  eslintConfigPrettier,
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    plugins: {
      prettier,
    },
    rules: {
      "prettier/prettier": [
        "error",
        {
          endOfLine: "auto",
          semi: true,
        },
      ],
    },
  },
  { languageOptions: { globals: globals.node } },
];

Eslint 플러그인

플러그인을 설치하면 실시간으로 코드를 검사 및 자동 포매팅을 사용할 수 있음