NextJS ESLint 적용

개인적으로 프로젝트에 eslint 적용

프로젝트 생성

$ npx create-next-app proj_name

ESlint 수정

//.eslintrc.js
module.exports = {
  // 전역 변수 사용을 정의
  // 추가하지 않으면 ESLint 규칙에 걸림
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
    jest: true,
    // browser: true,
    // es6: true,
    // node: true,
  },

  parser: '@typescript-eslint/parser', // ESLint 파서 지정
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX를 파싱
    },
    ecmaVersion: 12, // Modern ECMAScript를 파싱
    sourceType: 'module', // import, export를 사용
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks', 'prettier', 'import'],
  rules: {
    // ESLint 규칙을 지정 extends에서 지정된 규칙을 덮어 쓸 수 있음
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'arrow-body-style': 'error',
    'prefer-arrow-callback': 'off',
    'no-var': 'error',
    'no-dupe-keys': 'error',
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
    // printWidth: ['error', ],
  },
  settings: {
    react: {
      version: 'detect', // 현재 사용하고 있는 react 버전을 eslint-plugin-react가 자동으로 감지
    },
  },
  extends: [
    'next/core-web-vitals',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended', // 해당 플러그인의 권장 규칙을 사용
    'plugin:prettier/recommended', // plugin과 eslint-config-prettier 한번에 설정
  ],
};

Prettier 수정

./prettierrc.js

module.exports = {
  bracketSpacing: false, // 객체 리터럴에서 괄호에 공백 삽입 여부
  endOfLine: 'auto', // EoF 방식, OS별로 처리 방식이 다름
  htmlWhitespaceSensitivity: 'css', // HTML 공백 감도 설정
  semi: true, // 세미콜론 사용 여부
  tabWidth: 2, // 탭 너비
  trailingComma: 'all', // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  useTabs: false, // 탭 사용 여부
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: 'auto',
  arrowParens: 'avoid',
  bracketSameLine: true,
  printWidth: 80,
};

proj.code-workspace 수정

{
  "folders": [
    {
      "path": "./"
    }
  ],
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.format.enable": true,
    "editor.formatOnPaste": false, // required
    "editor.formatOnType": false, // required
    "editor.formatOnSave": true, // optional
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.fixAll.eslint": true
    },
    "[javascript]": {
      "editor.rulers": [100],
      "editor.tabSize": 2
    },
    "[javascriptreact]": {
      "editor.rulers": [100],
      "editor.tabSize": 2
    },
    "[typescript]": {
      "editor.rulers": [100],
      "editor.tabSize": 2
    },
    "[typescriptreact]": {
      "editor.rulers": [100],
      "editor.tabSize": 2
    },
    "files.encoding": "utf8",
    "editor.tabSize": 2,
    "workbench.editor.wrapTabs": true,
    "workbench.editor.revealIfOpen": true,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ]
  },
  "extensions": {
    "recommendations": [
      "albert.tabout",
      "ritwickdey.liveserver",
      "esbenp.prettier-vscode",
      "ecmel.vscode-html-css",
      "formulahendry.auto-close-tag",
      // "vscodevim.vim",
      "naumovs.color-highlight",
      "dsznajder.es7-react-js-snippets",
      "ms-vsliveshare.vsliveshare",
      "ms-vsliveshare.vsliveshare-pack",
      "amatiasq.sort-imports",
      "rvest.vs-code-prettier-eslint",
      "dbaeumer.vscode-eslint"
    ]
  }
}