eslint检测时报错

配置是这样的：
安装的依赖：

"devDependencies": {"@babel/core": "^7.9.0","@babel/preset-env": "^7.9.0","autoprefixer": "^9.7.5","babel-core": "^6.26.3","babel-eslint": "^10.1.0","babel-helper-vue-jsx-merge-props": "^2.0.3","babel-loader": "^8.1.0","babel-plugin-syntax-jsx": "^6.18.0","babel-plugin-transform-vue-jsx": "^3.7.0","babel-preset-env": "^1.7.0","cross-env": "^7.0.2","css-loader": "^3.4.2","eslint": "^6.8.0","eslint-config-standard": "^14.1.1","eslint-loader": "^4.0.0","eslint-plugin-html": "^6.0.0","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.1","eslint-plugin-vue": "^6.2.2","extract-text-webpack-plugin": "^4.0.0-beta.0","file-loader": "^6.0.0","html-webpack-plugin": "^4.0.3","postcss-loader": "^3.0.0","rimraf": "^3.0.2","style-loader": "^1.1.3","stylus": "^0.54.7","stylus-loader": "^3.0.2","url-loader": "^4.0.0","vue-loader": "^15.9.1","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.11","webpack": "^4.31.0","webpack-cli": "^3.3.11","webpack-dev-server": "^3.10.3","webpack-merge": "^4.2.2"}

.eslintrc文件中：

{"extends" : "standard","plugins" : ["html"],"parser": "babel-eslint"
}

package.json文件中:

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js","build": "npm run clean && npm run build:client","clean": "rimraf dist","lint": "eslint --ext .js --ext .jsx --ext .vue client/","lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/","dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"}

并在webpack.config.base.js中添加了一条rule：

{test: /\.(vue|js|jsx)$/,loader: "eslint-loader",exclude: /node_modules/,enforce: 'pre'
}

表示对于.vue/.js/.jsx文件进行预处理，就是说在使用真正的loader加载之前都会先使用eslint-loader预先处理一遍，enforce的值有两个pre/post，可以在之前或者之后都可以指定对应的loader进行预处理或者后处理。

一开始运行npm run lint的时候，会有很多报错，然后在package.json中添加了"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"，他应该是会有自动修复功能的，但是设置完之后运行npm run lint-fix还是报错，报错信息是这样的：


G:\MyWeb\vue03-JTodo\client\App.vue11:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?9 | </template>10 |
> 11 | <script>| ^12 | import Header from './layout/header.vue'13 | import Footer from './layout/footer.jsx'14 | import Todo from './views/todo/todo.vue'G:\MyWeb\vue03-JTodo\client\layout\header.vue7:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?5 | </template>6 |
>  7 | <style lang="stylus" scoped>| ^8 | .main-header9 |     text-align center10 |     h1G:\MyWeb\vue03-JTodo\client\views\todo\item.vue2:16  error  Parsing error: Unexpected token1 | <template>
> 2 |     <div :class="['todo-item', todo.completed ? 'completed' : '']">|                ^3 |         <input4 |             type="checkbox"5 |             class="toggle"G:\MyWeb\vue03-JTodo\client\views\todo\tabs.vue7:17  error  Parsing error: Unexpected token5 |             <span6 |                 v-for="state in states"
>  7 |                 :key="state"|                 ^8 |                 :class="[state, filter === state ? 'actived' : '']"9 |                 @click="toggleFilter(state)"10 |             >G:\MyWeb\vue03-JTodo\client\views\todo\todo.vue8:13  error  Parsing error: Unexpected token6 |             autofocus7 |             placeholder="请输入待完成事项"
>  8 |             @keyup.enter="addTodo"|             ^9 |         >10 |         <item11 |             :todo="todo"✖ 5 problems (5 errors, 0 warnings)npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue02-todo@1.0.0 lint-fix: `eslint --fix --ext .js --ext .jsx --ext .vue client/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue02-todo@1.0.0 lint-fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-04-04T09_31_37_675Z-debug.log

根据报错信息：

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

参考的方案为：
在.eslintrc添加"extends": [“standard”, “plugin:vue/recommended”]：

{"extends" : ["standard", "plugin:vue/recommended"],"plugins" : ["html"],"parser": "babel-eslint"
}

结果运行npm run lint-fix出现了更多的error和warning：

G:\MyWeb\vue03-JTodo\client\index.js1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/attributes-order1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/no-v-html1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/this-in-template1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/attribute-hyphenation1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/html-closing-bracket-newline

在错误分析里面有一个与错误相关的链接：https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error

.eslintrc文件中的配置就变成了这样：

{"extends": ["standard", "plugin:vue/vue3-recommended"],"plugins" : ["vue"],"parser": "vue-eslint-parser","parserOptions": {"parser": "babel-eslint","ecmaVersion": 2017,"sourceType": "module"}
}

npm run lint-fix依然报错：

Oops! Something went wrong! :(ESLint: 6.8.0.ESLint couldn't find the config "plugin:vue/vue3-recommended" to extend from. Please check that the name of the config is correct.The config "plugin:vue/vue3-recommended" was referenced from the config file in "G:\MyWeb\vue03-JTodo\.eslintrc".If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue02-todo@1.0.0 lint-fix: `eslint --fix --ext .js --ext .jsx --ext .vue client/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vue02-todo@1.0.0 lint-fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-04-04T09_59_39_867Z-debug.log

