报错一:
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
文章来源:https://www.toymoban.com/news/detail-478522.html
文章来源地址https://www.toymoban.com/news/detail-478522.html
到了这里,关于vue3-webpack遇到Eslint各种报错 Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!