ESlint

ESlint란?

코드의 가독성을 높이고 오류와 버그를 제거하기 위해 생긴 도구이다.
ECMAScript 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린트 도구이다. 코드에 스타일과 규칙을 적용해서 문제를 사전에 발견하고 패턴을 적용시킬 수 있다. 에어비앤비처럼 미리 스타일과 규칙이 정해진 룰을 적용할 수 있다.

ESlint 사용 이유

다양한 플러그인을 사용할 수 있다. 새로운 규칙을 추가하거나 커스텀할 수 있다.
뛰어난 확장성을 가지고 있다.

코드에서는 포맷팅과 코드 품질을 검사한다.

• 포맷팅은 일관된 코드 스타일을 유지하게 한다.
  들여쓱기, 코드라인 최대 너비 규칙 등 개발자가 읽기 쉬운 코드로 만들어 준다.
• 코드 품질은 잠재적인 오류나 버그를 예방한다.
  사용하지 않는 변수나 글로벌 스코프를 함부로 다루지 않는 등이 오류 발생을 줄여준다.

// .eslintrc.js
module.exports = {
  rules: {
    "no-extra-semi": "error",
  },
}

정해진 코드 규칙을 만들어서 사용할 수 있다.

npx eslint app.js

ESLint로 검사하면 규칙에 어긋나는 코드가 있으면 오류를 발생한다.

설치방법

• 설치

npm i -D eslint

• 환경설정 파일을 프로젝트 최상단에 생성

// .eslintrc.js
module.exports = {}

• 검사

npx eslint app.js

Prettier

Prettier 란?

Visual Studio Code Extention으로 정해진 규칙을 바탕으로 코드를 정리하는 도구이다.

Prettier는 코드를 예쁘게 만들어준다. ESLint의 특징 중에 포맷팅과 겹친다. Prettier는 더 일관적으로 코드를 고치는 것이 특징이다. 코드 품질 같은 역할은 하지 않는다.

Prettier 사용이유

자동으로 정렬해서 가독성을 높일 수 있고 코드 스타일을 통일할 수 있다.
Prettier는 미리 규칙이 세팅되어 있다. ESLint 같이 규칙을 추가하지 않아도 사용할 수 있다.
또한, ESLint는 수정 사항만 알려준다. 수정은 개발자가 직접해야한다.
하지만 Prettier는 직접 수정도 해준다.

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

이렇게 긴 코드를 Prettier는 다음과 같이 수정한다.

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
)

코드의 문맥을 파익하고 상황에 따라 최적화된 코드로 수정해준다.

설치방법

• 설치

npm i -D prettier

• 코드 검사

npx prettier app.js --write

ESLint + Prettier

ESLint의 코드 품질과 Prettier의 포맷팅을 같이 사용할 수 있다.
즉, ESLint는 자바스크립트의 문법을 담당하고 Prettier는 코드스타일을 담당한다.

eslint-config-prettier

• 설치

npm i -D eslint-config-prettier

eslint-config-prettier는 중복된느 ESLint 규칙을 비활성화한다.

// .eslintrc.js
{
  extends: [
    "eslint:recommended",
    "eslint-config-prettier"
  ]
}

• 검사

npx prettier app.js --write && npx eslint app.js --fix

eslint-plugin-prettier

• 설치

npm i -D eslint-plugin-prettier

Prettier 규칙을 ESLint 규칙에 추가한다. 따라서 ESLint만 실행한다.

// .eslintrc.js
{
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

• 검사

npx eslint app.js --fix

참조

프론트엔드 개발환경의 이해: 린트
Prettier 란 ? , Prettier 설치
ESlint 란 ? , ESlint 설치