把plugin:vue/vue3-recommended去掉，然后plugins中变成html，配置变成：

{"extends": ["standard"],"plugins" : ["html"],"parser": "vue-eslint-parser","parserOptions": {"parser": "babel-eslint","ecmaVersion": 2017,"sourceType": "module"}
}

重新运行npm run lint-fix就可以了。

上面的报错问题倒是解决了，其中的原因现在还未知，后面多学习一些再来补充！！！

eslint检测时报错相关推荐

安装oracle10.2.0.1 检测时报错 lookback adapter配置为系统的主网络适配器解决办法
检查完成.此次检查的总体结果为: 失败 <<<< 问题: 安装检测到系统的主 IP 地址是 DHCP 分配的地址. 建议案: Oracle 支持在具有 DHCP 分配的 IP ...
yolox用demo检测时报错TypeError: ‘module‘ object is not subscriptable
按教程Yolox 训练自己的数据集_m0_56171249的博客-CSDN博客_yolox训练自己的数据集: 将demo中的三处coco_classes修改后报这个错.在同级目录中的__init__. ...
下载最新版本Maven 3.3.9 ,检测安装是否成功时发现Java版本JDK却低于1.7时报错
下线最新版本Maven 3.3.9 ,检测安装是否成功时发现Java版本JDK却低于1.7时报错 cmd: mvn -v Exception in thread "main" ja ...
eslint检测node 内部模块报错解决方案
如上图所示,eslint检测node 内部模块报错解决, 解决方案: 代码: module.exports = {"env": {"browser": true ...
嘿嘿！报错不断呀！快哉快哉，检测nginx配置文件时报错，整它！
检测nginx配置文件时报错 1.报错具体信息 2.报错背景 3.排错分析过程 4.解决方法 5.验证 1.报错具体信息 nginx: [emerg] invalid number of argume ...
安装MATLAB时报错：提取错误安装dsp_doc_en_common时检测到以下错误：某安装路径（指定的路径无效）
疑难杂症,重装多少遍都无济于事,目前还没找到解决方法,期待大神的解救委曲求全的解决方法这个报错是在安装DSP System ToolBox时报错的,因此我们在安装时可以不勾选该工具包.查了一下这个 ...
git commit -m 提交时报错husky pre-commit (node v12.18.2)
git commit -m ""提交时报错husky > pre-commit (node v12.18.2) husky > pre-commit (node v12 ...
mysql数据库备份报错145_mysql数据库导出时报错mysqldump: Got error: 145的解决方法
在给mysql数据库备份时,报错:mysqldump: Got error: 145: Table './jxzhtopenfire/ofoffline' is marked as crashed a ...
vue中如何关闭eslint检测？
目录 vue中如何关闭eslint检测? eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格.这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下. ...

eslint检测时报错

eslint检测时报错相关推荐

最新文章

热门文章