Prettier 설정

// .prettierrc
{
  "singleQuote": true, // 쌍따옴표 대신 홑따옴표 사용
  "semi": true, // 모든 구문 끝에 세미콜론 출력
  "useTabs": false, // 탭 대신 공백으로 들여쓰기
  "tabWidth": 2, // 들여쓰기 공백 수
  "trailingComma": "all", // 가능하면 후행 쉼표 사용
  "printWidth": 80, // 줄 바꿈할 길이
  "bracketSpacing": true, // 객체 괄호에 공백 삽입
  "arrowParens": "always", // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "endOfLine": "lf", // OS에 따른 코드라인 끝 처리 방식 사용
}

Lint 설정

에어비앤비 린트 패키지 설치

npm install eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-next eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"] // 확장자 에러 표시 x
      }
    }
  },
  "extends": [
    "prettier",
    "airbnb",
    "airbnb-typescript",
    "next/core-web-vitals",
    "eslint:recommended", // 추천 규칙 적용
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "prettier/prettier": "error" // 써보고 쓸데없는 오류가 발생할 경우 직접 설정
  }
}

각 Key 값의 의미는 다음과 같다.

• "env" : 프로젝트의 사용 환경을 설정
• "settings" : 플러그인의 추가적인 설정이 필요할 때 사용된다.
  • import/resolver 에 주목해보자. 배열 안의 확장자는 import 시 굳이 선언하지 않아도 에러로 표시하지 않겠다는 설정이다.
• "extends" : ESLint의 기본 설정을 확장해서 사용하는 개념.
  • 대부분의 plugin은 recommended (추천 규칙 적용), all (전체 규칙 적용) 등의 자체 설정을 제공한다.
  • 이렇게 자체 규칙을 사용하면 "rules" 에 따로 규칙을 넣어주지 않아도 된다.
• "plugins" : ESLint에서 제공하지 않는 plugin을 설정할 수 있다.
  • 플러그인을 가져오는 것만으로는 아무 일도 일어나지 안흔ㄴ다.
  • 설정 방법으로는 rules에 plugin에 대한 규칙을 일일이 적용하는 방법과, extends에 설정해서 한 번에 적용하는 방법이 있다. (recommended, all 등)
• "rules" : 여기서 원하는 규칙을 직접 설정할 수 있다. extends 옵션을 통해서 가져온 규칙보다 우선 순위가 높다.
  • "off" : 규칙을 사용하지 않음
  • "warn" : 규칙을 경고로 사용
  • "error" : 규칙을 오류로 사용

설치 후 확인

npx eslint .