230106 항해99 61일차 ESLint

Lint? ESLint?

• 린트(lint)는 소스 코드에 문제가 있는지 탐색하는 작업을 의미한다.
• 린터(linter)는 이 작업을 도와주는 소프트웨어 도구이다.
• 자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에, 이 린트 작업을 통해 사전에 에러를 최대한 잡아주는 것이 중요하다.

---

ESLint 설치 및 기본 설정

1. 먼저 실습을 원하는 경로에서 빈 NPM 프로젝트를 하나 생성하고 eslint라는 패키지를 개발 의존성으로 설치한다.

$ npm init -y
$ npm i -D eslint

2. 설치가 끝나면 eslint 실행 파일이 node_modules 디렉터리 안에 생성된다. ESLint 설정 파일을 자동으로 작성하기 위해서 터미널에서 다음 커맨드를 실행한다.
   그러면 ESLint 설정 파일을 만들기 위해서 여러가지 질문들을 나올 것인데, 본인의 프로젝트의 상황에 맞게 답변을 하면 된다.

$ node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Node
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /temp/learn-eslint

3. 다음과 비슷한 ESLint 설정 파일이 프로젝트 최상위 경로에 생성된다.

// .eslintrc.js
module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: "eslint:recommended",
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  rules: {},
};

• 위의 설정 파일에서 가장 많이 건드리게 될 부분은 extends와 rules 다.
• extends 옵션은 다른 ESLint 설정을 확장해서 사용할 때 사용한다. 여기서는 ESLint에서 추천하는 규칙들이 적용된 eslint:recommended라는 설정이 사용됐다. 실제 프로젝트에서는 ESLint 기본 설정보다는 airbnb와 prettier의 설정을 많이 확장해서 사용하는 것 같다.
• rules 옵션은 본인의 프로젝트에서 자체적으로 덮어쓰고 싶은 규칙들을 정의할 때 사용한다.

---

자동화

• 자동화하는 방법은 여러가지가 있는데, VS Code를 사용하고 있다면 eslint extension을 설치해 설정해주면 된다.

참조:
[자바스크립트] ESLint로 소스 코드의 문제 찾기