MVT开发文档

主题

ESLint 检查工具 ​

检测并修复 JavaScript/TypeScript 代码中的问题

安装 ​

bash
npm init @eslint/config

VSCode 插件 ​

安装ESLint插件

配置 ​

配置格式规则 ​

在项目根目录下创建.eslintrc.js文件，并添加配置内容

js
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  // parserOptions: {
  //   parser: '@typescript-eslint/parser', //'babel-eslint',
  //   sourceType: 'module',
  // },
  rules: {
    // 'prettier/prettier': 'warn',     // 依赖 eslint-plugin-prettier
    semi: ["error", "always"],
    quotes: [
      "warn",
      "single",
      { allowTemplateLiterals: true, avoidEscape: true },
    ],
    "no-empty": ["warn", { allowEmptyCatch: true }],
    "no-console": process.env.NODE_ENV === "prod" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "prod" ? "warn" : "off",
    "space-before-function-paren": "off",
    "no-var": "error",
    "no-multiple-empty-lines": [
      "error",
      {
        max: 1,
      },
    ],
    "prefer-const": "warn",
    "no-use-before-define": "warn",
    "no-irregular-whitespace": "warn",
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        argsIgnorePattern: "^_",
        caughtErrorsIgnorePattern: "^_",
        ignoreRestSiblings: true,
      },
    ],
    "no-useless-escape": "warn",
    "@typescript-eslint/no-empty-object-type": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/prefer-ts-expect-error": "warn",
    "@typescript-eslint/no-inferrable-types": "warn",
    "@typescript-eslint/no-namespace": "warn",
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-var-requires": "error",
    "@typescript-eslint/no-empty-function": "warn",
    "@typescript-eslint/no-use-before-define": "warn",
    "@typescript-eslint/ban-ts-comment": "warn",
    "@typescript-eslint/no-non-null-assertion": "warn",
    "@typescript-eslint/explicit-module-boundary-types": "warn",
    // '@typescript-eslint/ban-types': 'warn',    // v9 eslint 移除了该规则
    // 'vue/script-setup-uses-vars': 'error',     // v9 eslint 移除了该规则
    "vue/no-useless-template-attributes": "warn",
    "vue/valid-v-slot": [
      "warn",
      {
        // modifiers: ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout'],
        allowModifiers: false, // 允许使用修饰符
      },
    ],
    "vue/no-multiple-template-root": "off",
    "vue/no-unused-vars": "warn",
    "vue/require-valid-default-prop": "warn",
    "vue/v-slot-style": "error",
    "vue/no-mutating-props": "warn",
    "vue/no-v-html": "warn",
    "vue/custom-event-name-casing": "warn",
    "vue/attributes-order": "warn",
    "vue/one-component-per-file": "warn",
    "vue/max-attributes-per-line": "off",
    "vue/multiline-html-element-content-newline": [
      "warn",
      {
        ignores: ["pre", "textarea"], // 忽略 <pre>、<textarea> 等
      },
    ],
    "vue/singleline-html-element-content-newline": [
      "warn",
      {
        ignoreWhenNoAttributes: true,
        ignoreWhenEmpty: true,
        ignores: [
          "pre",
          "textarea",
          "a",
          "span",
          "b",
          "i",
          "em",
          "strong",
          "code",
          "mark",
          "img",
          "input",
          "label",
          "div",
        ],
      },
    ],
    "vue/attribute-hyphenation": "warn",
    "vue/require-default-prop": "warn",
    "vue/multi-word-component-names": "off",
    "vue/html-closing-bracket-newline": [
      "warn",
      {
        singleline: "never", // 单行标签：闭合括号不换行（如 <div>）
        multiline: "never", // always 多行标签：闭合括号必须换行（如换行后的 <div ...>）
      },
    ],
    "vue/html-self-closing": [
      "warn",
      {
        html: {
          void: "always", // 空标签（如 <img>）使用自闭合
          normal: "never", // 普通标签（如 <div>）不使用自闭合
          component: "always", // 组件（如 <MyComponent>）使用自闭合
        },
      },
    ],
  },
};

配置忽略语法检查 ​

在根目录下创建.eslintignore文件，并添加配置内容

bash
node_modules    # node_modules目录 忽略语法检查
dist            # dist目录 忽略语法检查
...

配置 VSCode 自动格式化 ​

在settings.json中添加配置

json
{
  "eslint.enable": true, // 打开eslint开关--必要条件
  "editor.codeActionsOnSave": {
    // 编辑器.代码保存时进行的操作--非必要
    "source.fixAll.eslint": "always" // 通过eslint进行代码修复：总是如此
  },
  "eslint.validate": [
    // eslint 需要校验的文件（js,jsx,ts,tsx,vue)--必要条件
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue"
  ]
}

Cli 执行 ​

命令行内执行

bash
npx eslint 'src/' --fix-dry-run  # 仅检查不修复src目录下所有文件
npx eslint . --fix                  # 检查并修复所有文件
npx eslint  --fix 'src/**/*.{ts,vue}' --quiet # 检查并修复src目录下所有ts、vue文件（只显示error, 忽略warn）