Webpack 6장 (plugin -> eslint 추가)

Eslint

Webpack plugin을 배운 기념으로 eslint 내용도 보여서 한번 써보기로 했다.

Eslint vs Prettier

ESLint는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 두었습니다.

Prettier는 코드의 최대 길이, 함수에서, 작은따옴표(')를 사용할 것인지 아니면 큰 따옴표(")를 사용할 것인지 등 코드가 예쁘게 보이도록 하는지에 중점을 두었습니다. 하지만 코드의 에러를 잡아내진 못합니다.

Eslint

웹팩 Eslint 공식 홈페이지에서는 loader로 인한 eslint는 사용하지말고 plugin을 통해서 사용하라고 권한다.
The loader eslint-loader will be deprecated soon, please use this plugin instead.

사용법

1. npm install eslint-webpack-plugin --save-dev 명령어 사용
2. 아래와 같이 webpack.config.js에 코드 작성 (options는 필수는 아니다)
3. npx webpack 명령어 실행

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

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

실행결과

따로 문제는 없었다.

출처

eslint webpack