2021-06-08 eslint的使用

Eslint

官网
HBuilderX eslint一键修复功能使用说明(适用于HBuilderX 2.6.8之前的版本)

HBuilderX 使用eslint实时校验、自动修复代码错误(适用于HBuilderX 2.6.8+)
eslint - vue 项目中 package.json 和 .eslintrc.js 配置
Prettier的三种使用场景和使用方法
Vue3中eslint代码格式化prettier和standard规则比较(为什么推荐使用prettier)

rules: { "规则名": [规则值, 规则配置] }

例如:

{"rules": {"semi": ["error", "always"],//总是会自动增加分号"quotes": ["error", "double"]//强制使用双引号}
}

“off” or 0 - 关闭规则
“warn” or 1 - 将规则视为一个警告(不会影响退出码)
“error” or 2 -将规则视为一个错误 (退出码为1)

下面也是同理的:

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
“error” 或2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

下载安装hbuilderx
下载安装eslint的插件,可以去uni-app的插件市场下载,或者直接使用下面的链接的,导入hbuilderx即可。
eslint-plugin-vue - DCloud 插件市场
eslint-js - DCloud 插件市场

新建或导入项目

创建方式一:vue-cli

1.运行npm init 生成package.json
在这里插入图片描述

2.运行eslint --init 生成 .eslintrc.js
在这里插入图片描述
然后可以看到项目目录中:
在这里插入图片描述

创建方式二----》Hbuilderx

中文版本的:【英文版本的使用类似的】
途径一:工具==》设置==》插件配置===》【eslint-js、eslint-vue】==》.eslintrc.js文件可以去编辑规则
如下图:
在这里插入图片描述
途径二:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意:配置成功后,需要重启hbuilderx,然后再导入项目,这是保险的做法。

常用规则可参考:
Vue3中eslint代码格式化prettier和standard规则比较(为什么推荐使用prettier)
https://www.jianshu.com/p/cae924a15409
https://www.cnblogs.com/mengfangui/p/9518718.html
https://www.cnblogs.com/smzd/p/9848691.html

手把手教你配置 Vue的eslint


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部