vue+vite esLint检查，终端及浏览器显示语法错误

 现在越来越觉得要注意语法和代码规范了，自己配置的时候发现默认并不会把错误提示出来，研究后发现了解决方法，解决效果如图

解决方法:

vite:安装对应插件

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

 修改vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false, // 不缓存结果，每次都检查
      emitWarning: true, // 将 ESLint 警告作为浏览器警告
      emitError: true // 将 ESLint 错误作为浏览器错误
    })
  ]
});

webpack:

  devServer: {
    port: 9000,
    hot: true,
    overlay: {
      warnings: true, // 显示警告
      errors: true,   // 显示错误
    },
  },

vue3+vite项目配置eslint+Prettier

1.安装所需依赖

js：

npm install eslint eslint-plugin-vue  --save-dev

npm install prettier  --save-dev

ts： 

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2.vscode安装eslint插件

3.根目录新建文件

4.配置文件基础模板

..prettierrc

{
  "useTabs": false,
  "eslintIntegration": true,
  "singleQuote": false,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "printWidth": 150,
  "arrowParens": "avoid"
}

..prettierignore

/dist/*
!.github/**/
!.vscode/**/
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

src/**/*.scss
src/**/*.css

  .eslintrc.js
不使用ts的话去掉  'plugin:@typescript-eslint/recommended' // TypeScript 推荐规则 

即可

/**
 * Eslint 检查规则（A）
 * "off" 或者 0 -- 关闭规则
 * "warn" 或者 1 -- 将规则打开为警告（不影响退出代码）
 * "error" 或者 2 -- 将规则打开为错误（触发时退出代码为 1）
 */
module.exports = {
  root: true, // 禁用持续查找（root）
  env: {
    browser: true, // 启用浏览器全局变量
    node: true, // Node.js全局变量和Node.js范围
    es6: true // 启用ES6的功能
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly'
  },
  parserOptions: {
    parser: '@typescript-eslint/parser', // 解析器（parser）
    ecmaVersion: 2020, // ECMAScript 版本
    sourceType: 'module' // 源代码存在的位置，script | module
  },
  extends: [
    'eslint:recommended', // 核心功能和常见错误报告
    'plugin:vue/vue3-recommended', // Vue3 推荐规则
    'plugin:@typescript-eslint/recommended' // TypeScript 推荐规则 
  ],
  rules: {
    // Vue 相关规则
    'vue/html-self-closing': 0, // 关闭自闭合标签校验
    'vue/max-attributes-per-line': [
      2, 
      {
        singleline: 10, // 单行标签最大属性数为10
        multiline: { 
          max: 1, // 多行标签每行最大属性数为1
          allowFirstLine: false // 不允许首行属性
        }
      }
    ],
    'vue/no-multiple-template-root': 'off', // 关闭多根节点校验
    'vue/singleline-html-element-content-newline': 'off', // 关闭单行元素内容换行校验
    'vue/multiline-html-element-content-newline': 'off', // 关闭多行元素内容换行校验
    'vue/name-property-casing': ['error', 'PascalCase'], // name 属性值使用 PascalCase
    'vue/no-v-html': 'off', // 关闭禁止使用 v-html 校验

    // JavaScript 相关规则
    'arrow-spacing': [2, { before: true, after: true }], // 箭头函数前后空格
    'block-spacing': [2, 'always'], // 单行代码块花括号前后空格
    'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括号风格
    'comma-dangle': [2, 'never'], // 禁止尾随逗号
    'comma-spacing': [2, { before: false, after: true }], // 逗号前后空格
    'comma-style': [2, 'last'], // 逗号样式，位于行尾
    'eqeqeq': ['error', 'always', { null: 'ignore' }], // 使用 === 和 !==
    'indent': [2, 2, { SwitchCase: 1 }], // 缩进两个空格，SwitchCase 缩进1个空格
    'key-spacing': [2, { beforeColon: false, afterColon: true }], // 对象字面量冒号前后空格
    'keyword-spacing': [2, { before: true, after: true }], // 关键字前后空格
    'new-cap': [2, { newIsCap: true, capIsNew: false }], // 构造函数名大写
    'no-console': 'off', // 允许 console
    'no-multiple-empty-lines': [2, { max: 1 }], // 最多一个连续空行
    'no-new-object': 2, // 禁止使用 Object 构造函数
    'no-trailing-spaces': 2, // 禁止尾随空白
    'no-unused-vars': [0, { vars: 'all', args: 'none' }], // 禁止未使用变量
    'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 对象大括号内空格
    'semi': [2, 'never'], // 禁止分号
    'space-before-blocks': [2, 'always'], // 块前空格
    'space-in-parens': [2, 'never'], // 括号内不允许空格
    'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注释空格
    'template-curly-spacing': [2, 'never'], // 模板字符串 ${} 内不允许空格
  }
}

 .eslintignore 

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public/lib/
/docs
.husky
.local
/bin
Dockerfile