[ESLint / Prettier] 레퍼런스 모아보기

🔮ESLint + Prettier시작하기

// npm환경이 존재하는 cra같은 경우에는 사용할 필요 없음
$ npm init -y

// eslint 설치
$ npm install eslint prettier --save-dev
// or
$ yarn add -D eslint prettier

// eslint 시작 설정
$ npx eslint --init
//or
$ yarn eslint --init

 

eslint --init을 해주면 질문이 여러가지가 나오는데

세팅하려는 환경에 맞춰서 답변하면 그에 맞게 세팅하게 된다.

$ yarn eslint --init
yarn run v1.22.10
$ /home/identity/hanghae99/redux-toolkit-tutorial/node_modules/.bin/eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-react@latest, eslint@latest

 

vscode extension

링크 : https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

출처 : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

ESLint config 옵션 살펴보기

ESLint 상세 설정 가이드

airbnb 코드 스타일 적용하기

airbnb 코드 스타일을 적용하려면 airbnb에서 사용하는 eslint-plugin이 설치되어 있어야 합니다.

다음 명령어로 필요한 패키지와 버전들을 확인할 수 있습니다.

$ npm info "eslint-config-airbnb@latest" peerDependencies
{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

설치되어 있지 않다면 다음 명령어로 필요한 패키지들을 한번에 설치할 수 있습니다.

$ npx install-peerdeps --dev eslint-config-airbnb

 

eslint-config-airbnb와 eslint-config-airbnb-base의 차이점

eslint-config-airbnb의 규칙에는 react 규칙이 있으며, eslint-config-airbnb-base규칙에는 react 규칙이 존재하지 않다는 차이점이 있습니다. react 규칙이 필요없다면 eslint-config-airbnb-base를 이용하면 됩니다.

📜ESLint document

인터넷에 돌아다니고 많이들 쓰는 eslint 템플릿을 쓸때 쓰더라도 뭐가 뭔지는 알고 써야하는데

eslint 규칙들이 너무 파편화되어 있어서 찾기가 너무 힘듭니다.

게다가 옛날에 만들어진 템플릿이라면 deprecated rule이 존재할 수도 있습니다.

 

plugin도 너무 많고 규칙들도 너무 많아서 레퍼런스를 한번 정리해보았습니다.

규칙들은 readme파일이나 공식문서에 나와있으니 plugin에 맞게 규칙을 찾아보는 게 좋습니다.

ESLint 공식문서

eslint rule에 대해서 나와있는 eslint 공식문서

Rules - ESLint - Pluggable JavaScript Linter

airbnb

가장 유명한 린트 설정인 airbnb.

GitHub - airbnb/javascript: JavaScript Style Guide

 

eslint-config-airbnb

eslint-plugin-import

GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.

eslint-plugin-react

GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint

eslint-plugin-jsx-a11y

GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.

 

📜Prettier document

prettier option 문서

Prettier · Opinionated Code Formatter

.prettierrc에 입력하게 될 옵션들에 대한 정보는 prettier 공식문서에 전부 나와 있습니다.

 

eslint-plugin-prettier

Prettier의 규칙을 eslint에 적용시킬 수 있게끔 해주는 plugin입니다.

GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting

eslint-config-prettier

prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화 해주는 라이브러리입니다.

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

 

▶Reference

eslint --init 으로 쉽게 eslint 세팅하기

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

 

Eslint & Prettier 설정 방법 (feat. VS Code)