[React] ESLint를 React 프로젝트에 적용하기(Feat. Webpack, Vite, VSCode)
1. ESLint는 무엇인가?
ESLint는 React 프로젝트에서 사용하는 대표적인 Linting 도구에요. 여기서 Linting이란, 작성한 코드의 잠재적인 오류나 비효율성을 탐지해주는 것을 말해요. eslint.config.js와 같은 파일에 설정해 놓은 규칙에 따라서 어떤 코드에 무슨 문제가 있는지 알려줘요.
// App.jsx
function App() {
const [count, setCount] = useState(0);
function test() {
console.log("hello");
}
return <div>count is {count}</div>;
}
$ eslint
/.../src/App.jsx
9:12 error 'test' is defined but never used no-unused-vars
10:5 warning Unexpected console statement no-console
✖ 2 problems (1 error, 1 warning)
위의 코드에서 미리 설정해 놓은 no-unused-vars, no-console 규칙에 위배되는 코드를 보여주고 있어요. 이런 방식으로 Linting 도구는 소스 코드에서 잘못된 혹은 불필요한 코드를 쉽게 발견하여 코드의 품질을 개선하는 역할을 해요. 그리고 가장 대표적인 도구가 바로 ESLint에요.
이와 관련하여 비슷한 목적을 달성하기 위해 Prettier와 같은 Formatting 도구를 사용하기도 해요. 두 도구의 목적은 코드의 품질을 개선하고 유지 보수를 용이하게 한다는 공통점을 가지고 있어요. 반면에 Formatting 도구는 들여쓰기, 괄호 배치 등 코드 외형적 스타일을 일정하게 유지하는 역할을 하고 Linting 도구는 문법적인 오류나 비효율적인 코드를 탐지하는 역할을 한다는 점에서 차이점이 있어요.
2. CLI 환경에서 실행하기
먼저, CLI 환경에서 어떻게 실행할 수 있을지 알아볼게요. 먼저 npm을 통해 ESLint와 실행에 필요한 패키지들을 설치해요. 그리고 config 파일도 빼먹지 않고 생성해주세요.
# ESLint 패키지를 설치해요.
npm install -D eslint
# ES6 또는 ESModules 문법을 사용한다면 설치해요.
npm install -D @babel/eslint-parser
# React JSX 문법을 자바스크립트로 바꾸기 위해 설치해요.
npm install -D @babel/preset-react
# React에서 자주 사용하는 ESLint 규칙 모음을 추가하기 위해 설치해요.
npm install -D eslint-plugin-react
touch eslint.config.js
ESLint v8 이전까지는 .eslintrc.* 확장자 이름으로 config 파일을 작성하였어요. v8 이후에는 eslint.config.js 확장자를 도입하게 되었어요. 서로 다른 확장자마다 config 문법이 조금씩 차이가 있기 때문에 이에 주의하여 작성해야 해요.
이전에 사용하던 .eslintrc.* 확장자는 정적 구성을 기본으로 하고, 프로젝트 내에 디렉토리마다 적용할 수 있었어요. 상위 디렉토리의 설정을 하위 디렉토리가 덮어 쓰는 방법으로 디렉토리 구조에 따라 적용하는 방법으로 사용했어요.
반면에 eslint.config.js 확장자를 도입함에 따라 조건문, 함수, 변수를 이용하여 동적으로 조정이 가능하게 되었어요. 예전처럼 여러 config 파일을 만들지 않아도, 하나의 파일에서 조정이 가능하여 편하게 사용할 수 있게 되었어요.
간단하게 eslint.config.js 내부가 어떻게 생겼는지 훑어볼게요. node.js 환경에서 실행해서 CommonJS 문법을 따르고 있어요.
// eslint.config.js
const babelParser = require("@babel/eslint-parser");
const reactPlugin = require("eslint-plugin-react");
module.exports = [
{
// Linting 대상 파일을 적어줘요.
files: ["**/*.{js,jsx}"],
languageOptions: {
// ESLint 기본 parser는 ES5 기준이기 때문에, ES6 또는 ESModule 문법을 사용하기 위해서는 @babel/eslint-parser 패키지를 다운로드 해야 해요.
parser: babelParser,
parserOptions: {
sourceType: "module", // 소스 코드에서 ESModule을 사용하고 있다고 알려줘요.
requireConfigFile: false, // 별도의 babel 설정 파일을 사용하지 않겠다는 설정이에요.
ecmaFeatures: {
jsx: true, // JSX 문법을 해석할 수 있게 하는 설정이에요.
},
ecmaVersion: 2015, // 해석할 ES 버전을 명시해요.
babelOptions: {
// ESLint도 JSX를 해석하지 못하기 때문에 @babel/preset-react 설치를 통한 트랜스파일링이 필요해요.
presets: ["@babel/preset-react"],
},
},
},
// 여러가지 플러그인을 통해 설정을 편하게 관리할 수 있어요.
plugins: {
react: reactPlugin, // React에서 자주 사용되는 규칙 모음을 추가해요.
},
// 구체적으로 규칙을 추가하거나 수정할 수 있어요.
rules: {
"no-undef": "off", // 정의되지 않은 변수에 대한 경고를 발생시키지 않도록 설정해요.
"no-console": "warn", // console.log를 호출하는 코드에 대해 경고를 발생시키도록 설정해요.
"no-unused-vars": "error", // 사용하지 않은 변수가 있다면 오류를 발생시키도록 설정해요.
},
settings: {
react: {
version: "detect", // 사용 중인 React 버전을 자동으로 감지하도록 설정해요.
},
},
},
];
위와 같이 Linting 대상이 될 파일의 특성에 따라 필요한 패키지를 다운로드하고, 설정에 추가를 해요.
파일을 작성하였다면 아래와 같은 명령어를 입력하면 터미널에 Linting 결과가 표시돼요. 나온 결과를 바탕으로 소스 코드를 수정하면 돼요.
# --config 옵션으로 config 파일이 위치한 경로를 지정할 수 있어요.
$ eslint --config=eslint.config.js
/.../src/App.jsx
9:12 error 'test' is defined but never used no-unused-vars
10:5 warning Unexpected console statement no-console
✖ 2 problems (1 error, 1 warning)
3. Webpack 환경에서 자동 실행하기
프로젝트를 진행하면서 CLI 환경에서 매번 명령어를 입력해서 소스 코드에 어떤 문제가 있는지를 확인하는 방법은 매우 비효율적일 것 같아요. 하지만 개발 단계에서 우리에게는 개발 서버라는 유용한 도구를 가지고 있어요. 개발 서버를 활용하여 소스 코드를 수정할 때 ESLint도 함께 실행되게 하는 방법을 알아보려고 해요.
webpack-dev-server 패키지를 이용하여 개발 서버를 실행하는 경우에 적용하는 방법이에요.
먼저 ESLint를 Webpack 환경에서 실행하게 해주는 eslint-webpack-plugin 패키지를 설치해요.
npm install -D eslint-webpack-plugin
그 다음 webpack.config.js 파일의 plugins 항목에 아래와 같이 추가해요.
// webpack.config.js
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = {
// ...
plugins: [
new ESLintPlugin({
emitWarning: true, // 브라우저에 ESLint 결과를 표시할지를 결정해요.
// 대상 파일 확장자를 지정해요.
// eslint.config.js에서 설정하더라도 여기서 설정을 해야 해요.
extensions: ["js", "jsx"],
exclude: "node_modules", // 제외할 디렉토리를 지정해요.
}),
],
};
npx webpack serve --config=webpack.config.js
위처럼 webpack-dev-server를 실행하고 소스 코드를 수정할 때마다 터미널에는 다음과 같이 표시가 돼요.
또한 emitWarning을 true로 설정하면 다음과 같이 브라우저에서도 표시를 할 수 있어요.
webpack-dev-server 뿐만 아니라 webpack 명령어를 이용하여 빌드를 할 때에도 적용이 돼요.
4. Vite 환경에서 자동 실행하기
이번에는 Vite를 이용하여 개발 서버를 실행하는 경우에 적용하는 방법이에요.
먼저 Vite 환경에서 ESLint를 실행하게 해주는 vite-plugin-checker 패키지를 설치해요.
npm install -D vite-plugin-checker
vite.config.js 파일에서 plugins 아래에 다음처럼 추가해주세요.
import checker from "vite-plugin-checker";
export default defineConfig({
// ...
plugins: [
// ...
checker({
eslint: {
// Linting을 진행할 파일과 형식을 a선택해요.
lintCommand: "eslint ./src/**/*.{js,jsx} --config=eslint.config.js",
// 터미널과 브라우저에 표시할 레벨을 결정해요.
dev: {
logLevel: ["warning", "error"],
},
},
}),
],
});
터미널과 브라우저에서 다음과 같이 확인할 수 있어요.
5. VSCode에서 실행하기
VSCode를 사용하고 있다면 Extension을 통해 에디터에 Linting 결과를 보여주는 방법을 적용할 수 있어요.
터미널이나 브라우저를 확인하지 않고도, 코드를 작성하면서 Linting 결과를 바로 확인할 수 있어 더 빠르게 확인할 수 있어요. 개인적으로는 위의 방법보다 더 효과가 좋은 방법이라고 생각해요.
eslint 패키지와 config 파일이 있다면 사용할 수 있어요.
VSCode Extension 탭에서 ESLint를 검색하여 설치하면 사용할 수 있어요.
혹시 ESLint가 VSCode에 잘 적용이 되지 않는 분들은 아래처럼 Extension을 재시작해보시면 좋을 것 같아요.
이상으로 ESLint를 개발 환경에서 프로젝트에 적용하는 방법을 알아봤어요.
Leave a comment