๊ด€๋ฆฌ ๋ฉ”๋‰ด

๐Ÿ–ฅ dev-ruby

[ESLint, Prettier] React ํ”„๋กœ์ ํŠธ์— ESLint ์™€ Prettier ์ ์šฉํ•˜๊ธฐ | ESLint ์™€ Prettier ์‚ฌ์šฉ๋ฒ•๊ณผ ์ฐจ์ด์  ๋ณธ๋ฌธ

ESLint, Prettier

[ESLint, Prettier] React ํ”„๋กœ์ ํŠธ์— ESLint ์™€ Prettier ์ ์šฉํ•˜๊ธฐ | ESLint ์™€ Prettier ์‚ฌ์šฉ๋ฒ•๊ณผ ์ฐจ์ด์ 

ruby_s 2022. 1. 4. 16:58
728x90
๋ฐ˜์‘ํ˜•
SMALL

ESLint ๋ž€?

Linter์˜ ๊ธฐ๋Šฅ

๋™์  ์–ธ์–ด์ธ Javascript์—์„œ๋Š” ์ฝ”๋“œ ์—๋Ÿฌ๊ฐ€ ์ž์ฃผ ๋ฐœ์ƒํ•œ๋‹ค.
๋™์  ๋ถ„์„(ํ”„๋กœ๊ทธ๋žจ์„ ์ง์ ‘ ์‹คํ–‰ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ๋ถ„์„)์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์‹คํ–‰ํ•ด์„œ ํ™•์ธ์„ ํ•ด๋ด์•ผ ํ•œ๋‹ค.

์ด๋ฅผ ๋„์™€์ฃผ๋Š” ๊ฒƒ์ด Linter์ด๋‹ค. Linter๋Š” ์ฝ”๋“œ๋ฅผ ์ •์ ์œผ๋กœ ๋ถ„์„ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํ”„๋กœ๊ทธ๋žจ์„ ์‹คํ–‰ํ•˜์ง€ ์•Š๊ณ ๋„ ์ฝ”๋”ฉ ์ปจ๋ฒค์…˜์— ์œ„๋ฐฐ๋˜๋Š” ์ฝ”๋“œ๋‚˜ ์•ˆํ‹ฐ ํŒจํ„ด์„ ์ž๋™์œผ๋กœ ๊ฒ€์ถœํ•ด์ค€๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ ํฌ๋งทํŒ… ๊ธฐ๋Šฅ๋„ ์žˆ๋‹ค.

 

์šฐ์„ , VScode์˜ ํ™•์žฅ๋ถ€ํ„ฐ ๊น”์•„์ฃผ์ž !
๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‘ ๊ฐœ๋ฅผ ๊น”์•„์ฃผ์ž

ESLint ์„ค์น˜

$ npm install eslint

์ด์ œ ESLint ํŒจํ‚ค์ง€ ์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ์ดˆ๊ธฐํ™”๋ฅผ ํ•œ๋‹ค.

$ eslint --init

๊ทธ๋Ÿผ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‹จ๊ณ„๋ณ„ ์งˆ๋ฌธ์ด ๋‚˜์˜จ๋‹ค.

// ESLint์˜ ์‚ฌ์šฉ ๋ชฉ์ ์€ ๋ฌด์—‡์ธ๊ฐ€?

? How would you like to use ESLint? … 
To check syntax only
โฏ To check syntax and find problems
To check syntax, find problems, and enforce code style

// ์–ด๋–ค ํƒ€์ž…์˜ ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€?

? What type of modules does your project use? … 
โฏ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

// ์–ด๋–ค ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์‚ฌ์šฉํ•  ๊ฒƒ์ธ๊ฐ€?

? Which framework does your project use? … 
โฏ React
Vue.js
None of these

// ํƒ€์ž… ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€?

? Does your project use TypeScript? › No / Yes

// ์–ด๋–ค ํ™˜๊ฒฝ์—์„œ ์ฝ”๋“œ๊ฐ€ ๋™์ž‘ํ•˜๋Š”๊ฐ€?

? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
โฏ Browser
Node

// ์–ด๋–ค ํฌ๋งท์œผ๋กœ ESLint ์„ค์ •ํŒŒ์ผ์„ ์ƒ์„ฑํ•  ๊ฒƒ์ธ๊ฐ€?

? What format do you want your config file to be in? … 
JavaScript
YAML
โฏ JSON

๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‹ต๋ณ€ํ–ˆ๋‹น

โœ” 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? · Yes
โœ” Where does your code run? · browser
โœ” What format do you want your config file to be in? · JSON
โœ” Would you like to install them now with npm? · Yes

 

๐Ÿคญ ์—ฌ๊ธฐ์„œ, ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์€ command + s(์ €์žฅ)๋ฅผ ๋ˆ„๋ฅผ๋•Œ๋งˆ๋‹ค ESLint ๊ฐ€ fix๋˜๋Š” ๊ฒƒ์ธ๋ฐ, ์ผ์ผ์ด ๋ช…๋ น์–ด๋ฅผ ํ„ฐ๋ฏธ๋„์— ์ˆ˜ํ–‰ํ•ด์•ผ๋งŒ fix๊ฐ€ ๋˜๋Š” ํ˜„์ƒ์ด ์žˆ์—ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด ํ•ด๊ฒฐํ–ˆ๋‹ค !

