웹팩 개발 서버 ESLint 에러 띄우기
리액트 환경에서 수동으로 웹팩과 타입스크립트까지 적용했고 이후 Prettier & ESLint 설정도 했고 .eslintrc 파일에 원하는 규칙도 작성해놨는데 문제가 발생했다.
IDE에서는 린트에 맞지 않는 코드는 빨간 줄로 잘 표시가 되지만 웹팩 개발 서버에서는 잘 돌아가고 빌드 또한 잘 된다.
내가 원하는 건 개발 서버나 빌드 시 린트에 맞지 않는 코드는 에러를 띄우고 싶었다. CRA(Create-React-App) 명령어로 ESLint 설정을 하면 자동으로 개발 서버에서 에러 창이 떴는데, 수동으로 셋팅했을 때만 안 되는 경우였다.
그래서 웹팩과 관련한 플러그인을 찾아봤는데.. 역시나 관련된 플러그인이 있었다. 나중에 CRA 프로젝트를 eject을 해서 파악해보는 시간이 필요할 것 같다.
웹팩 플러그인 설치
npm i -D eslint-webpack-plugin
웹팩 설정
// webpack.config.ts
import ESLintPlugin from 'eslint-webpack-plugin'
// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin')
// JS
plugins: [
new ESLintPlugin(),
]
// TS
plugins: [
new ESLintPlugin({
extensions: ['ts', 'tsx'],
}),
]
eslint-webpack-plugin을 설치해주고 웹팩 설정 플러그인에 새롭게 추가해주면 된다. 타입스크립트의 경우 확장자를 추가해주면 개발 서버나 빌드 시 오류를 잘 보여준다.
오류가 이렇게나 반가웠던 적은 처음이다 :)
