Next.js: TypeScript + ESLint (@typescript-eslint) + Prettier 설정 (한국어는 영어 문서 아래에 있습니다)

en-US.md

😉 Next.js: TypeScript + ESLint (@typescript-eslint) + Prettier Setup

📅 Write: 2020/02/03

✅ Before you follow this tutorial, create the Next.js project first.

1. Set up TypeScript at your project.

Check Next.js TypeScript Document

2. Install Dependencies

yarn add -D eslint eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

3. Make .eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "react-app",
    "plugin:prettier/recommended"
  ],
  plugins: ["@typescript-eslint", "react"],
  rules: {}
};

4. Make .prettierrc

💡 If you have a Prettier setting that you used, you will be familiar with using that setting.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

5. Add lint command at package.json

"scripts": {
  ...
  "lint": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore ."
},

6. (Option) Set up VSCode

💡 This paragraph is a setting method for Visual Studio Code.

⬆️ Install ESLint extension

⬆️ Install Prettier extension

⬆️ Search format

1. ✅ Turn on Format On Save
2. 🔄 Set Default Formatter to esbenp.prettier-vscode

ko-KR.md

😉 Next.js: TypeScript + ESLint (@typescript-eslint) + Prettier 설정

📅 Write: 2020/02/03

✅ 해당 튜토리얼을 따라하시기 전에, Next.js 프로젝트를 먼저 생성하세요.

1. TypeScript 적용

공식 Next.js 'TypeScript' 메뉴얼을 따라하십시오.

2. 필요 패키지 설치

yarn add -D eslint eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

3. .eslintrc.js 설정

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "react-app",
    "plugin:prettier/recommended"
  ],
  plugins: ["@typescript-eslint", "react"],
  rules: {}
};

4. .prettierrc 설정

💡 기존에 사용하던 Prettier 설정이 있으시다면, 그 설정을 사용하시는 것이 익숙하실겁니다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

5. package.json 에 Lint 명령어 추가

"scripts": {
  ...
  "lint": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore ."
},

6. (Option) Visual Studio Code 설정

💡 이 문단은 Visual Studio Code에서 저장 시 자동으로 Prettier를 이용하여 코드를 다듬어주는 기능을 설정하는 방법입니다.

⬆️ ESLint 확장기능 설치

⬆️ Prettier 확장기능 설치

⬆️ format 검색

1. ✅ Format On Save 켜기
2. 🔄 Default Formatter 를 esbenp.prettier-vscode 로 설정

This is my current .eslintrc.js that works in VSCode 1.44.2:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  plugins: [],
  rules: {
    indent: ['error', 2, { SwitchCase: 1 }],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    '@typescript-eslint/explicit-function-return-type': [
      'error',
      {
        allowExpressions: true,
      },
    ],
  },
};

But i'm still curious, why eslint-config-react-app doesn't work for me. I just tried as in your example, but nothing works, i've tested with useEffect() hook with zero deps array, though there was a dependencies, it didn't warn me about it. If use my above config, everything works.

Sorry I didn't know much about ESLint, so I couldn't give you the correct answer.

I'm glad you found a setting that works well. 😀

But why eslint-config-react-app does work for you? 😂