前端 ESlint 代码规范及修复代码规范错误

代码规范及ESlint介绍

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加分号？

虽然不遵守这些代码规范并不会造成语法错误，但是一个团队中，我们通常希望各个团队成员的代码风格是统一的

没有规矩不成方圆

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

创建vue项目时可以添加ESLint代码检查工具

JavaScript Standard Style 规范说明

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

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

• 字符串使用单引号 – 需要转义的地方除外
• 无分号 – 这没什么不好，不骗你！
• 关键字后加空格if (condition) { ... }
• 函数名后加空格function name (arg) { ... }
• 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
• ......

代码规范错误

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

比如以下错误提示

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

手动修正

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

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

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

通过eslint插件来实现自动修正

1. eslint会自动高亮错误显示
2. 通过配置，eslint会自动帮助我们修复错误

如何安装

在VSCode中搜索插件并安装

安装之后，不符合规范的代码将高亮显示

如何配置

配置之后，ctrl + s 保存代码时将自动修复代码规范错误

在VSCode中，打开设置

右上角小图标，打开设置

可以看到如下代码

将下面的代码复制上去

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

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