eslint, prettier 설정 파일 세팅

부트캠프에서 프로젝트를 위해 알려준 권장 eslint, prettier 설정의 의미를 파헤쳐보는 포스팅 되시겠다.

💡 기본 개념:
- prettier는 formatter이고, eslint는 linter이다.
- 스타일을 교정하려면 formatter를 사용하고, 오류를 잡으려면 linter를 사용한다.
- linter 룰은 크게 포맷팅(스타일) 룰과 퀄리티 룰이라는 두 가지 카테고리로 나눌 수 있다.

 

CRA를 사용하면 기본적으로 세팅되어 있는 eslint config인 eslint-config-react-app를 사용하는 경우, non-style 룰만 포함되어 있기 때문에 별다른 설정 없이도 prettier를 같이 사용할 수 있다. 하지만 일부 eslint config를 설치해서 사용한다면(예: "eslint:recommended") prettier와 충돌이 발생하는 경우가 생길 수 있다. 이 경우 충돌하는 eslint 규칙을 전부 꺼주는 방법이 한 가지 해결책이다(eslint-config-prettier). - 🔗

1. eslintrc.json

eslint-plugin : 룰을 정의 한 것
eslint-config : eslint-plugin 패키지들이나 룰들을 모아서 설정으로 만든 것

 

📍 부트캠프에서 권장 설정으로 설치한 플러그인과 config 목록

• eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 규칙을 꺼준다.
• eslint-plugin-import : ES6+의 import/export 문법의 린팅을 지원하고, 파일 경로와 import 이름의 오타를 예방해준다.
• eslint-plugin-jsx-a11y : 접근성 지원
• eslint-plugin-react : 리액트 지원
• eslint-plugin-react-hooks : 리액트 hooks 지원

📍 eslint: recommended 의 의미
- rules page에 있는 체크 표시(✅)된 모든 규칙들을 활성화한다.
- 이 설정 외에 규칙이 더 필요하면 rules 속성에 추가해서 확장할 수 있다.
- 렌치 표시(🔧)가 붙은 것은 --fix 옵션으로 자동 수정할 수 있는 규칙이다.
- 설정 값은 아래 세 가지로 나뉜다. (가독성을 위해 숫자보다 문자열 선호)
0 === "off"
1 === "warn"
2 === "error"


📍 eslint-plugin-prettier : prettier 공식 문서에서도 사용을 추천하지 않아 삭제했다.

 

- 에디터에서 빨간 밑줄이 너무 많이 생겨서 거슬림
- prettier를 단독으로 사용하는 것보다 느림
- 불필요한 플러그인 레이어가 하나 더 생김

이 경우 다음 두 가지 중의 한 가지 방법을 사용해 defaultFomatter를 prettier로 설정해야 한다.

 

[방법 1] 루트 디렉토리에 .vs code 폴더를 만들고 그 밑에 setting.json를 생성해서 다음과 같은 코드를 작성한다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

[방법 2] eslintrc.json 파일에서 extends 속성의 맨 마지막에 prettier를 추가해준다. 

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:import/recommended",
        "plugin:jsx-a11y/recommended",
        "prettier"
    ]

 

📍권장 설정에서 rules 속성

    "rules": {
        "react/react-in-jsx-scope": "off", // (1)
        "react/jsx-uses-react": "off"	// (2)
    }

이 부분은 아직 확실하게 이해를 못했다. 검색하면서 찾은 내용 중 키워드 위주로만 정리해 둔다.

(1) supresss errors for missing 'import React' in files
(2) Always importing React is necessary for proper transpilation, but when ESLint looks at the file, it’s still JSX, so it won’t see React referenced anywhere. If the project is using the no-unused-vars rule, this results in an error since React is imported but not used anywhere.
This rule catches this situation and prevents no-unused-vars from failing on the React import. - 🔗

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md

2. prettierrc.json

프리티어 설정 관련해서는 개인 취향이 들어가는 부분이 있기 때문에 내일 팀원들과 협의해서 최종 설정 버전 결정할 예정

{
    "singleQuote": true,
    "jsxSingleQuote": true, // default: false
    "tabWidth": 4, // default: 2 
    "printWidth": 100, // 개행시켜야 하는 문자수 (default: 80 / 100 또는 120 추천)
    "semi": true, // statements 뒤에 세미콜론 붙일지 말지 (default: true)
    "trailingComma": "none", // 후행 쉼표 제어 (default: es5)
    // none: 쉼표 안 붙임
    // es5: es5에서 유효한 후행 쉼표 붙임 (객체, 배열 등)
    // all: 가능하면 후행 쉼표 붙임 (함수 인자)
    "bracketSpacing": true, // * 객체 리터럴 공백 (default: true)
    // true: { foo: bar }
    // false: {foo: bar}
    "jsxBracketSameLine": false, // * jsx 요소 마지막에 > 위치 (default: false)
    // https://prettier.io/docs/en/options.html#deprecated-jsx-brackets  
    "endOfLine": "auto" // ! 필수 정의 필요: window, mac 기본 설정 다르기 때문 (default: lf)
}

[2023. 3. 4. 업데이트]

최종 prettierrc.json 파일 코드 (팀원 3명이 전부 mac user라 endOfLine은 디폴트값인 lf를 사용했다.)

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "printWidth": 100
}

 

3. package.json

CRA 프로젝트에서 package.json 파일에 다음과 같은 eslint 설정이 자동으로 들어가 있는데, 팀 단위 프로젝트에서는 추천하지 않는다는 포스팅이 있다. - 🔗
eslint 설정은 eslint 설정에 따로 해주는 편이 더 좋다는 의미 같은데 아직 정확히 파악하지 못하겠어서 일단 이 부분은 package.json에 그대로 두었다.

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

 

참고로 eslintrc, prettierrc 등 뒤에 붙는 rc는 run commands의 약자였다. 이런 약자 뜻 뭔지 모르면 도무지 그 다음 단계로 나아갈 수 없는 1인... 😇
초기 세팅 파일은 여기까지 하는 걸로 하고 실제로 프로젝트를 진행해봐야 어떤 설정이 추가로 필요할지, 초기 세팅을 잡아 놓은 부분에서 수정이 필요한 부분이 어디인지 알아갈 수 있을 것 같다.

 

 

📚 prettier 참고자료

Prettier · Opinionated Code Formatter

prettier와 eslint를 구분해서 사용하자

eslint를 사용할 때 prettier의 설정(.prettierrc file 사용 방법)

📚 eslint 참고자료

Rules Reference - ESLint - Pluggable JavaScript Linter

ESLint 상세 설정 가이드

12 essential ESLint rules for React - LogRocket Blog