1. ESLint์ Prettier ์ค์
1.1 ESLint ์ค์น ๋ฐ ์ด๊ธฐํ:
npm install eslint --save-dev
npx eslint --init
1.2 ESLint ์ค์ ํ์ผ ์์ :
// .eslintrc.json
{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"rules": {
"react/prop-types": 0,
// ์ฌ๊ธฐ์ ์ํ๋ ๊ท์น ์ค์ ์ถ๊ฐ
}
}
1.3 Prettier ์ค์น ๋ฐ ์ค์ :
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
.prettierrc.json
์ Prettier ์ค์ ์ถ๊ฐ:
// .prettierrc.json
{
"singleQuote": true,
"semi": false,
"tabWidth": 2
}
1.4 ESLint์ Prettier ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ:
// .eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"prettier"
],
"plugins": ["react", "prettier"],
"rules": {
"react/prop-types": 0,
"prettier/prettier": "error"
// ์ฌ๊ธฐ์ ์ํ๋ ๊ท์น ์ค์ ์ถ๊ฐ
}
}
2. Husky์ lint-staged ์ค์
2.1 Husky ์ค์น ๋ฐ ์ค์ :
npm install husky --save-dev
package.json
์ Husky ์ค์ ์ถ๊ฐ:
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test", // ์ปค๋ฐ ์ ์ ํ
์คํธ ์คํ
"pre-push": "npm run lint" // ํธ์ ์ ์ lint ์์
์คํ
}
}
}
2.2 lint-staged ์ค์น ๋ฐ ์ค์ :
npm install lint-staged --save-dev
package.json
์ lint-staged ์ค์ ์ถ๊ฐ:
// package.json
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write", "git add"]
}
}
3. TypeScript ์ค์ (์ต์ )
3.1 TypeScript ๋ฐ ๊ด๋ จ ํจํค์ง ์ค์น:
npm install typescript @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
3.2 TypeScript ์ค์ ํ์ผ ์์ฑ (tsconfig.json):
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}
3.3 ESLint TypeScript ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ:
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
.eslintrc.json
์ TypeScript ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ:
// .eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"plugins": ["react", "prettier", "@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"rules": {
"react/prop-types": 0,
"prettier/prettier": "error"
// ์ฌ๊ธฐ์ TypeScript์ ๊ด๋ จ๋ ๊ท์น ์ถ๊ฐ
}
}
์ด๋ ๊ฒ ์ค์ ํ๋ฉด ํ๋ก์ ํธ์์ ์ฝ๋ ํ์ง์ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ์ปค๋ฐ ์ ์๋์ผ๋ก ํ ์คํธ์ ์ฝ๋ ์คํ์ผ ๊ฒ์ฌ๊ฐ ์ด๋ค์ง๋ฉฐ, TypeScript๋ฅผ ํฌํจํ์ฌ ํ๋ก์ ํธ์ ์ ํฉํ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.
'IT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
IPv4 vs. IPv6: ๋คํธ์ํฌ ์ฃผ์ ์ฒด๊ณ์ ์งํ (0) | 2024.02.07 |
---|---|
ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ์ฃผ๋ชฉ๋ฐ๋ ํ๋ ์์ํฌ ๋น๊ต (0) | 2024.02.07 |
๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ ์ธ์ด ๋ฐ ํ๋ ์์ํฌ ํธ๋ ๋ (0) | 2024.02.06 |
ChatGPT(OpenAI) ๋ฅผ ํ์ฉํ Code Review (0) | 2024.02.06 |
Jupyter Notebook: ๋ฐ์ดํฐ ๊ณผํ์์ ํ์ ๋๊ตฌ (0) | 2022.12.02 |
๋๊ธ