javascript

[ESLint / Prettier] ๋ ˆํผ๋Ÿฐ์Šค ๋ชจ์•„๋ณด๊ธฐ

synun 2022. 12. 10. 22:23

๐Ÿ”ฎ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 ์ƒ์„ธ ์„ค์ • ๊ฐ€์ด๋“œ

Engineering Blog by Dale Seo

www.daleseo.com

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

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

eslint.org

airbnb

๊ฐ€์žฅ ์œ ๋ช…ํ•œ ๋ฆฐํŠธ ์„ค์ •์ธ airbnb.

 

GitHub - airbnb/javascript: JavaScript Style Guide

JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub.

github.com

 

 

eslint-config-airbnb

Airbnb's ESLint config, following our styleguide. Latest version: 19.0.4, last published: a year ago. Start using eslint-config-airbnb in your project by running `npm i eslint-config-airbnb`. There are 4419 other projects in the npm registry using eslint-c

www.npmjs.com

eslint-plugin-import

 

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

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

github.com

eslint-plugin-react

 

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

React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.

github.com

eslint-plugin-jsx-a11y

 

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

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

github.com

 

๐Ÿ“œPrettier document

prettier option ๋ฌธ์„œ

 

Prettier ยท Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

.prettierrc์— ์ž…๋ ฅํ•˜๊ฒŒ ๋  ์˜ต์…˜๋“ค์— ๋Œ€ํ•œ ์ •๋ณด๋Š” prettier ๊ณต์‹๋ฌธ์„œ์— ์ „๋ถ€ ๋‚˜์™€ ์žˆ์Šต๋‹ˆ๋‹ค.

 

eslint-plugin-prettier

Prettier์˜ ๊ทœ์น™์„ eslint์— ์ ์šฉ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•ด์ฃผ๋Š” plugin์ž…๋‹ˆ๋‹ค.

 

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

ESLint plugin for Prettier formatting. Contribute to prettier/eslint-plugin-prettier development by creating an account on GitHub.

github.com

eslint-config-prettier

prettier ์˜ ์„ค์ • ์ค‘ eslint ์˜ ์„ค์ •๊ณผ ์ถฉ๋Œ์ด ๋‚˜๋Š” ์„ค์ •๋“ค์„ ๋น„ํ™œ์„ฑํ™” ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

 

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

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

github.com

 

โ–ถReference

๋”๋ณด๊ธฐ
 

eslint --init ์œผ๋กœ ์‰ฝ๊ฒŒ eslint ์„ธํŒ…ํ•˜๊ธฐ

์ด์ „์— react eslint ๊ด€๋ จํ•ด์„œ ์—ฌ๋Ÿฌ ๊ธ€์„ ์ž‘์„ฑํ–ˆ๋‹ค (๋‹ค ์—„์ฒญ๋‚œ ์‚ฝ์งˆ์ด์—ˆ๋‹คโ€ฆ) terminal1npx eslint --init ์œ„ ๋ช…๋ น์œผ๋กœ ํ•œ ๋ฒˆ์— ํ•ด๊ฒฐ ๋ฐฉํ–ฅํ‚ค๋กœ ์„ ํƒ ์„ ํƒ ๋„˜์–ด๊ฐ€๋ฉด, ์•Œ์•„์„œ ํ™˜๊ฒฝ์„ ์„ธํŒ…ํ•ด์ค€๋‹ค CRA์™€ eslint โ€“in

chinsun9.github.io

 

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์— ESLint ์™€ Prettier ๋ผ์–น๊ธฐ

ESLint ์™€ Prettier ๋ฅผ ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ ์ œ๋Œ€๋กœ ์ ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๊น”-๋”-ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•ด๋ณด๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›Œ๋ด…์‹œ๋‹ค.

velog.io

 

 

Eslint & Prettier ์„ค์ • ๋ฐฉ๋ฒ• (feat. VS Code)

settings.json ์„ค์ • ๋ฐฉ๋ฒ•์ด ๋ณ€๊ฒฝ ๋˜์–ด์„œ ์ˆ˜์ • ํ•„์š” eslint-config-prettier ๋Š” eslint๊ฐ€ Prettier๊ณผ์˜ ์ถฉ๋Œ ๋˜๋Š” ๋ถ€๋ถ„์„ ๋น„ํ™œ์„ฑํ™”ํ•ด์ฃผ๋Š” config์ด๋‹ค. .eslintrc.json eslint-plugin-prettier๋Š” Prett

velog.io