CRA 셋팅

js cra 프로젝트를 새로 생성하는데 .eslintrc, .jsconfig.js, .prettierrc.json 설정에 애를 먹었다.

프로젝트 셋팅은 언제나 새로워. 할때마다 오래걸려.

절대경로 설정

.jsconfig.json 파일 생성 후 아래와 같이 붙여넣는다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

eslint, prettier 설치

아래와 같이 설치해준다.

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

eslint, prettier 설정

.prettierrc.js

아래와 같이 설정해준다. 이건 취향따라 prettier 옵션 보고 설정한다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "endOfLine": "auto"
}

.eslintrc.json

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)

eslint 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 버전을 맞춰주어야 한다.