vite：vite-vue项目开启eslint代码校验vite：vite快速构建的Vue项目，开启eslint代码格式校

安装对应依赖和插件

npm install eslint vite-plugin-eslint --save-dev

执行命令，选择对应配置，最后生成 .eslintrc.cjs/.eslintrc.js 配置文件

npx eslint --init

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
        {
            files: ['src/**/*.vue'],
            rules: {
                'vue/multi-word-component-names': 0
            }
        }
    ],
    // "parser": "@typescript-eslint/parser",
    // "parserOptions": {
    //     "ecmaVersion": "latest",
    //     "sourceType": "module"
    // },
    "parser": "vue-eslint-parser",
    "parserOptions": { "parser": "@typescript-eslint/parser" },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": { // 0 1 2 -> off warning error
        "indent": [2, 2], // 缩进2个空格
        "semi": [2, 'never'], // 禁用行尾使用分号
        "no-extra-semi": [2], // 禁止不必要的分号
        "quotes": [2, 'single'], // 使用单引号
        'comma-dangle': [2, 'never'], // 禁止末尾逗号
        'eol-last': 2, // 文件以换行符结束
        'no-multi-spaces': 2, // 禁止多余的空格
        'no-multiple-empty-lines': [2, { // 空行不能超过 1 行
            'max': 1
        }],
        'no-trailing-spaces': 2, // 一行结束后面不要有空格
        'space-before-function-paren': [2, 'never'], // 函数定义时括号前面不要有空格
        'spaced-comment': [2, 'always', { // 注释时要有空格
            'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
        }]
    }
}

项目根目录下创建eslint忽略文件：.eslintignore

/dist
/node_modules
.eslintrc.cjs
vite.config.ts
/src/vite-env.d.ts

vite.config.ts中配置开启eslint

import eslintPlugin from 'vite-plugin-eslint'

eslintPlugin({
    include: ['src/**/*.ts', 'src/**/*.vue']
})

vscode安装eslint插件，项目运行后会根据配置提示代码出错的地方

踩坑一

踩坑二