js cra 프로젝트를 새로 생성하는데 .eslintrc, .jsconfig.js, .prettierrc.json 설정에 애를 먹었다.
프로젝트 셋팅은 언제나 새로워. 할때마다 오래걸려.
.jsconfig.json 파일 생성 후 아래와 같이 붙여넣는다.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
아래와 같이 설치해준다.
"devDependencies": {
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"prettier": "^2.3.2"
}
아래와 같이 설정해준다. 이건 취향따라 prettier 옵션 보고 설정한다.
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"bracketSpacing": true,
"jsxBracketSameLine": true,
"endOfLine": "auto"
}
npx eslint --init
으로 기본적인 설정을 해주고, 나머지는 아래와 같이 설정해주었다.
다른것은 eslint config를 보고 입맛에 맞춰 추가해주면 된다.
/* eslint-disable no-undef */
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2021,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"no-unused-vars": 1,
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
"react/prop-types": 1
},
"settings": {
"react": {
"version": "detect",
"linebreak-style": ["error", "window"]
}
}
}
다른것보다 no-unused-vars
에러가 계속 발생해서 고생했다. 기존 프로젝트에서는 따로 설정하지 않아도 에러가 발생하지 않았었는데, rules에 no-unused-vars
옵션을 설정해주기 전까지는 계속 에러가 발생했다.
필요한 컴포넌트만 import해서 사용하는 것이 맞지만 개발하다보면 그게 되나... 일단 no-unused-vars
옵션을 찾아 해결했다.
no-unused-vars: 1,
0은 경고/알림이 사라짐, 1은 경고만뜸, 2는 빨간줄 생성(error)
Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Occurred while linting
eslint를 셋팅할때 위와같은 오류가 발생할 때가 있다.
eslint-plugin-prettier가 4.0.0으로 업그레이드 되면서 eslint 버전과 호환이 되지 않아서 발생하는 문제다. create-react-app에는 이미 eslint가 설치되어 있으니 eslint를 새로 설치하면 안되고, yarn upgrade -R eslint
명령으로 eslint 버전을 맞춰주어야 한다.