ES-Lint와 Prettier를 활용한 코드 포매팅

Lint

: 소스 코드에 문제가 있는지 탐색하는 작업

: 자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우 런타임 에러가 발생할 수 있기 때문에 린트 작업을 통해 사전에 에러를 최대한 잡아줘야한다

: 예전에는 JSLint나 JSHint와 같은 린터들을 많이 사용했었으나 최근에는 ESLint를 많이 사용

 

 

 

 

ESLint 설치 및 세팅

- 설치 및 세팅

// npm 프로젝트 초기화
npm init -y

// esLint를 개발 의존성으로 설치
npm i -D 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

 

- .eslintrc.js

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

: ESLint 설정 파일 (프로젝트 최상위 경로에 생성됨)

: extends (다른 ESLint 설정을 확장해서 사용할 때 수정 / 주로 airbnb나 prettier를 사용)

: rules (본인 프로젝트에 덮어쓰고 싶은 규칙 정의 / https://eslint.org/docs/latest/rules/ 참조)

 

 

 

 

 

 

ESLint를 터미널에서 사용

- index.js

var foo = bar;

 

- ESLint 실행

$ node_modules/.bin/eslint index.js

/temp/learn-eslint/index.js
  1:5   error  'foo' is assigned a value but never used  no-unused-vars
  1:11  error  'bar' is not defined                      no-undef
  1:15  error  Unnecessary semicolon                     no-extra-semi

✖ 3 problems (3 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

: ESLint 실행 시 --fix 옵션을 사용하면 코드까지 교정

 

 

 

 

 

ESLint를 프로젝트 단계에서 사용

- package.json

  "scripts": {
    "lint": "eslint ."
  },

 

- .eslintignore

node_modules

: ESLint에서 검사를 수행하지 않을 파일이나 디렉터리 목록 파일 (생성해야함)

 

 

 

 

ESLint 강제화

- husky 설치

// yarn을 사용하는 경우
yarn add --dev husky

// npm을 사용하는 경우
npm install --dev huskey

 

: husky (git 커맨드 실행 시 특정 스크립트를 실행시켜주는 도구)

 

- husky 초기화

npx husky install

 

- hook 설정

npx husky add .husky/pre-commit "yarn lint"

: git에 commit 하기전에 실행할 명령어를 추가 (아래 파일이 추가됨)

 

- package.json에 스크립트 추가

  "scripts": {
    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
  },

 

 

 

 

 

코드 포맷터

: 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 자동으로 변환해주는 도구

 

- Prettier

: 자바스크립트에서 가장 많이 사용하는 코드 포맷터

: 기존 포맷터와 달리 디폴트로 정해놓은 코딩 스타일에서 벗어나지 않을 수 있음

 

 

 

 

 

Prettier 설치 및 세팅

// 개발 의존성으로 설치
npm i -D prettier

 

- Prettier 터미널에서 실행

npx prettier "파일명.js"

: --write 옵션을 실행하면 해당 파일의 내용이 포맷팅된 코드로 대체됨

 

- .prettierignore

node_modules/
package-lock.json

: Prettier에서 포맷팅 하지 않을 파일이나 디렉터리 지정

 

 

 

 

 

ESLint와 Prettier 통합 및 사용

// ESLint와 통합하기 위해 필요한 패키지를 개발 의존적으로 설치
npm i -D eslint-config-prettier eslint-plugin-prettier

 

- .eslintrc.js 설정 추가

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

: 기존에 다른 옵션이 있던 경우, 배열 뒤나 앞에 추가 (앞일 수록 해당 설정의 우선순위가 높아짐)

 

 

 

 

 

터미널 명령 없이 IDE에서 사용하기

- VSCode

Prettier - Code formatter - Visual Studio Marketplace

: Ctrl + Shift + f를 누르면 현재 보고있는 파일에 대해 prettier가 포맷팅을 수행해줌

 

- Atom

Sunsetting Atom

 

- Sublime Text

JsPrettier - Packages - Package Control

 

 

 

 

 

 

Reference

ESLint로 소스 코드에 숨어있는 문제 찾기

코드 포맷팅은 그냥 Prettier에게 맡기세요

[husky] husky version 8 설치하기

husky: git hook을 통한 테스트 및 린트 자동화