Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

緣起

最近將 ESLint 升級到 v9.5.0 後,發現之前的 .eslintrc.cjs 不能用了,而且原本在 VS Code 安裝的擴充套件 Prettier ESLint 也失效,導致存檔後不會再自動調整格式了 😭。

於是乎,昨天花了點時間研究 ESLint v9.5.0 的安裝與設定環境,並筆記自己的做法,給各位以及未來的自己參考 XD。

安裝套件

我的專案使用 Vue3 以及 TypeScript,這邊列出相關的套件內容(含當時安裝的版本):

  • @eslint/js:v9.5.0
  • @typescript-eslint/eslint-plugin:v7.14.1
  • @typescript-eslint/parser": v7.14.1
  • eslint: v9.5.0
  • eslint-define-config:v2.1.0
  • eslint-plugin-import: v2.29.1
  • eslint-plugin-vue: v9.26.0
  • typescript-eslint: v7.14.1
  • vue-eslint-parser:v9.4.3

▼ 想要一鍵安裝的朋友,請參考語法

$ npm install --save-dev eslint-define-config vue-eslint-parser @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-vue typescript-eslint

ESLint 設定檔

ESLint v9.5.0 預設接受的格式為 eslint.config.{js, mjs, cjs},我自己用的是 eslint.config.js。

你可以使用 npx eslint --init 初始化 eslint 的設定檔,也可以參考我的設定存在專案根目錄下:

import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import pluginImport from 'eslint-plugin-import'
import tsParser from '@typescript-eslint/parser'
import vueParser from 'vue-eslint-parser'

export default [
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    plugins: { import: pluginImport },
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        sourceType: 'module',
        ecmaVersion: 'latest'
      }
    },
    rules: {
      'no-undef': 'error',
      'no-unused-vars': 'error',
      'semi': ['error', 'never'],
      'quotes': ['error', 'single'],
      'no-console': ['error', { allow: ['warn', 'error'] }],
      'space-before-function-paren': ['error', 'always'],
      'no-magic-numbers': ['error', { ignore: [0, 1, 2.718281828459045, Math.PI] }],
      'no-throw-literal': ['error'],
      'vue/singleline-html-element-content-newline': 'off',
      'vue/max-attributes-per-line': ['error', {
        'singleline': {
          'max': 10
        },      
        'multiline': {
          'max': 1
        }
      }],
      'vue/require-default-prop': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-non-null-assertion': 'warn',
      'import/order': ['error', { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] }],
      'import/named': 'error',
      'import/namespace': 'error',
      'import/default': 'error',
      'import/export': 'error'
    }
  }
]

我使用了兩個 parser:@typescript-eslint/parser ,vue-eslint-parser;以及兩個 plugin:eslint-plugin-vue,eslint-plugin-import

如果你沒有用 typescript,可以移除 typescript 的 parser 以及 eslint;如果你不想用 import plugin,可以移除 eslint-plugin-import。

用於 React 的 ESLint 設定檔

2024.07.02 更新

如果你用的是 React,可以參考下面的這個設定檔,並安裝對應的套件。這是我實際用在 Next.js 的開發專案上的設定。

import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginImport from 'eslint-plugin-import'
import tsParser from '@typescript-eslint/parser'
import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'
import { fixupConfigRules } from '@eslint/compat'

export default [
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsParser,
      sourceType: 'module',
      ecmaVersion: 'latest',
    },
    rules: {
      ...tseslint.configs.recommended.rules,
    },
  },
  ...fixupConfigRules(pluginReactConfig),
  {
    files: ['**/*.{js,mjs,jsx,tsx}'],
    languageOptions: {
      parser: tsParser,
      sourceType: 'module',
      ecmaVersion: 'latest',
    },
    plugins: { import: pluginImport },
    rules: {
      'no-undef': 'error',
      'no-unused-vars': 'error',
      'semi': ['error', 'never'],
      'quotes': ['error', 'single'],
      'no-console': ['error', { allow: ['warn', 'error'] }],
      'space-before-function-paren': ['error', 'always'],
      'no-magic-numbers': ['error', { ignore: [0, 1, 2.718281828459045, Math.PI] }],
      'no-throw-literal': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-non-null-assertion': 'warn',
      'import/order': ['error', { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] }],
      'import/named': 'error',
      'import/namespace': 'error',
      'import/default': 'error',
      'import/export': 'error'
    }
  }
]

安裝 VS Code 擴充套件

我棄用了 Prettier,因為 printWidth 設定太過麻煩,屬性換行的設定也太嚴格,我無法接受 😂。

我沒有安裝 Prettier 擴充套件

因為棄用,所以我的 VS Code 沒安裝 Prettier 擴充套件,如果你們有安裝且跟 ESLint 衝突了,可能要另外安裝相關的 prettier parser 或 plugin 了。
而這篇文章是針對「沒有安裝 Prettier 擴充套件」而寫,就不特別介紹 Preitter 囉。

▼ 只需要安裝 ESLint 擴充套件

設定 setting.json

使用 Cmd / Ctrl + Shift + P 快捷鍵,開啟 VS Code 裡的 setting.json 檔案,加入以下設定:

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

只要加入這三個設定就好,其他跟 Prettier 有關的 format 設定都不需要加,如果你原本有加請把它刪除,不然 VS Code 可能會優先用內建的格式器調整你的程式碼。

小結

如果你只安裝 ESLint 擴充套件,也照著我的設定規則做調整,那存檔時應該會自動修正格式了。如果有問題歡迎留言給我唷!

歡迎給我點鼓勵,讓我知道你來過 :)

9
Subscribe
Notify of
guest

2 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Charles
Charles
3 days ago

想請問 max-len 的問題,只用 ESLint 是不是就沒辦法自動格式化了