๐คณ ESLint & Prettier ์ ํํ ์ฐจ์ด?
ESLint ์ Prettier๋ ๋๋ค ์ฝ๋ ์ปจ๋ฒค์ ์ ๋์์ฃผ๋ ์ญํ์ ํ๋ค.
๋์ค์ ํ๋๋ง ์จ๋ ๋๋๋ฐ ์ ๋์ ๊ฐ์ด ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
ESLint ์ Prettier ๋ค๋ฅธ ์ฐจ์ด๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋์ ๊ฐ์ด ์ฌ์ฉํ๋ค.
"eslint๋ ์ฝ๋ ํ๋ฆฌํฐ๋ฅผ ๋ณด์ฅํ๋๋ก ๋์์ฃผ๊ณ , prettier๋ ์ฝ๋ ์คํ์ผ์ ๊น๋ํ๊ฒ ํน์ ํต์ผ๋๋๋ก ๋์์ค๋ค."
๊ทธ ์ฐจ์ด์ ๋ํด์ ์์๋ณด์.
โจ ESLint
๊ฐ๋ฐ์ค ๊ธฐ๋ฅ์ ๊ตฌํ ํ ๋, ํ๊ฐ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํ ์์ฒญ๋๊ฒ ๋ง์ ๋ฐฉ์๋ค์ด ์๋ค.
// function ํค์๋ ์ฌ์ฉ
function foo() {
...
}
// arrow function ์ฌ์ฉ
const foo = () => {
...
}
const Temps = [1,2,3,4,5];
// for๋ฌธ ์ฌ์ฉ
for(let i = 0; i < Temps.length; i++){
...
}
// Array ๋ด์ฅ ํจ์ ์ฌ์ฉ
Temps.forEach((temp) => {
...
})
์์ ์๋ค ์ฒ๋ผ function ํจ์๋ก ์ฌ์ฉํ ์ ์๊ณ , arrow function๋ฅผ ์ฌ์ฉํ ์ ์๊ณ , for๋ฌธ์ผ๋ก ๋ฐฐ์ด์ ์ํํ ์ ์๊ณ , forEach, map๋ฑ Array ๋ด์ฅํจ๋ฅผ ์ฌ์ฉ ํ ์๋ ์๋ค. ์ด๋ฐ ๋ฐฉ์์ ๊ฐ๋ฐ์ ๋ง๋ค ์คํ์ผ์ด ์ฐจ์ด๊ฐ ์๊ธฐ๋๋ฌธ์ ์ด๋ฌํ ๋ฐฉ์์ ํต์ผ์ฑ๊ณผ ์ผ๊ด์ฑ ์๋ ๋ฐฉ์์ผ๋ก ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ ๊ฒ์ด ESLint๊ฐ ํ๋ ์ญํ์ด๋ค.
์ฝ๋ํ๋ฆฌํฐ ์ฆ ์ฝ๋ ๊ตฌํ ๋ฐฉ์์ ์ผ๊ด์ฑ์๊ณ ํต์ผ์ฑ์๋๋ก ๋์์ฃผ๋ Javascript ๋ฌธ๋ฒ ๋๊ตฌ์ด๋ค.
โจ Prettier
Prettier๋ ESLint์ฒ๋ผ ์ฝ๋ ๊ตฌํ ๋ฐฉ์์ด ์๋, ์ค ๋ฐ๊ฟ, ๊ณต๋ฐฑ, ๋ค์ฌ ์ฐ๊ธฐ ๋ฑ ๋ฐ์ดํฐ์์ ํ ์คํธ๋ฅผ ์ผ๊ด๋๊ฒ ์์ฑ๋๋๋ก ๋์์ฃผ๋ ๊ฒ์ด๋ค.
const foo = () => {
const a = [1, 2, 3]; // ์ค์ฝํ ๋ด๋ถ ์์ฑ ์ ๋ ๊ณต๋ฐฑ ๋ค์ฌ์ฐ๊ธฐ
}
// <= ๋น ์ค์ด ํ ์ค ์ด์ ์๋จ.
foo();
์์ ์ฒ๋ผ ์ค๋ฐ๊ฟ ๊ณต๋ฐฑ, ๋ค์ฌ ์ฐ๊ธฐ๋ฑ์ ์ผ๊ด์ฑ ์๋ ๋ฐฉ์์ผ๋ก ๋์์ฃผ๋ ์ญํ์ ํ๋ค.
โจ ESLint ์ ํ
์ฐ์ ESLint๋ฅผ ์ฐ๋ ค๋ฉด ๋น์ฐํ ESLint๋ฅผ ์ค์นํด์ผ ๋๋ค.
$ npm install -D eslint
// or
$ yarn add -D eslint
npm ์ค์น๋ฅผ ํ๊ณ VScode์์ ESLint extension์ ๋ฌด์กฐ๊ฑด ์ค์น๋ฅผ ํด์ฃผ์ด์ผํ๋ค.
ESLint Extension์ ์ค๋ช ์๋ ๋ณด๋ฉด, ํด๋น ์ํฌ์คํ์ด์ค(์ฌ๊ธฐ์๋ ํด๋น ํ๋ก์ ํธ)์์ eslint๊ฐ ์ค์น๋์ด ์๋์ง ํ์ธํด๋ณด๊ณ , ์์ผ๋ฉด ๊ธ๋ก๋ฒ eslint๋ฅผ ์ฐธ์กฐํ๋ค๊ณ ๋์์๋ค. ๊ทธ๋ฆฌ๊ณ ํ์์ ๋ฐ๋ผ .eslintrc ํ์ผ์ด ํ์ํ ์๋ ์๋ค๊ณ ์ค๋ช ๋์ด ์๋ค.
๊ทธ๋ ๋ค . eslint๊ฐ ํ๋ก์ ํธ ์ฝ๋ ๋จ์์ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๋ผ, ํด๋น VSCode๋ผ๋ ์๋ํฐ์ ์ ์ฉํด์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค ๋ณด๋, eslint๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด eslint extension๋ง ์ค์นํ๊ฑฐ๋, eslint library๋ง ์ค์นํ๋ ๊ฒ์ด ์๋๋ผ, ๋ ๋ค ์ค์น ๋ฐ ์ธํ ์ด ๋์ด ์์ด์ผ ํ๋ ๊ฒ์ด๋ค.
์ด์ ์ด eslint๋ฅผ ์ ๋๋ก ์ค์นํด์ฃผ์์ผ๋ฉด, .eslintrc ํ์ผ์ ํตํด์ lint rule์ ์ธํ ํด์ฃผ์ด์ผ ํ๋ค.
.eslintrc ํ์ผ ์์ฑ *ํ์ ์คํฌ๋ฆฝํธ ์ ์ฉ ๋ฆฐํธ
{
"root": true,
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"@typescript-eslint/strict-boolean-expressions": [
2,
{
"allowString" : false,
"allowNumber" : false
}
]
}
}
- root
- default๋ true์ธ๋ฐ, ์ด ๊ฐ์ด true๊ฐ ์๋๋ฉด, eslintrc ํ์ผ์ ์ฐพ์ ๋, ํด๋น ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ ๋ฟ ์๋๋ผ, ๋ด PC์ root ํ์ผ ์์คํ root ๋๋ ํ ๋ฆฌ๊น์ง eslint๋ฅผ ์ฐพ๋๋ค
- plugins ์ข
๋ฅ๋ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์๋ค.
- eslint-config-airbnb-base: ์์ด๋น์๋น ๋ฆฐํธ ํ๋ฌ๊ทธ์ธ
-
eslint-config-next: Next.js ์ ์ฉ ๋ฆฐํธ ํ๋ฌ๊ทธ์ธ
-
eslint-plugin-react: ๋ฆฌ์กํธ ์ ์ฉ ํ๋ฌ๊ทธ์ธ
-
eslint-plugin-prettier: ๋ฆฐํธ ์์ ์ฌ์ฉํ ํ๋ฆฌํฐ์ด ํ๋ฌ๊ทธ์ธ
-
eslint-config-prettier: ์๊ฑด ๋ฆฐํธ ์ค์ ๊ณผ ์ค๋ณต๋๋ ๋ถ๋ถ์ด ์์ผ๋ฉด ํ๋ฆฌํฐ์ด ๋ฃฐ์์ ์ ์ธํ๋ ํ๋ฌ๊ทธ์ธ
- @typescript-eslint/eslint-plugin: : ํ์ ์คํฌ๋ฆฝํธ ์ ์ฉ ๋ฆฐํธ
์์ ์ ํ๋ก์ ํธ์ ๋ง์ถฐ์ ์ต์ ๋ค์ ์ค์ ํด์ ESLint๋ฅผ ํ์ฉํ๋ฉด ๋๋ค.
๋ ๋ง์ ์ ๋ณด๋ ์๋์ ESLint ๋ฌธ์๋ฅผ ์ฐธ์กฐํ๋ฉด ๋ฉ๋๋ค.
https://typescript-eslint.io/docs/
Getting Started | TypeScript ESLint
Quickstart
typescript-eslint.io
โจ Prettier ์ ํ
Prettier ์ ํ ์ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
- ๋ณ๋์ Prettier ๊ด๋ จ ํ๋ฌ๊ทธ์ธ์ npm, yarn์ผ๋ก ์ค์นํ์ง ์๊ณ VScode์ extension์ ์ค์น.
- Prettier ํ๋ฌ๊ทธ์ธ์ ์ง์ ์ค์น ํ eslintrc์ ์ ํ .
Prettier ๋ค์ด๋ก๋
Prettier-code formatter๋ ์ค์นํ๋ ์๊ฐ ๋ฐ๋ก ์ ์ฉ๋๋ค.
ํด๋น prettier์ ๋ํ ์์ธ ์ค์ ๋ฐฉ์์ docs์ ๋ค์ด๊ฐ๋ฉด ์ค๋ช
์ด ์์ฃผ ์ ๋์์๋ค.
crtl + shift + p๋ฅผ ๋๋ฅด๋ฉด ๋ํ๋๋ ๊ฒ์ ์ฐฝ์, Open User Settings๋ก ๋ค์ด๊ฐ์ prettier๋ฅผ ๊ฒ์ํ๋ฉด, prettier ๊ด๋ จ ์ค์ ํ ์ ์๋ ๋ฆฌ์คํธ๋ค์ด ๋ํ๋๋ค. ์ฌ๊ธฐ์ ์ฌ๋ฌ๋ถ๋ค ์ ๋ง์ ๋ง๊ฒ ์ค์ ํ๋ฉด ์ ์ฉ๋๋ค.
VScode extension์๋ง ์ค์ ์ ํ๋๊ฒ ์๋๊ณ .prettierrc ํ์ผ์ ์ ํ ์ ํ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ prettier ์ค์นํ๊ณ ์ ํ ์ ํด์ฃผ๋ฉด๋๋ค.
$ npm install -D prettier
// or
$ yarn add -D prettier
.prettierrc ์์ฑํ ์๋์ ์ ๋ณด๋ฅผ ์ฐธ๊ณ ํ์๋ฉด ๋ฉ๋๋ค.
https://github.com/prettier/eslint-config-prettier
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
โจ VSCode Settings.json ์ ํ
์ฝ๋ ์์ ํ ctrl + s ์ ์ฅ์ ๋ฆฐํธ๋ฅผ ์ก์์ฃผ๋ ๊ธฐ๋ฅ์ VScode ์๋ํฐ๊ฐ ๋์ํ๋๋ก ์ค์ ํ๋ ๊ธฐ๋ฅ์ด๋ค.
VSCode Setting์์ ์ค์ ์ ํด์ฃผ์ด์ผ ํ๋ค. ctrl+shift+p๋ก ๋์จ ๊ฒ์์ฐฝ์ Open Settings.json(JSON)์ ์ ํํ๋ฉด Settings ์ค์ ์ด JSON ํ์์ผ๋ก ๋์จ๋ค.
settings.json์ ์ต์ ์ ์ ํ ํ๋ค.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
์ฝ๋ ๊ทธ๋๋ก saveํ ๋ ๋์ํ๋ ์ฝ๋๋ฅผ ์์ฑํ ๊ฒ์ด๋ค.
์ฆ save ํ ๋ Prettier ํ๊ฒฝ์ ๋ง๊ฒ ์ฝ๋๋ฅผ ์์ ํด์ฃผ๋ ์ต์ ์ด๋ค.
โจ ESLint & Prettier & Settings.jon
- ESLint
- ๊ธฐ๋ฅ ์์ฒด๋ VScode ์๋ํฐ์ ์ ์ฉํ๋ ๊ฒ์ด๋ฏ๋ก, VScode extension๋ฅผ ๊ผญ ์ค์น๋์ด์ผ ํ๋ค.
- Prettier
- Prettier ์
ํ
๋ฐฉ์์ ๋๊ฐ์ง๊ฐ ์๋ค.
- ESLint์ฒ๋ผ VScode์๋ํฐ ์์ฒด์ ์ ์ฉํ๋๋ก VScode extension ์ค์นํ๋ ๋ฐฉ์
- Prettier ํ๋ก๊ทธ์ธ์ ์ค์นํ eslint ํ๊ฒฝ์ ์ ๋ชฉ ์ํค๋ ๋ฐฉ์
- Settings.json
- format on Save ์ ์ฅ์ ์์์ ์์ ํด์ฃผ๋ ๊ธฐ๋ฅ
- Settings.json ์ ํ ์ ํด์ฃผ๋ฉด ์ ์ฅ์ ๋์ํ๊ฒ ํด์ค๋ค.
- Prettier ์
ํ
๋ฐฉ์์ ๋๊ฐ์ง๊ฐ ์๋ค.
'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
FormData ์ฌ์ฉ๋ฒ & ๊ฐ๋ (4) | 2022.12.22 |
---|---|
Javascript์์ false๋ก ๊ฐ์ฃผ๋๋ ๊ฒ๋ค(์์๋๋ฉด ์ ์ฉํ ์ ๋ณด) (7) | 2022.12.13 |
getElementById ๊ทธ๋ฆฌ๊ณ querySelector ์ฐจ์ด์ (7) | 2022.07.30 |
scrollํ ๋ progress bar ํ์ (3) | 2022.07.29 |
์๋ฐ์คํฌ๋ฆฝํธ innerHtml vs innerText (1) | 2022.07.28 |