์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- ๋๋๊ทธ ์ด๋ฒคํธ
- ์ฝํ
- custom hook
- ์๋ฐฉํฅ ์ฐ๊ฒฐ ๋ฆฌ์คํธ
- TypeScript
- ๋ธ๋ฃจํธํฌ์ค
- js
- ์ด๋ถํ์
- ํ๋ก๊ทธ๋๋จธ์ค
- ์๋ฐ์คํฌ๋ฆฝํธ
- ๋ถ์คํธ์ปจํผ๋ฐ์ค
- ๊ณผ์ ํ ์คํธ
- router v6
- Node.js
- ์นด์นด์ค
- ์๊ณ ๋ฆฌ์ฆ
- Redux toolkit
- React
- ์นด์นด์ค์ฑ์ฉ
- ์ด๋ฏธ์ง ์์
- ๋ฆฌ๋์ค ํดํท
- icecandidate
- ๋์ ๊ณํ๋ฒ
- JavaScript
- ์ฝ๋ ํฌ๋ฉง
- svgํ์ผ ๋ค๋ฃจ๊ธฐ
- ๋ฐฑ์ค
- DP
- ์ฝ๋ฉํ ์คํธ
- ๋ถ์คํธ์บ ํ์น๋ชจ๋ฐ์ผ
- Today
- Total
๐ฅ dev-ruby
[ESLint, Prettier] React ํ๋ก์ ํธ์ ESLint ์ Prettier ์ ์ฉํ๊ธฐ | ESLint ์ Prettier ์ฌ์ฉ๋ฒ๊ณผ ์ฐจ์ด์ ๋ณธ๋ฌธ
[ESLint, Prettier] React ํ๋ก์ ํธ์ ESLint ์ Prettier ์ ์ฉํ๊ธฐ | ESLint ์ Prettier ์ฌ์ฉ๋ฒ๊ณผ ์ฐจ์ด์
ruby_s 2022. 1. 4. 16:58
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/
์์ ๋ช ๊ฐ์ ์์๋ง ์ค๋ช ํด๋ณด์๋ฉด, ์ฐ์ , "error" ๋ ๊ท์น์ ์ด๊ธ๋๋ ์ฝ๋๋ฅผ ์๋ฌ๋ก ์ทจ๊ธํ๋ค๋ ๋ป์ด๋ค.
- "semi"๋ "always"์ "never"๋ก ์ค์ ํ ์ ์๋๋ฐ,
- "always"(default) : ๋ช ๋ น๋ฌธ์ ๋์ผ๋ก ์ธ๋ฏธ์ฝ๋ก ์ ๋ฌด์กฐ๊ฑด ๋ถ์ด๋๋ก ํ๋ค.
- "never" : ๋ช ๋ น๋ฌธ์ ๋์ผ๋ก ์ธ๋ฏธ์ฝ๋ก ์ ํ์ฉํ์ง ์๋๋ค๋ ๋ป์ด๋ค.
- "quotes"๋ ๋ค์๊ณผ ๊ฐ์ 3๊ฐ์ง ์ต์
์ด ์๋ค.
- "double"(default) : ํฐ๋ฐ์ดํ(")๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
- "single" : ์์ ๋ฐ์ดํ(')๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
- "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์ ํฌ๋งทํ
๊ธฐ๋ฅ์ ํฌํจํด์ ์คํํ๊ฒ ๋๋ค.