리액트와 타입 스크립트를 활용하여 협업을 진행하기 위해 ESLint, Prettier 설정을 위해 거의 하루에 걸친 삽질과 구글링 끝에 제가 설치한 방법과 설정을 정리 해보았습니다.
많은 글을 읽어보고 시도해 보았지만 수 많은 eslint 에러가 발생했습니다. 그 과정에서 node_modules 폴더와 esLint 설정에 대해 조금 더 깊은 공부를 할 수 있는 즐거운 경험이 었습니다.
npm create-react-app <프로젝트명> --template typescript
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm i -D eslint-plugin-react
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
// .eslintrc.json
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "react"],
"extends": [
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2,
"@typescript-eslint/explicit-function-return-type": [
"warn",
{ "allowTypedFunctionExpressions": true }
]
},
"settings": {
"react": {
"vlersion": "detect"
}
}
}
// .eslintignore
node_modules
// .prettierrc.json
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabwidth": 2,
"trailingComma": "all",
"printWidth": 80
}