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