Vue3+TS Eslint配置

• 安裝插件

pnpm add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser

"eslint",
"eslint-config-airbnb-base",
"eslint-plugin-import",
"eslint-plugin-vue",
"@typescript-eslint/eslint-plugin",
"@typescript-eslint/parser",

.eslintrc 文件

extends：指定繼承的配置規則。
env：定義代碼運行的環境，如瀏覽器、Node.js以及ECMAScript 6。
parserOptions：指定解析器選項，支持最新的JavaScript語法和 JSX。
rules：自定義規則部分，可以根據項目需求覆蓋或添加規則。
plugins: 插件配置，Prettier 插件等。

// ESLint 檢查 .vue 文件需要單獨配置編輯器：
// https://eslint.vuejs.org/user-guide/#editor-integrations
{
  "root": true,
  // 定義代碼運行的環境，如瀏覽器、Node.js以及ECMAScript 6
  "env": {
    "node": true
  },
  // 指定繼承的配置規則
  "extends": [
    "plugin:vue/vue3-strongly-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  // 自定義規則部分，可以根據項目需求覆蓋或添加規則
  "rules": {
    // 代碼風格
    "block-spacing": [2, "always"],
    "brace-style": [2, "1tbs", {
      "allowSingleLine": true
    }],
    "comma-spacing": [2, {
      "before": false,
      "after": true
    }],
    "comma-dangle": [2, "never"],
    "comma-style": [2, "last"],
    "computed-property-spacing": [2, "never"],
    // indent: ["off", 2],
    "key-spacing": [2, {
      "beforeColon": false,
      "afterColon": true
    }],
    "keyword-spacing": [2, {
      "before": true,
      "after": true
    }],
    "linebreak-style": 0,
    "multiline-ternary": [2, "always-multiline"],
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    "no-unneeded-ternary": [2, {
      "defaultAssignment": false
    }],
    // quotes: [2, "single"],
    "semi": ["error", "never"],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [2, {
      "words": true,
      "nonwords": false
    }],
    "spaced-comment": [2, "always", {
      "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
    }],
    "switch-colon-spacing": [2, {
      "after": true,
      "before": false
    }],
    "object-curly-spacing": [2, "always"],
    // ES6
    "arrow-parens": [2, "as-needed"],
    "arrow-spacing": [2, {
      "before": true,
      "after": true
    }],
    // Vue - https://github.com/vuejs/eslint-plugin-vue
    "vue/multi-word-component-names": 0,
    "vue/no-v-html": 0,
    "vue/max-attributes-per-line": 0,
    "vue/require-default-prop": 0,
    "vue/singleline-html-element-content-newline": 0,
    "vue/require-explicit-emits": [2, {
      "allowProps": true
    }],
    // 支持定義any類型
    "@typescript-eslint/no-explicit-any": ["off"]
    // "vue/script-indent": [2, 4, {
    //   switchCase: 1
    // }]
  },
  "parser": "vue-eslint-parser",
  // 指定解析器選項，支持最新的JavaScript語法和 JSX
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  // 插件
  "plugins": [
    "vue",
    "@typescript-eslint"
  ]
}