关于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中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'
​
import './styles/index.less'
import router from './router'
Vue.config.productionTip = false
​
new Vue ( {
  render: h => h(App),
  router
}).$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 参考

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}

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

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

欢迎留言，互相学习！！！