1. ๊ธฐ๋ณธ์„ค์ • ์—ด๊ธฐ( Command + ,(์ฝค๋งˆ) )
2. ์„ค์ • ์ฐฝ์—์„œ code action on save ๋ผ๊ณ  ์ž…๋ ฅ


3. settings.json์—์„œ ํŽธ์ง‘ ํด๋ฆญ
4. ์•„๋ž˜๊ตฌ๋ฌธ ์ถ”๊ฐ€ ๋˜๋Š” ์ˆ˜์ •

"editor.codeActionsOnSave": {
  "source.fixAll": true,
},
"editor.formatOnSave": false,

๊ทธ๋Ÿผ command + s(์ €์žฅ)๋ฅผ ๋ˆ„๋ฅผ๋•Œ๋งˆ๋‹ค ESLint๊ฐ€ fix๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

 

์ด์ œ ESLint ๊ทœ์น™์„ ์„ค์ •ํ•ด๋ณด์ž.
rootํด๋” ๋ฐ”๋กœ ํ•˜๋‹จ์— .eslintrc.json ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์ž.
์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋ณต๋ถ™ํ•ด์ค€๋‹ค.

// .eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "never"],
        "no-extra-semi": "error",
        "no-tabs": ["error", { "allowIndentationTabs": true }]
    }
}

์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” ๋งจ ๋ฐ‘์˜ rules๋ฅผ ์ˆ˜์ •ํ•˜์—ฌ ๊ทœ์น™์„ ์ถ”๊ฐ€ํ•  ๊ฒƒ์ด๋‹ค.
์•„๋ž˜ ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์—ฌ๋Ÿฌ ๊ทœ์น™๋“ค์„ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค !
https://eslint.org/docs/rules/  

 

List of available rules

โœ“no-unreachabledisallow unreachable code after `return`, `throw`, `continue`, and `break` statements

eslint.org

 

