2021-06-08 eslint的使用

古城微笑少年丶 2022-10-05 08:57 48阅读 0赞

## Eslint ##

[官网][Link 1]  
[HBuilderX eslint一键修复功能使用说明（适用于HBuilderX 2.6.8之前的版本）][HBuilderX eslint_HBuilderX 2.6.8]

[HBuilderX 使用eslint实时校验、自动修复代码错误（适用于HBuilderX 2.6.8+）][HBuilderX _eslint_HBuilderX 2.6.8]

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][hbuilderx]  
下载安装eslint的插件，可以去uni-app的插件市场下载，或者直接使用下面的链接的，导入hbuilderx即可。  
[eslint-plugin-vue - DCloud 插件市场][eslint-plugin-vue - DCloud]  
[eslint-js - DCloud 插件市场][eslint-js - DCloud]

### 新建或导入项目 ###

#### 创建方式一：vue-cli ####

1.运行npm init 生成`package.json`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]

2.运行eslint --init 生成 `.eslintrc.js`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]  
然后可以看到项目目录中：  
![在这里插入图片描述][20210608102833382.png]

#### 创建方式二----》Hbuilderx ####

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

常用规则可参考：  
[Vue3中eslint代码格式化prettier和standard规则比较（为什么推荐使用prettier）][Vue3_eslint_prettier_standard_prettier]  
[https://www.jianshu.com/p/cae924a15409][https_www.jianshu.com_p_cae924a15409]  
[https://www.cnblogs.com/mengfangui/p/9518718.html][https_www.cnblogs.com_mengfangui_p_9518718.html]  
[https://www.cnblogs.com/smzd/p/9848691.html][https_www.cnblogs.com_smzd_p_9848691.html]

[手把手教你配置 Vue的eslint][Vue_eslint]

[Link 1]: https://eslint.bootcss.com/docs/user-guide/getting-started
[HBuilderX eslint_HBuilderX 2.6.8]: https://ask.dcloud.net.cn/article/36532
[HBuilderX _eslint_HBuilderX 2.6.8]: https://ask.dcloud.net.cn/article/37070
[hbuilderx]: https://www.dcloud.io/hbuilderx.html
[eslint-plugin-vue - DCloud]: https://ext.dcloud.net.cn/plugin?id=2005
[eslint-js - DCloud]: https://ext.dcloud.net.cn/plugin?id=2037
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]: /images/20221005/19440b479e97478086c6b39bacccfa0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]: /images/20221005/de6358683dac42aba48606d4d344b68f.png
[20210608102833382.png]: /images/20221005/71ddc9c5f95e475491a9396d8df3c260.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 2]: /images/20221005/81be0f4c60dc4b0081a0dc6d680ce00b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 3]: /images/20221005/8fa5dfecbed840aaaff7784bfd0203ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 4]: /images/20221005/8c232e29b72249cdb045bbce49d8cae8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 5]: /images/20221005/3f214a526fb74bc9ab70f7f6a9350635.png
[Vue3_eslint_prettier_standard_prettier]: https://blog.csdn.net/qq_21567385/article/details/109136668
[https_www.jianshu.com_p_cae924a15409]: https://www.jianshu.com/p/cae924a15409
[https_www.cnblogs.com_mengfangui_p_9518718.html]: https://www.cnblogs.com/mengfangui/p/9518718.html
[https_www.cnblogs.com_smzd_p_9848691.html]: https://www.cnblogs.com/smzd/p/9848691.html
[Vue_eslint]: https://segmentfault.com/a/1190000024509889