순수악이 되지말자!(eslint + prettier setting)
순수악이 되지말자!Permalink
eslint, prettier를 하지 않는다? → 순수악이 될 위험분자
라고 생각한다.
일부로 폐를 끼치는게 아닌 나도 모르게 실수로 팀에 피해를 줄 수 있다.
따라서 코드를 적으면서 바로바로 확인 할 수 있도록 eslint, prettier를 세팅하자
우리팀에서 정한 컨벤션은
// eslintrc.json
{
"root": true,
"env": { "browser": true, "es2021": true, "node": true },
"extends": [
"next/core-web-vitals",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:@tanstack/eslint-plugin-query/recommended"
],
"parserOptions": {
"parser": "typescript-eslint/parser"
},
"rules": {
"prettier/prettier": "off",
"react/function-component-definition": [
"error",
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
],
"@typescript-eslint/naming-convention": [
"error",
{
"format": ["camelCase", "UPPER_CASE", "PascalCase"],
"selector": "variable",
"leadingUnderscore": "allow"
},
{
"format": ["camelCase", "PascalCase"],
"selector": "function"
},
{
"format": ["PascalCase"],
"selector": "interface"
},
{
"format": ["PascalCase"],
"selector": "typeAlias"
}
],
"import/newline-after-import": ["error", { "count": 1 }],
"padding-line-between-statements": [
"error",
{ "blankLine": "always", "prev": "const", "next": "return" }
],
"@tanstack/query/exhaustive-deps": "error",
"@tanstack/query/no-rest-destructuring": "warn",
"@tanstack/query/stable-query-client": "error"
}
}
// prettierrc
{
"semi": true,
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"endOfLine": "lf",
"singleAttributePerLine": true,
"jsxBracketSameLine": true,
"trailingComma": "all",
"arrowParens": "always",
"embeddedLanguageFormatting": "auto",
"importOrder": [
"^react",
"<THIRD_PARTY_MODULES>",
"^@/components/(.)$",
"^@/hooks/(.)$",
"^@/(.)$",
"^[./]"
],
"importOrderSortSpecifiers": true,
"plugins": [
"@trivago/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
]
}
이다.
순수악이 되지말자!!
댓글남기기