ESLint, Prettier 에러 종류와 해결방법 (with CRA)

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 or yarn 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 or yarn 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 }]
  },

참고: https://stackoverflow.com/questions/57343517/how-to-disable-eslintprettier-prettier-single-quotes-error

 

---

설정 파일

.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",
    ...
  }