ESLint

Webpack에 ESLint를 적용해 코드 규칙을 통일성 있게 관리해보자.

왜 eslint를 적용하나

여러 사람이 함께 개발하다 보면, 코드 스타일(예: 들여쓰기, 공백 처리 등)이 사람마다 다를 수 있다.
이러한 규칙이 통일되지 않으면, 의미 없는 스타일 수정 커밋이 반복적으로 발생하고 코드 히스토리가 복잡해질 수 있다.
이러한 문제를 해결하기 위해 Lint 도구를 사용한다.
- Lint는 코드의 일관성을 유지하고, 잠재적인 오류를 미리 발견하도록 돕는 역할을 한다.
이 문서에서는 Webpack에 ESLint를 적용하는 방법을 정리하고, TypeScript와 Prettier를 함께 설정하는 방법도 다뤄보겠다.
- Webpack 없이도 Lint 검사가 가능하지만, Webpack과 연계하면 빌드 과정에서 자동으로 검사를 수행할 수 있어 개발 흐름을 더욱 간소화할 수 있다.

eslint.config.js

다른 블로그를 찾아보면 .eslintrc를 활용하여 eslint를 설정하는것을 볼 수 있다.
최신 문서에서는 eslint.config.js로 설정하도록 권장 하고 있으며 flat config라는 이름으로 사용되고 있다.
- 이전 버전의 .eslintrc와 설정하는 방법에 차이가 존재하여 같은 방식으로 작성하면 제대로 작동 안할 수 있다.
필요한 라이브러리
- eslint-webpack-plugin
- typescript-eslint
- eslint-plugin-prettier
- eslint-config-prettier

설정 파일

typescript에 맞는 eslint와 prettier를 같이 적용한 eslint설정 파일이다.

//eslint.config.mjs

import tseslint from 'typescript-eslint';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import eslintCongigPrettier from 'eslint-config-prettier';

export default tseslint.config({
  files: ['**/*.tsx', '**/*.ts'],//파일의 형식
  extends:[
    eslintCongigPrettier
  ],
  plugins:{
    '@typescript-eslint': tseslint.plugin,
    'prettier': eslintPluginPrettier
  },
  languageOptions:{
    parser: tseslint.parser,
    parserOptions: {
      projectService: true,
      tsconfigRootDir: import.meta.dirname,
    },
  },
  rules: {
    'prettier/prettier': 'error',//프리티어 에러 표시
    '@typescript-eslint/no-unsafe-argument': 'error',
    '@typescript-eslint/no-unsafe-assignment': 'error',
    '@typescript-eslint/no-unsafe-call': 'error',
    '@typescript-eslint/no-unsafe-member-access': 'error',
    '@typescript-eslint/no-unsafe-return': 'error',
  },
});

webpack.config.js

웹팩에는 아래처럼 플러그인을 적용하면 eslint가 같이 연계하게 된다.

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
...
plugins: [
    ...,
    new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      //이부분은 오류를 표시할지 여부
      emitError: true,
      emitWarning: true,
      failOnError: true,
      failOnWarning: true,
      
      configType: 'flat', //flat으로 하여 eslint.config.js가 인식할 수 있게 하자.
    }),
  ],
...
}

왜 mjs인가요?

만약 위의 파일을 그대로 eslint.config.js로 만들면 에러가 나올것이다.
이는 CommonJS방식이 아닌 형태로 작성되어서 문법 오류로 에러가 나오게 된다.
공식에서는 이를 위해 package.json에서 "type":"module"을 추가하거나 mjs로 파일을 변화시키라는 해결책을 말한다.
아니면 CommonJS방식으로 수정하는 법도 있다.

//common js방식
module.exports = [
    {   
        rules:{}
    }
];

ts eslint참고

typescript eslint하면 자주 보이던 @typescript-eslint/parser, @typescript-eslint/eslint-plugin는 이제 legacy로 삭제를 진행해야 한다.
- npm un @typescript-eslint/parser @typescript-eslint/eslint-plugin