yarn berry에 eslint 와 prettier 설정하기

install

처음 아래와 같이 설치해줬으나, 최신 버전 이슈로 스크립트 태그 명령어가 잘 동작을 안했음


yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app

이후 다음 명령어로 재설치하니까 스크립트 태그 잘 작동함. (eslint 8.46버전 사용)


yarn add eslint@^8.46.0 eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@^5.30.0 @typescript-eslint/parser@^5.30.0 --dev

.eslintrc.json생성

yarn create-react-app 으로 프로젝트를 생성했으면, package.json에 다음과 같이 설정 되어있을 건데,


  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

이부분을 지우고, .eslintrc.json 파일을 따로 생성해주고 거기에 붙여넣자



export default {
  eslintConfig: {
    extends: ['react-app', 'react-app/jest', "plugin:prettier/recommended" // prettier의 추천 룰 적용
],
  },
      "plugins": ["prettier"], // prettier 플러그인 추가
  rules: {
        "prettier/prettier":"error" // prettier와 eslint의 중복 룰 피하기위해 작성
  },
}

.prettierrc 설정

.prettierrc 파일 생성후 다음과 같이 입력


{
    "useTabs": false,
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "lf",
    "semi": false,
    "arrowParens": "always"
}

yarn berry에 연결하기

설정한 eslint와 prettier을 vscode에서 잘 읽을수 있도록 설정해주자.


yarn dlx @yarnpkg/sdks vscode

package.json에 스크립트 추가하기


"script":{
	   ...
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
}

다음 뜻을 가짐

다음 확장자 명칭을 가진것들을 eslint 검사하겠다.

모든 파일을 순회하면서 eslint 옵션에 맞게 수정하겠다.

yarn lint:fix 를 치면 모든 파일들이 eslint 옵션에 맞게 수정됌