์œ„์˜ ๋ช‡ ๊ฐœ์˜ ์˜ˆ์‹œ๋งŒ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด, ์šฐ์„ , "error" ๋Š” ๊ทœ์น™์— ์–ด๊ธ‹๋‚˜๋Š” ์ฝ”๋“œ๋ฅผ ์—๋Ÿฌ๋กœ ์ทจ๊ธ‰ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.

  • "semi"๋Š” "always"์™€ "never"๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ,
    1. "always"(default) : ๋ช…๋ น๋ฌธ์˜ ๋์œผ๋กœ ์„ธ๋ฏธ์ฝœ๋ก ์„ ๋ฌด์กฐ๊ฑด ๋ถ™์ด๋„๋ก ํ•œ๋‹ค.
    2. "never" : ๋ช…๋ น๋ฌธ์˜ ๋์œผ๋กœ ์„ธ๋ฏธ์ฝœ๋ก ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋œป์ด๋‹ค.
  • "quotes"๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ 3๊ฐ€์ง€ ์˜ต์…˜์ด ์žˆ๋‹ค.
    1. "double"(default) : ํฐ๋”ฐ์˜ดํ‘œ(")๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
    2. "single" : ์ž‘์€ ๋”ฐ์˜ดํ‘œ(')๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
    3. "backtick" : ๋ฐฑํ‹ฑ(`)์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

 

์ด๋Ÿฐ์‹์œผ๋กœ ํ˜‘์—…์— ํ•„์š”ํ•œ ESLint ๊ทœ์น™์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋œ๋‹ค.

์ด์ œ ESLint์™€ ํ•œ ์„ธํŠธ๋กœ ๋ถ™์–ด ๋‹ค๋‹ˆ๋Š” Prettier์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

 


Prettier ๋ž€?

Prettier๋Š” 2016๋…„์— ๋“ฑ์žฅํ•œ ์ฝ”๋“œ ํฌ๋งทํ„ฐ์ด๋‹ค.
Prettier๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ์™„์ „ํžˆ ๋‹ค์‹œ ์ž‘์„ฑํ•ด์ค€๋‹ค. (๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์ฝ”๋“œ ์ „์ฒด๋ฅผ ์ƒˆ๋กœ ์ž‘์„ฑํ•œ๋‹ค.)

์ƒˆ๋กœ ์ž‘์„ฑํ•œ๋‹ค๊ณ  ํ•ด์„œ ์ฝ”๋“œ ๋‚ด์šฉ์ด ๋ณ€ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๊ตฌ์กฐ์  ๋ทฐ๋งŒ ๋ณ€๊ฒฝ๋œ๋‹ค !

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์น˜๋ถ€ํ„ฐ ํ•ด์ฃผ์ž.

$ npm install -g -E prettier

-E๋Š” --save-exac์˜ ์ถ•์•ฝ์–ด๋กœ์„œ ํ•ด๋‹น ํŒจํ‚ค์ง€๋ฅผ ์ •ํ™•ํ•œ ๋ฒ„์ „์œผ๋กœ ์„ค์น˜ํ•ด์ค€๋‹ค.
Prettier์—์„œ๋Š” ๋ฒ„์ „์ด ๋‹ฌ๋ผ์ง€๋ฉด์„œ ์Šคํƒ€์ผ์ด ๋ณ€ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ์˜ต์…˜์„ ๋ถ™์ด๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.


์ด์ œ ์„ค์ • ํŒŒ์ผ์ธ .prettierrc.json ํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค.
Prettier ์˜ต์…˜์€ 
https://prettier.io/docs/en/options.html ์—์„œ ์ฐธ๊ณ ํ•˜๋ฉด ๋œ๋‹ค.
๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ–ˆ๋‹น

// .prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all", 
  "printWidth": 80,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false
}

 

์ด์ œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑ ํ›„, 

// test.js

const abc
= 0

console.
log(abc)

prettier๋ฅผ ์ ์šฉํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค.

$ prettier test.js --write
// test.js

const abc = 0;
    
console.log(abc);

ESLint VS Prettier


ESLint๋Š” ์ฝ”๋“œ ํฌ๋งทํ„ฐ์˜ ์—ญํ• ๋„ ํ•˜์ง€๋งŒ, ์ฃผ๋กœ ์ฝ”๋“œ ์—๋Ÿฌ๋ฅผ ์žก์•„๋‚ด๊ณ  ์ฝ”๋“œ ๋ฌธ๋ฒ•์„ ๊ฐ•์ œํ•˜๋Š” ๋“ฑ ์ฝ”๋“œ ํ’ˆ์งˆ์„ ๊ฐœ์„ ์— ์ค‘์ ์„ ๋‘”๋‹ค.

Prettier๋Š” ์ฝ”๋“œ์˜ ์ตœ๋Œ€ ๊ธธ์ด, ํ•จ์ˆ˜์—์„œ, ์ž‘์€๋”ฐ์˜ดํ‘œ(')๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ธ์ง€ ํฐ ๋”ฐ์˜ดํ‘œ(")๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ธ์ง€ ๋“ฑ ์ฝ”๋“œ๊ฐ€ ์˜ˆ์˜๊ฒŒ ๋ณด์ด๋„๋ก ํ•˜๋Š”์ง€์— ์ค‘์ ์„ ๋‘”๋‹ค. ํ•˜์ง€๋งŒ ์ฝ”๋“œ์˜ ์—๋Ÿฌ๋ฅผ ์žก์•„๋‚ด์ง„ ๋ชปํ•œ๋‹ค.

ESLint์—๋„ ์ฝ”๋“œ ํฌ๋งทํŒ…์ด ์žˆ๊ธด ํ•˜์ง€๋งŒ Prettier์˜ ์ฝ”๋“œ ํฌ๋งทํŒ…์— ๋น„ํ•ด ํŠนํ™”๋˜์–ด์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—,
์ฝ”๋“œ ์—๋Ÿฌ์™€ ๋ฌธ๋ฒ•์„ ์ •์ ์œผ๋กœ ํƒ์ง€ํ• ๋•Œ๋Š” ESLint๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ํฌ๋งทํŒ…์—๋Š” Prettier๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค !

 


ESLint + Prettier ๊ฐ™์ด ์‚ฌ์šฉํ•˜๊ธฐ


์ด์ œ ESLint์™€ Prettier๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•ด๋ณด์ž.

ํ•˜์ง€๋งŒ ์œ„์—์„œ ๋งํ–ˆ๋“ฏ์ด, ESLint๊ฐ€ ์ฝ”๋“œ ํฌ๋งทํ„ฐ ์—ญํ• ๋„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— Prettier์™€ ์ถฉ๋Œํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์•„๋ž˜์˜ ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜์ž.

eslint-config-prettier ํŒจํ‚ค์ง€๋Š” ESLint ๊ทœ์น™์—์„œ Pretter ๊ทœ์น™๊ณผ ์ถฉ๋Œํ•˜๋Š” ๊ทœ์น™๋“ค์„ OFF ์‹œํ‚ค๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

$ npm install -D eslint-config-prettier


eslint-plugin-prettier ํŒจํ‚ค์ง€๋Š” Prettier ๊ทœ์น™๋“ค์„ ESLint ๊ทœ์น™์— ์ถ”๊ฐ€ํ•˜๋Š” ํŒจํ‚ค์ง€์ด๋‹ค.
์ฆ‰, eslint --fix ๋งŒ ์‹คํ–‰ํ•ด์ค˜๋„ prettier --write๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š” ์—†์ด prettier๊นŒ์ง€ ์ ์šฉ์‹œ์ผœ์ค€๋‹ค.

$ npm install -D eslint-plugin-prettier

.eslintrc.json ์— ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋œ๋‹ค.

// .eslintrc.json

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

 

์ด์ œ ESLint๋งŒ ์‹คํ–‰ํ•ด๋„ Prettier์˜ ํฌ๋งทํŒ… ๊ธฐ๋Šฅ์„ ํฌํ•จํ•ด์„œ ์‹คํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

 

728x90
๋ฐ˜์‘ํ˜•
LIST