Written by JJoo
on 

Next.js + TypeScript + ESLint + Prettier 프로젝트 설정하기

Next.js와 TypeScript로 프로젝트 구성하기

nextjs 프로젝트를 설치

일단 nextjs 프로젝트를 설치한다.

npx create-next-app '프로젝트명'

따로 폴더를 생성하지 않고 현재 위치에 프로젝트를 만들고 싶을 경우

npx create-next-app .

nextjs 에 typescript 설정하기

nextjs에 typescript 설정에 대한 nextjs의 공식문서

https://nextjs.org/learn/excel/typescript

  1. 최상단 루트에 비어있는 tsconfig.json 생성
  2. typescript, @types/react, @types/node 설치 a. npm i -D typescript @types/react @types/node
  3. npm run dev 하면 비어있던 tsconfig.json에 기본 설정들이 알아서 채워진다.(편함)
  4. _app.js를 _app.tsx로 변경한다 a. 
     import { AppProps } from 'next/app'
    
     function App({ Component, pageProps }: AppProps) {
       return <Component {...pageProps} />
     }
    
     export default App
  5. index.js를 index.tsx로 변경

eslint 및 pritter 설정하기

  1. vscode의 extensions에서 eslint, prettier를 추가한다.

    vscode의 extensions에서의 eslint, prettier

  2. esllint 및 typescript, typescript eslint 설치 a. npm i -D typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import

  3. .elintrc.json 파일 추가

     {
   "parser": "@typescript-eslint/parser",

   "parserOptions": {
     "project": "./tsconfig.json",
     "ecmaVersion": 2020,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true,
       "tsx": true
     }
   },
   "env": {
     "node": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "plugins": ["@typescript-eslint"]
 }

  4. typescript-eslint 실행

    기본적으로 js 확장자만 검사하므로

    npx eslint --ext .js,.ts src

    또는

    npx eslint src/**/*

  5. prettier 적용

    a. prettier, eslint-plugin-prettier, eslint-config-prettier 설치

    b. npm i -D prettier eslint-plugin-prettier eslint-config-prettier

  6. eslintrc.json에 설정을 추가해준다.

    a. "extends": […, "plugin:prettier/recommended", ]

    • eslint-config-prettier 가 8.0.0로 업데이트 되고나서는 “prettier/@typescript-eslint”를 포함시키지 않는다.

    b. eslint-plugin-prettier + eslint-config-prettier 동시 적용

    c. prettier 규칙과 충돌하는 @typescript-eslint/eslint-plugin 규칙 적용

  7. .prettierrc 추가하기

    a. 공식 문서 https://prettier.io/docs/en/configuration.html

    내가 적용한 .prettierrc

     {
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true
 }

  8. react에 eslint, prettier 적용하기

    a. eslint-plugin-react와 eslint-plugin-react-hooks 설치

    b. npm i -D eslint-plugin-react eslint-plugin-react-hooks --save-dev

    c. .eslintrc > plugin , extends, rules 부분에 설정 추가

    .eslintrc

     {
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended", 
     "prettier",
     "plugin:prettier/recommended"
   ],
   "plugins": ["import", "react-hooks", "@typescript-eslint"],
   "rules": {
   	"react/react-in-jsx-scope": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-var-requires": 0,
     "prettier/prettier": [
       "error",
       {
         "endOfLine": "auto"
       }
     ]
   }
 }

IDE에 설정 추가하기 - vscode

setting.json에 eslint로 체크할 언어 등 아래 설정 추가

setting.json

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
}

"autoFix": true가 default로 들어가게 업데이트가 되서 경고가 발생하므로 "autoFix": true를 빼고 간단하게 적용할 수 있다.

{
  "eslint.validate": [
    "vue",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

최종 파일

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "tsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended", 
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "import", 
    "react-hooks", 
    "@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-var-requires": 0,
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

eslint, prenttier 관련 설치 모듈

Discussion and feedback