当前位置:   article > 正文

关于Vue项目的ESLint代码规范、手动修复、自动修复_vue eslint 自动修复

vue eslint 自动修复

代码规范:一套写代码的约定规则。

例如:赋值符号的左右是否需要空格?一句结束是否是要加;?...

没有规矩不成方圆 —> 正规的团队 需要 统一 的编码风格

ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则。

1.JavaScript Standard Style 规范说明

建议把:JavaScript Standard Style 看一遍,然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分:

  • 字符串使用单引号 – 需要转义的地方除外 'abc'

  • 无分号没什么不好。不骗你!

  • 关键字后加空格 if (condition) { ... }

  • 函数名后加空格 function name (arg) { ... }

  • 坚持使用全等 === 摒弃 == ,一但在需要检查 null || undefined 时可以使用 obj == null

  • ......

2.代码规范错误

如果你的代码不符合standard的要求,eslint会跳出来,刀子嘴,豆腐心地提示你。

下面我们在main.js中随意做一些改动:添加一些空行,空格。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import './styles/index.less'
  4. import router from './router'
  5. Vue.config.productionTip = false
  6. new Vue ( {
  7.  render: h => h(App),
  8.  router
  9. }).$mount('#app')

按下保存代码之后:

你将会看在控制台中输出如下错误:

eslint 是来帮助你的。心态要好,有错,就改。

3.手动修正
  • 根据错误提示来一项一项手动修正。

  • 如果你不认识命令行中的语法报错是什么意思,根据错误代码(func-call-spacing, space-in-parens,.....)去 ESLint 规则表 中查找其具体含义。

打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义。

4. 通过eslint插件来实现自动修正(推荐)
  1. eslint会自动高亮错误显示

  2. 通过配置,eslint会自动帮助我们修复错误

  • 如何安装

    打开VSCode扩展工具,搜索以下插件,并安装       
  • 如何配置

注意:

  1. eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
  2. 使用了eslint校验之后,把vscode带的那些格式化工具全禁用了 Beatify
  • 打开settings.json

  • 配置settings.json 参考
  1. {
  2.    "window.zoomLevel": 2,
  3.    "workbench.iconTheme": "vscode-icons",
  4.    "editor.tabSize": 2,
  5.    "emmet.triggerExpansionOnTab": true,
  6.    // 当保存的时候,eslint自动帮我们修复错误
  7.    "editor.codeActionsOnSave": {
  8.        "source.fixAll": true
  9.   },
  10.    // 保存代码,不自动格式化
  11.    "editor.formatOnSave": false
  12. }

注意:"editor.formatOnSave": false  一定要改成false

好了,完成以上步骤使用ESLint校验会轻松很多了,不过有时间还是要多看看官网哈!

欢迎留言,互相学习!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/172204
推荐阅读
相关标签
  

闽ICP备14008679号