本文主要是介绍前端 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插件来实现自动修正
eslint会自动高亮错误显示
通过配置,eslint会自动帮助我们修复错误
如何安装
在VSCode中搜索插件并安装
安装之后,不符合规范的代码将高亮显示
如何配置
配置之后,ctrl + s 保存代码时将自动修复代码规范错误
在VSCode中,打开设置
右上角小图标,打开设置
可以看到如下代码
将下面的代码复制上去
// 当保存的时候,eslint自动帮我们修复错误
"editor.codeActionsOnSave": {"source.fixAll": true
},
// 保存代码,不自动格式化
"editor.formatOnSave": false
-
注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
-
注意:使用了eslint校验之后,把vscode带的那些格式化工具全禁用了
这篇关于前端 ESlint 代码规范及修复代码规范错误的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!