时间:2021-05-26
ESLint简介
关于ESLint的介绍网上很多,这里就简单说些有用的。
ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。
vue-cli的eslint相关
vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
.eslintrc.js
解析器(parser):使用了babel-eslint,这个可以在package.json中找到,说明我们已经安装过该解析器了。
环境配置(env):在浏览器中使用eslint。
继承(extends):该配置文件继承了standard规则,具体规则自己看文档,看不懂有中文版的。
规则(rules):对于三个自定义规则,我特地查了官方文档。
注意:在rules中每个配置项后面第一个值是eslint规则的错误等级。
* “off” 或 0 - 关闭这条规则
* “warn” 或 1 - 违反规则会警告(不会影响项目运行)
* “error” 或 2 - 违反规则会报错(屏幕上一堆错误代码~)
遇到过的问题
由于一开始我不了解ESLint就写项目,不知道要看Standard的文档,所以遇到了很多ESLint的错误和警告,分享下希望能对朋友们有帮助。
1. Do not use ‘new' for side effects
该错误是由于我删除了这段注释引发的,这段注释的作用就是不让eslint检查注释下面的代码。
错误原因:不可以直接new一个新对象,需要将新对象赋值给一个变量。
2. Strings must use singlequote
错误原因:字符串必须用单引号
3. Expected space(s) after “return”
错误原因:括号两侧必须要有空格隔开
4. Expected indentation of 8 spaces but found 6
错误原因:使用两个空格进行缩进。
其实ESLint的报错并不难懂,只要理解错误原因还是很好解决的。如果提前看看文档,更不会出现太多报错问题了。这个故事告诉我们看文档是很重要滴~%>_<%
Tips
发现ESLint的报错都会在报错语句前面显示一个URL,点击进去可以看到详细的错误信息哦。这是我刚在写博客的时候发现的。
这里的 http://eslint.org/docs/rules/no-new 就是ESLint规则报错的原因,还是很人性化的。
总结
其实vue-cli的ESLint不需要我们配置太多,基本的都配置好了,如果你愿意完全可以照着vue-cli提供的规则去写代码。当我们需要修改一些规则的时候添加到rules中替换原有规则就可以了。一开始用ESLint写代码很烦,经常由于一些格式问题调试报错,让回去改格式。不过慢慢的就会发现使用ESLint之后代码的确可读性、美观性上都好了很多。
推荐使用ESLint来规范代码编辑~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,及其相关的一下操作。【使用vue
本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下:1.eslint简介eslint是用来管理和检测js代码风格的工具,可以和
写在前面:使用vue-cli可以快速创建vue项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,
vue-cli是vue.js的脚手架,用于自动生成vue.js模板工程的。1、安装vue-cli使用npm全局安装vue-cli(前提是已经安装了nodejs,
本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下:vue-cli安装npmivue-cli-gvueinitwebpack-simplevu