灏天阁

vue3.2/Vite/Ts2: eslint校验代码工具配置

· Yin灏

安装 eslint

pnpm i eslint -D

生成配置文件

npx eslint --init

.eslintrc.cjs 配置文件

module.exports = {
    "env": { // 运行环境
        "browser": true, // 浏览器端
        "es2021": true, // es2021
    },
    "extends": [ // 规则继承
        // 比如：函数不能重名，对象不能出现重复 key
        "eslint: recommended",
        // vue3语法规则
        "plugin:vue/vue3-essential",
        // ts 语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    // 要为特定类型的文件指定处理器
    "overrides": [
        // 如：markdown
    ],
    // 指定解析器
    // 1. Esprima 默认解析器
    // 2. Babel-Eslint babel 解析器
    // 3. @typescript-eslint/parser ts 解析器
    "parser": "@typescript-eslint/parser",
    // 指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest", // 校验 ECMA 最新版本
        "sourceType": "module", // 设置 script (默认)，或者 module 代码在 ECMAScipt 模块中
    },
    // Eslint 支持使用第三方插件，在使用插件之前，必须使用 npm 安装它
    // 该 eslint-plugin- 前缀可以从插件名称省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    // eslint 规则
    "rules": {}
}

vue3 环境代码校验插件

  1. 需要安装的插件解析

让所有与 prettier 规则存在冲突的 eslint rules 失效，并使用 prettier 进行代码检查

  • “eslint-config-prettier”: “^8.6.0”
  • “eslint-plugin-import”: “^2.27.5”
  • “eslint-plugin-node”: “^11.1.0”

运行更漂亮的 eslint，使 prettier 规则优先级更高，eslint 优先级低

  • “eslint-plugin-prettier”: “^4.2.1”

vue.js 的 eslint 插件（查找 vue 的语法错误，发现错误指令，查找违规风格指南）

  • “eslint-plugin-vue”: “^9.9.0”

该解析器允许使用 eslint 校验所有 babel code

  • “@babel/eslint-parser”: “^7.19.1”
  1. 安装指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
  1. 修改 .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
        jest: true
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: [ 
        'eslint: recommended',
        'plugin: vue/vue3-essential',
        'plugin: @typescript-eslint/recommended',
        'plugin: prettier/recommended'
    ],
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    /*
     * 'off' 或 0: 关闭规则
     * 'warn' 或 1: 打开规则作为警告，不影响代码运行
     * 'error' 或 2: 规则作为一个错误，代码不能执行，界面报错
     */
    rules: {
        'no-var': 'error',
        'no-multiple-empty-lines': ['warn', { max: 1 }],
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-unexpected-multiline': 'error',
        'no-useless-escape': 'off',
        // typescript
        '@typescript-eslint/no-unused-vars': 'error',
        '@typescript-eslint/prefer-ts-expect-error': 'error',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off',
        '@typescript-eslint/semi': 'off',
        // eslint-plugin-vue
        'vue/multi-word-component-names': 'off',
        'vue/script-setup-uses-vars': 'error',
        'vue/no-mutating-props': 'off',
        'vue/attribute-hyphenation': 'off'
    }
}
  1. .eslintignore 忽略文件
dist
node_modules
  1. 运行脚本
// package.json
// ...
"scripts": {
    "lint": "eslint src", // 校验 src 文件夹下的代码
    "fix": "eslint src --fix" // 将不符合规则的语法进行纠正
}
// ...

- Book Lists -