vue3-webpack遇到Eslint各种报错

报错一：

VUE3 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor

8:1  error  Delete `⏎`  prettier/prettier
✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option

原因：与创建项目时选择的 eslint 的设置问题，可以通过“—fix”选项修复
.解决方法：
package.json
//原代码

 "scripts": {
    ...
    "lint": "vue-cli-service lint"
  },
 

更改：

"scripts": {
   ...
    "lint": "eslint --fix --ext .js,.vue src"
  },

报错二：
提示建议我们使用特殊注释禁用某些警告。使用//eslint disable next line忽略下一行。使用/eslint disable/忽略文件中的所有警告。

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决办法：
我们在 .eslintrc.js 里面注释掉 plugin:prettier/recommended 就可以了

'extends': [
    // 'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
    //'plugin:prettier/recommended'
  ],

报错三：
这个报错是建议我们使用 驼峰命名

6:9  error  Component name "My" should always be multi-word  vue/multi-word-component-names

解决办法：
① 按照规则走，改驼峰命名
②但是像以上我就一个 My ，这样要写个驼峰不是很合理，所以可以在 .eslintrc.js 文件写一条规则：

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 关闭驼峰命名规则
    'vue/multi-word-component-names': 0,
  },

报错四：

Error-Do not use “// @ts-ignore“ because it alters compilation errors问题的处理

Error-Do not use “// @ts-ignore“ because it alters compilation errors问题的处理

使用TS编写代码时，有些情况下，比如第三方的库对象，我们想增加一些属性，并且确认是没问题的，但是TS检查时会报错导致不能正常编译运行

解决办法：

我们通过添加// @ts-ignore来告诉TS该条语句不检查类型问题，此时是可以正常编译了，但是// @ts-ignore这条注释标红了很难受：
这个我们可以通过修改.eslintrc.js文件来消除该提示：

module.exports = {
	...
	rules: {
		...
		"@typescript-eslint/ban-ts-comment": "off",
	}
}

报错五：使用Vue3 Script Setup时 ESLint 报错 ‘defineProps‘ is not defined

Vue 3 的 Script Setup 语法引入了 defineProps、defineEmits、defineExpose、withDefaults 的编译器宏。然而某些情况下，ESLint 会报错以上编译器宏函数未定义。

本文将介绍两种解决方案来解决这个问题（假定你的项目使用 Vue-Cli 进行初始化）。

Step 1. 检查 eslint-plugin-vue 的版本

npm list eslint-plugin-vue

若版本在 v8.0.0 以上，跳转到 Step 2，否则直接到 Step 3 的内容。

Step 2. 版本为 v8.0.0+

打开 .eslintrc.js 文件并修改如下：

  env: {
    node: true,
    // The Follow config only works with eslint-plugin-vue v8.0.0+
    "vue/setup-compiler-macros": true,
  },

Step 3. 版本为 v8.0.0 以下

打开 .eslintrc.js 文件并修改如下：

  // The Follow configs works with eslint-plugin-vue v7.x.x
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },

 更多的Eslint编写参考如下:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'prettier/prettier': 'error',
    'no-extra-semi': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-interface': 'off'
  }
}

源头解决(不推荐)

Vue 项目报错：‘XXXXX‘ is not defined ( no-undef ) 解决方法

问题描识：使用vue的时候，使用一个全局变量或在当前方法调用别的方法，ESLint的语法会出现ESLint: ‘Aliplayer’ is not defined. (no-undef)，说未定义，这时我们可以添加配置，取消这个校验。
在node_modules文件夹下面的eslint文件夹下面的conf里面的eslint-recommended.js文件注释掉"no-undef": “error”,这行代码

node_modules

        --eslint

                --conf

                        --eslint-recommended.js