프론트엔드
ESLint, Prettier 에러 종류와 해결방법 (with CRA)
seomoon
2022. 3. 1. 21:56
1. 에디터에서 eslint, prettier 적용(에러 표시, 자동 설정 등)이 안 되는 문제 :
- ESLint, Prettier 확장 툴이 설치 되었는지 확인하기
- VSCode 설정이 제대로 됐는지 확인하기
- VSCode 설정이 되어있는데도 문제가 발생한다면
eslint, prettier 설정 파일의 이름을 잘못 작성했거나 설정 파일 내용에 잘못된 문법, 오타 등이 있는지 확인
(나는 .prettierrc.json이 아니라 prettierrc.json으로, 앞에.
을 빠뜨려서 적용이 안됐었다)
2. Parsing error: The keyword 'import' is reserved eslint
@babel/eslint-parser
설치 (npm i -D @babel/eslint-parser
oryarn add -D @babel/eslint-parser
)- eslint config 파일에 parser 추가하기
"parser": "@babel/eslint-parser"
3. Parsing error: No Babel config file detected for ~
- eslint config 파일에 parserOptions requireConfigFile false 추가
"parser": "@babel/eslint-parser", "parserOptions": { "requireConfigFile": false }
- 또는 babelconfig 파일 (ex:
.babelrc
)을 추가하고 eslint config 파일에 다음 라인을 추가해준다. "babelOptions": { "configFile": "./.babelrc", }
.babelrc
예시)
{
"presets": [
"@babel/preset-env"
]
}
4. Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript"
- eslint config 파일의 extends 항목에 react-app을 추가하거나,
"extends": ["react-app"],
- 또는
@babel/preset-react
를 설치하고 (npm i -D @babel/preset-react
oryarn add -d @babel/preset-react
)
eslint config 파일에 다음을 추가해준다.
"babelOptions": {
"presets": ["@babel/preset-react"]
},
5. single quote 충돌 에러
double quote를 사용하라고 에러가 나서, (Replace 'react-router-dom' with "react-router-dom"
)
double quote로 교체를 하면 single quote를 쓰라고 에러가 나는 경우.
(Strings must use singlequote.eslint(quotes)
)
Strings must use singlequote.eslint(quotes)
에러는 나지 않더라도
에디터에서 prettier 포맷팅이 저장시 자동 적용되도록 되어 있고 + prettier에서 singleQuote: true로 설정되어 있다면,
저장할 때마다 자동으로 single quote로 변경이 되면서
eslint에서는 double quote라고 바꾸라고 에러가 뜨고.. 이런 상황이 될 수도 있다.
eslint 설정 파일에 다음 rule을 추가해서 해결할 수 있다.
"rules": {
"prettier/prettier": ["error", { "singleQuote": true }]
},
설정 파일
.eslintrc
{
"extends": ["react-app", "eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": ["error", { "singleQuote": true }]
},
"parser": "@babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false
}
}
.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": true,
"useTabs": false,
"arrowParens": "avoid",
"endOfLine": "lf"
}
package.json
"devDependencies": {
"@babel/eslint-parser": "^7.17.0",
"prettier": "^2.5.1",
"eslint-config-prettier": "^8.4.0",
"eslint-plugin-prettier": "^4.0.0",
...
}