Prettier, Eslint, tsconfig 설정

Prettier 설치

npm i -D prettier

 

Prettier 파일 설정

root에 .prettierrc.js 생성

module.exports = {
  singleQuote: true, //인용부호 작은 따옴표 사용
  semi: true, //모든 문법 끝에 세미콜론 추가
  useTabs: false,
  tabWidth: 2, //탭 공백 넓이
  trailingComma: 'none', //후행 쉼표 제거
  printWidth: 80, //줄바꿈 넓이
  bracketSpacing: true, // 브라켓 간격
  arrowParens: 'avoid', //arrow function 매개변수 하나일때 괄호 제거
  jsxSingleQuote: true //jsx 인용부호 작은 따옴표 사용
};

ESLint 파일 설정

root에 .eslintrc 파일 생성
리액트 프로젝트에서도 사용하고있는 설정을 그대로가져 왔다.
추가된것은  "plugin:@next/next/recommended", ingnorePatterns 에 "next.config.js"

{
  "parser": "@typescript-eslint/parser", 
  "root": true,
  "extends": [ 
    "plugin:@next/next/recommended",
    "plugin:prettier/recommended", 
    "plugin:react/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "prettier"
  ],
  "plugins": ["prettier", "prefer-arrow"], 
  "parserOptions": { 
    "ecmaVersion": 2018, 
    "sourceType": "module",
    "ecmaFeatures": { 
      "jsx": true
    }
  },
  "rules": {
    "prefer-arrow/prefer-arrow-functions": [
      "error",
      {
        "disallowPrototype": true,
        "singleReturnOnly": false,
        "classPropertiesAllowed": false
      }
    ], 
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": 0,
    "react/jsx-filename-extension": 0,
    "prettier/prettier": "error", 
    "react/display-name": "off"
  },
  "ignorePatterns": ["node_modules/", "next.config.js"]
  "settings": {
    "react": {
      "version": "detect" 
    }
  }
}

추가된 rules는 검색을해서 알아보면된다.

ESLint plugin 설치

npm i -D eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin 
@typescript-eslint/parser @next/eslint-plugin-next eslint-plugin-react eslint-plugin-prefer-arrow

tsconfig.json 설정

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": "src",
    "rootDir": ".",
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src", "next-env.d.ts"],
  "exclude": ["node_modules", ".next"]
}