1. ESLint, Prettier / 설치 및 사용 / 차이점 / 더 잘쓰기 (충돌방지, 쉽게 쓰기)

ESLint

Lint, Linter

ESLint 를 알아보기 전에 Linter 에 대해 알아보자. Lint 는 보풀 이라는 뜻이다. 즉 Linter 의 의미는 보풀 (뭔가 지저분한, 뭔가 잘못된) 을 찾아주는 의미인 듯 하다. 옷의 보풀은 입어보지 않고도 알 수 있는데, 이는 실행시키지 않아도 코드를 보고 문법의 오류나 안티패턴을 찾아낸다는 의미의 정적분석과도 일맥상통하는 듯 하다.

 

Linter 에는 JSLint, JSHint, ESlint, JSCS 등이 있지만, ESLint 가 커스텀이 좋아서 가장 대중적으로 사용한다고 한다. (ESLint, JSLint 외에는 처음들어봤다)

 

ESLint

니콜라스 C. 자카스에 의해 개발되었으며, ECMAScript 와 실험적인 문법들을 지원한다고 한다. TypeScript 는 별도로 typescript-eslint 를 설치하고 ESLint 의 plugin 으로 사용하면 된다고 한다. https://typescript-eslint.io/getting-started

 

과거에는 TSLint 와 ESLint 를 모두 사용하였는데, TSLint 가 ESLint 에 통합되어 typescript-eslint 를 ESLint 에서 plugin 으로 사용하는 듯 하다. https://github.com/palantir/tslint/issues/4534

 

ESLint 설치 및 사용

설치

# global
npm i -g eslint 

# project 파일 내에서만
npm i -D eslint 

global 로 설치하면 eslint 커맨드를 쉽게 사용할 수 있다는 점이 있다. 다만 나는 별도의 명령어 입력 없이 저장 및 커밋 시 알아서 검사하게 할 것이므로, npm i -D 로 다운받았다.

 

초기화 (.eslintrc.json 파일 생성)

# global
eslint --init

# project 파일 내에서만
./node_modules/eslint/bin/eslint.js --init

 

혹은 package.json 내에 eslintConfig 속성을 통해 설정을 할 수 있다고도 한다. 또한 일부 파일, 폴더들에서 ESLint 를 무시하려면 `.eslintignore` 파일을 만들어서 관리하면 된다고 한다.

검사 및 수정

# global
eslint test.js # only 검사
eslint test.js --fix # 수정도

# project 파일 내에서만
./node_modules/eslint/bin/eslint.js test.js # only 검사
./node_modules/eslint/bin/eslint.js test.js --fix # 수정도

 

Prettier

Prettier 는 말 그대로, (코드를) 예쁘게 만들어주는 것 이다. 여기서 예쁜 코드란 규칙을 잘 지킨 코드 를 말한다. 즉 코드가 규칙에 따라 잘 써졌는지 체크하는 것이다. Prettier 는 Code formatter 의 일종이다. Prettier 라는 이름은 참 잘 지은 것 같다.

 

예를들어 indent 가 2인지, 4인지, 그리고 세미콜론 ; 을 쓸건지 안쓸건지, 한 줄에 코드를 몇자까지 쓸 건지 등의 규칙을 만들 수 있다. 규칙은 https://prettier.io/docs/en/options.html 여기에서도 볼 수 있다.

 

Prettier 설치 및 사용

설치

왜인지 공식문서에서는 프로젝트 내에서만 사용할 수 있도록 설치하는 방법만 안내해줘서, 그렇게 설치하기로 했다. 어차피 나중에 Intellij 에서 알아서 적용하도록 할거라 큰 불편함은 없다. https://prettier.io/docs/en/install.html

# npm
npm install --save-dev --save-exact prettier

# yarn
yarn add --dev --exact prettier

 

참고로 --save-exact 란 SemVer 의 연산자(^, ~ 같은)를 사용하는 대신 정확한 버전으로 설치하는 거라고 한다. 그래서 package.json 에 가보면 prettier 만 이렇게 되어있다.

"devDependencies": {
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "2.8.8"
}

 

설정 파일

.prettierrc.json 을 만든다.

 

이건 예시 설정파일 이다. 마찬가지로 (아래 참고자료에 있는) 여기 블로그 https://soojae.tistory.com/39 에서 가져왔다. 차이점이라 하면 jsxBracketSameLine 이 deprecated 되어서, bracketSameLine 으로 수정하였다. https://github.com/SquareFactory/prettier-config/issues/1

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "bracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false
}

 

추가 옵션들은 https://prettier.io/docs/en/options.html 여기에 더 있다.

 

적용하기

아까 global 로 설치하지 않았으므로 node_modules 로 들어가서 실행해야 한다.

./node_modules/prettier/bin-prettier.js test.js --write

 

이렇게 하면 정신없는 코드가 이렇게 깔끔해진다.

//////// Before
const abc 
    = 
    0

console.log(
    abc
);



//////// After
const abc = 0;

console.log(abc);

 

ESLint 와 Prettier 더 잘쓰기

충돌 방지

eslint-config-prettier 플러그인을 사용하면, ESLint 와 Prettier 가 충돌하는 옵션을 꺼준다.

npm i -D eslint-config-prettier

 

.eslintrc.json 에 extends 속성에 prettier 를 추가해준다.

"extends": [
	"prettier"
]

 

ESLint + Prettier 한번에 사용하기

별다른 라이브러리 설치 및 설정 없이 IDE 의 도움을 받고 싶다면 요기 참고하기 (추천)

 

eslint-plugin-prettier 플러그인을 사용하면, eslint --fix 만 해주어도 prettier --write 를 알아서 해준다. 단 나의 경우에는 eslint 가 전역이 아니라 package 내에만 설치되어있어야만 인식이 되었다. 

npm i -D eslint-plugin-prettier

 

.eslintrc.json 에 plugins 와 rules 에 이렇게 추가해준다.

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

 

합쳐보면 이렇게 추가해주면 된다.

"extends": [
        "prettier"
],
"plugins": [
        "prettier"
],
"rules": {
        "prettier/prettier": "error"
}

 

TypeScript 사용 시

.eslintrc.json 파일에 parserOptions안에"project": ["./tsconfig.json"] 추가

"parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": ["./tsconfig.json"]
}

 

ESLint 와 Prettier 의 차이점

ESLint 와 Prettier 의 차이점은 오류를 잡는지 여부인데, 예를들어 이렇게 abc 라는 변수를 여러번 선언했다면, ESLint 가 에러메시지를 띄워준다. (에러메시지를 띄우는건 별도의 설정을 했기 때문에 뜨는 것이다, 설정은 다음 글에서...)

 

참고자료

• ESLint, Prettier 사용법과 차이점 👍🏻👍🏻👍🏻 https://soojae.tistory.com/39
• Intellij 에서 Prettier 를 save 시 알아서 적용되도록 하는방법 👍🏻👍🏻👍🏻 https://minjung-jeon.github.io/eslint-prettier-intellij/
• TypeScript 사용 시 https://velog.io/@parkinhwa/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0-%ED%86%A0%EC%9D%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0
• ESLint https://ko.wikipedia.org/wiki/ESLint
• TSLint -> ESLint https://github.com/palantir/tslint/issues/4534
• https://pravusid.kr/typescript/2020/07/19/typescript-eslint-prettier.html typescript-eslint 적용 방법
• Linter 의 종류 https://egas.tistory.com/104