[Next.js] TypeScript 프로젝트 ESLint(Airbnb), Prettier 설정

기존 리액트에서 둘을 사용하는 것에 익숙해졌는데 Next.js에서는 따로 추가가 필요하다.

ESLint

airbnb 스타일 규칙을 사용하기 위해 필수 종속성까지 한번에 받는다.
npx install-peerdeps --dev eslint-config-airbnb

또는
npm install --save-dev eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-ally

이 프로젝트에선 Typescript를 사용할 것이기 때문에 관련 패키지도 받아준다.
npm install --save-dev typescript eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

Prettier

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

세팅

//.eslintrc.js

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  parserOptions: {
    project: "./tsconfig.json",
  },
  env: {
    node: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended",
  ],
  rules: {
    // 'React' must be in scope when using JSX 에러 지우기(Next.js)
    "react/react-in-jsx-scope": "off",
    // ts파일에서 tsx구문 허용(Next.js)
    "react/jsx-filename-extension": [1, { extensions: [".ts", ".tsx"] }], //should add ".ts" if typescript project
  },
};

참고링크 : Airbnb’s ESLint config

//.prettierrc.js

module.exports = {
  printWidth: 80, //코드 한줄 최대치
  semi: true, //코드 마지막에 세미콜론
  singleQuote: false, //문자열을 작은따옴표로 작성할것인지(false = 큰 따옴표)
  trailingComma: 'all', //객체나 배열 등에 맨 마지막에도 콤마
  tabWidth: 2, //들여쓰기 2칸(스페이스 2칸)
  bracketSpacing: true, //객체 리터럴에서 괄호에 공백 삽입 여부
  endOfLine: 'auto',
  useTabs: false, //탭 대신 스페이스
  arrowParens: 'avoid', // 화살표 함수에서 매개변수를 하나만 받을때 괄호 생략
};

npx eslint . --ext .js,.jsx,.ts,.tsx
로 설정이 제대로 됐는지 확인할 수 있다는데 쓸데없는 에러가 좀 많이 나오는 편이다.