TypeScript 기반의 React 프로젝트에서 공유되는 eslint 설정파일이다.
Eslint와 Prettier 조합을 사용하기 때문에 사전에 설치해야할 패키지들이 존재한다. (코드 품질검사는 eslint가 코드 포맷팅은 prettier가 하기위함)
# Eslint react plugin
yarn add -D eslint-plugin-react
# Install prettier
yarn add -D prettier
# Turns off conflict with Prettier
# Add prettier in eslint plugin
yarn add -D eslint-config-prettier eslint-plugin-prettier
# Eslint TypesScript
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
# Install
yarn add -D eslint-config-luxrobo-react
eslint 설정파일의 extends에 추가하여 사용한다.
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint-config-luxrobo-react"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {}
}
.prettierrc.json
{
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"printWidth": 80
}