TIL5: Linting

코드를 분석하여 문제점을 발견해 내고, 안전하고 정돈된 코드를 작성하는 데 도움을 주는 도구를 Lint 또는 Linter라고 합니다. Linting과 관련된 다양한 패키지가 존재하는데 그 중에서 가장 대표적인 것이 ESLint입니다.

• 설치(Local 설치): 프로그램 구동에 영향을 미칠 수 있으므로 원칙적으로 전역(Global) 설치는 추천하지 않습니다.

$ npm install eslint --save-dev

• Configuration 파일 생성: .eslintrc.js 또는 .eslintrc.json와 같은 이름으로 만들 수 있습니다. 생성된 설정 파일을 열어, 추천 설정 eslint:recommended 이 적용되었는지 반드시 확인해 봅니다.

$ npx eslint --init

// .eslintrc.js 파일 예시
module.exports = {
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
      "node": true,
  },
  "rules": {
    // 세부 설정 추가
  },
};

// .eslintrc.json 파일 예시
{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
  }
  "rules": {
    // 세부 설정 추가
  },
}

• Local 실행

$ npx eslint <file name>

• 프로젝트 내 실행: package.json파일의 "scripts"와 관련

// package.json 파일 예시
{
  "scripts": {
    "lint": "eslint **/*.js --quiet",
  },
  "devDependencies": {
    "eslint": "^7.11.0",
  }
}

$ npm run lint

• .eslintignore 파일 생성을 통해 eslint 실행시 대상에서 제외되는 디렉토리나 파일을 지정할 수도 있습니다.

// .eslintignore 파일 예시
.eslint*
**/node_modules
**/*.min.js
test.mocha.js

이외에 다양한 형태의 설정 파일과 수 많은 린팅 옵션 그리고 표현식이 존재하므로 ESLint설정 공식문서를 꼭 참조하기 바랍니다.

자료 출처: ESLint