npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
https://flamingotiger.github.io/javascript/eslint-setup/#:~:text=두가지의 airbnb 설정(eslint,%EC%9E%88%EB%83%90%20%EC%97%86%EB%83%90%EC%9D%98%20%EC%B0%A8%EC%9D%B4%EC%9E%85%EB%8B%88%EB%8B%A4.
https://velog.io/@jma1020/React-ESLint-설정-종류-및-airbnb-설정
eslint-config-airbnb : 리액트 규칙 포함함
"plugin:node/recommended", node.js를 위한 플러그인 이며, 프론트가 사용할 이유가 없다 .
CJS만 허용함 https://stackoverflow.com/questions/60010173/resolve-eslintnode-no-unsupported-features-es-syntax-how-to-support-javascri
https://velog.io/@s_sangs/TypeScript-ESLint-Prettier
https://velog.io/@2wndrhs/알아두면-쓸데있는-ESLint-Prettier-설정-방법
/** .eslintrc 는 2015년 이후 deprecate 되었으며, .eslintrc.json 또는 .eslintrc.js 파일을 생성하여 세팅한다. */
{
// "root": true /** root가 true로 설정되어 있으면 하위 프로젝트에 대해 해당 설정 적용*/,
"env": {
"browser": true,
"es2021": true,
"es6": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "react", "prettier"],
"extends": [
"next/core-web-vitals",
"airbnb" /** airbnb는 airbnb-base에 리액트전용규칙 추가 */,
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended" /** linter인 것 처럼 prettier를 실행하는 플러그인*/,
"plugin:prettier/recommended"
] /** 적용되는 순서가 있으므로, prettier를 맨 마지막에 작성해줌*/,
"settings": {
"react": {
"version": "detect"
},
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {}
}
},
/** build, dist, public 폴더는 eslint 검사하지 않는다 */
"ignorePatterns": ["build", "dist", "public"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json",
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"@typescript-eslint/no-unused-vars": "error",
/** import 순서 설정 */
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal", ["parent", "sibling"], "object", "type", "index"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"sort-imports": [
"error",
{
"ignoreCase": true,
"ignoreDeclarationSort": true,
"ignoreMemberSort": false,
"allowSeparatedGroups": true
}
],
"prettier/prettier": "error",
"react/react-in-jsx-scope": "off" /** Next.js 에서는 React 자동 import 되기 때문에 에러 꺼주기*/,
"@typescript-eslint/consistent-type-imports": "error",
"no-var": "error",
"curly": ["error", "multi-line", "consistent"],
"nonblock-statement-body-position": ["error", "beside"],
"react/jsx-filename-extension": 0 // ts,tsx파일에서도 jsx 문법을 사용할 수 있도록 함
},
/** Next.js 에서는 React 자동 import 되기 때문에 에러 꺼주기*/
"globals": {
"React": "writable"
}
}
{
/** .eslintrc 는 2015년 이후 deprecate 되었으며, .eslintrc.json 또는 .eslintrc.js 파일을 생성하여 세팅한다. */
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "react", "prettier"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json",
"createDefaultProgram": true,
"ecmaVersion": 2018,
"sourceType": "module"
},
"env": {
// 전역객체를 eslint가 인식하는 구간
"browser": true, // document나 window 인식되게 함
"node": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
},
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {}
}
},
"ignorePatterns": ["node_modules/", "build", "dist", "public"], // eslint 미적용될 폴더나 파일 명시
"extends": [
"airbnb",
"airbnb-typescript",
"airbnb/hooks",
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended", // ts 권장
"plugin:prettier/recommended", // eslint의 포매팅을 prettier로 사용.
"prettier" // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
],
"rules": {
"@typescript-eslint/no-unused-vars": "error", // var 사용시 에러로 표시
"react/react-in-jsx-scope": "off", // react 17부턴 import 안해도돼서 기능 끔
// 경고표시, 파일 확장자를 .ts나 .tsx 모두 허용함
"react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
"no-useless-catch": "off", // 불필요한 catch 못쓰게 하는 기능 끔
// import 순서 설정
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal", ["parent", "sibling"], "object", "type", "index"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"sort-imports": [
"error",
{
"ignoreCase": true,
"ignoreDeclarationSort": true,
"ignoreMemberSort": false,
"allowSeparatedGroups": true
}
]
},
"globals": {
"React": "writable"
}
}