Webpack + ESLint로 프로젝트 코드 스타일 보호

소개

"만나서 반갑습니다. Zeals에서 프런트 엔드 엔지니어로 일하는 왕입니다.
팀의 프로젝트 개발에서는, 평상시 신기능의 개발보다 코드의 메인터넌스에 소비되는 시간의 비율은 크다. 따라서 팀의 코드 스타일을 준수하는 코드를 작성하는 것이 중요하며, 이는 기본적인 오류와 버그를 피할 수 있을 뿐만 아니라 코드의 가독성을 보장합니다.
코드 버전 관리 시스템(SVN, GIT 등)의 경우 코드 일관성이 없는 코드는 문제를 일으킬 수 있습니다. 일관된 코드의 경우 버전 관리 시스템은 다른 코드 스타일로 인해 diff로 표시되어 코드를 확인할 수 없습니다.
　 이번에는 ESLint와 결합한 Webpack을 사용하여 코드 기반 JavaScript의 코드 스타일을 확인하는 방법을 간략하게 소개합니다.

ESlint 설정

1.ESlint 설치

프로젝트에서 ESLint를 사용하려면 먼저 npm install -D eslint 명령을 사용하여 CLI 도구를 설치합니다.
'airbnb', 'google', 'standard' 등의 코드 스타일 규칙을 사용하려면 아래 명령으로 설치할 수 있습니다.
　airbnb: npm install --save-dev eslint-config-airbnb google: npm install --save-dev eslint-config-google 표준: npm install --save-dev eslint-config-standard다음으로 ESLint 구성 파일을 만들어야합니다. npx eslint --init 명령을 사용하여 .eslintrc.json 파일을 만듭니다. 이 시점에서 터미널에서 몇 가지 질문에 대답하고 마지막으로 코드 스타일을 선택해야하지만 이러한 질문은 실제 상황에 따라 대답합니다.

2.ESlint 설정

ESLint를 설치한 후 생성된 .eslintrc.json 파일을 설정해야 합니다. 기존 규칙('airbnb', 'google', 'standard' 등)이 설치되면 .eslintrc.json 구성 파일의 extends 속성도 변경해야 합니다.

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended", 
        "airbnb"  // airbnbのコードスタイルのルールをインストールした
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
    ],
    "rules": {
    }
}

그런 다음 팀의 필요에 따라 .eslintrc.json 구성 파일에서 rules 속성 규칙을 만듭니다.
(모든 ESLint 규칙은 rules 페이지에서 읽을 수 있습니다.)

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
    ],
    "rules": { // `rules`プロパティのルールを作成する
        "no-console": 2,
        "no-debugger": 2,
        "no-alert": 2,
        "no-unused-vars": 2,
        "no-undef": 2, 
        "no-dupe-args": 2,
        "no-duplicate-case": 2,
        "no-unreachable": 2,
        ...
    }
}

"참고: rules 위반은 멈출 수 없는 경우 ESLint 주석을 사용하여 오류를 제거할 수 있습니다."

// eslint-disable-next-line
alert('alertを使わなければならない'); // eslint-disable-line
console.log('console.logを使わなければならない'); // eslint-disable-line

ESLint 설정은 이것으로 끝납니다.

ESLint와 Webpack의 조합

먼저 아래 주석에서 eslint-loader 및 eslint-formatter-friendly 라이브러리를 설치합니다. eslint-formatter-friendly 라이브러리는 터미널에서 오류 로그를 더 쉽게 읽을 수 있습니다.

npm install -D eslint-loader
npm i -D eslint-formatter-friendly

그런 다음 프로젝트의 webpack.config.js의 module.rules 부분에 아래와 같은 코드를 추가합니다.

webpack.config.js

...
module: {
    rules: [
        ...
        {
            test: /\.(js|jsx)$/,
            loader: 'eslint-loader',
            enforce: 'pre', // まずコードスタイルをチェックする、その後、Babelが動ける
            include: [path.resolve(__dirname, 'src')],
            options: {
                formatter: formatter // エラーログのスタイルを設置する
            }
        }
    ]
}

그리고 테스트 용 index.js을 만듭니다.

index.js

import _ from 'lodash';
const a = 1;
const b = 2;
alert(b);
console.log(b);

마지막으로 npx webpack 명령으로 webpack을하면 아래와 같은 화면이 보입니다.

끝에

단지 간단한 소개했습니다만, 문장을 끝까지 읽어 주셔서 감사합니다.
내일은 18일째의 @banetya의 차례입니다.
계속 잘 부탁드립니다.