vue-cli的eslint相关用法
eslint简介
关于eslint的介绍网上很多,这里就简单说些有用的。
eslint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。
vue-cli的eslint相关
vue-cli在init初始化时会询问是否需要添加eslint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
- .eslintignore类似git的.gitignore用来忽略一些文件不使用eslint检查。
- .eslintrc.js是eslint配置文件,用来设置插件、自定义规则、解析器等配置。
.eslintrc.js
// http://eslint.org/docs/user-guide/configuring module.exports = { root: true, parser: 'babel-eslint', parseroptions: { sourcetype: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/rules.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.node_env === 'production' ? 2 : 0 } }
解析器(parser):使用了babel-eslint,这个可以在package.json中找到,说明我们已经安装过该解析器了。
环境配置(env):在浏览器中使用eslint。
继承(extends):该配置文件继承了standard规则,具体规则自己看文档,看不懂有中文版的。
规则(rules):对于三个自定义规则,我特地查了官方文档。
- arrow-parems 允许箭头函数参数使用括号,具体操作请看文档
- generator-star-spacing 允许方法之间加星号,如function * generator() {}。文档在此。特地查了下,发现这是es6提供的生成器函数,回头学习下。
- no-debugger' 允许在开发环境下使用debugger。这个比较简单,不过还是贴下文档便于查看。
注意:在rules中每个配置项后面第一个值是eslint规则的错误等级。
* “off” 或 0 - 关闭这条规则
* “warn” 或 1 - 违反规则会警告(不会影响项目运行)
* “error” 或 2 - 违反规则会报错(屏幕上一堆错误代码~)
遇到过的问题
由于一开始我不了解eslint就写项目,不知道要看standard的文档,所以遇到了很多eslint的错误和警告,分享下希望能对朋友们有帮助。
1. do not use ‘new' for side effects
该错误是由于我删除了/* eslint-disable no-new*/这段注释引发的,/* eslint-disable */这段注释的作用就是不让eslint检查注释下面的代码。
new vue({ el: '#app', router, template: '<app/>', components: { app } })
错误原因:不可以直接new一个新对象,需要将新对象赋值给一个变量。
var vm = new vue()
2. strings must use singlequote
错误原因:字符串必须用单引号
return { msg: "welcome to your vue.js app", //双引号,报错! }
3. expected space(s) after “return”
错误原因:括号两侧必须要有空格隔开
return{// 没有空格报错 msg: 'welcome to your vue.js app', } startclock (){} //){中间没有空格,报错!
4. expected indentation of 8 spaces but found 6
错误原因:使用两个空格进行缩进。
if (this.intervalid === '') { this.intervalid = setinterval(this.countdown, 1000) }
其实eslint的报错并不难懂,只要理解错误原因还是很好解决的。如果提前看看文档,更不会出现太多报错问题了。这个故事告诉我们看文档是很重要滴~%>_<%
tips
发现eslint的报错都会在报错语句前面显示一个url,点击进去可以看到详细的错误信息哦。这是我刚在写博客的时候发现的。
http://eslint.org/docs/rules/no-new do not use 'new' for side effects e:\github\efficiencytools\efficiencytool-vuemobile\src\main.js:15:1 new vue({
这里的 就是eslint规则报错的原因,还是很人性化的。
总结
其实vue-cli的eslint不需要我们配置太多,基本的都配置好了,如果你愿意完全可以照着vue-cli提供的规则去写代码。当我们需要修改一些规则的时候添加到rules中替换原有规则就可以了。一开始用eslint写代码很烦,经常由于一些格式问题调试报错,让回去改格式。不过慢慢的就会发现使用eslint之后代码的确可读性、美观性上都好了很多。
推荐使用eslint来规范代码编辑~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 裁判都看不下去了
下一篇: 小伙子,跳高就跳高,就别乱摆pose了
推荐阅读
-
css3中background新增的4个新的相关属性用法介绍
-
IOS开发(49)之关于 self与内存相关的用法总结
-
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
-
详解Linux系统中关机与重启相关命令的用法
-
脚手架vue-cli系列四:vue-cli工程webpack的基本用法
-
vue-cli脚手架搭建的项目去除eslint验证的方法
-
脚手架vue-cli工程webpack的基本用法详解
-
谈谈PHP中substr和substring的正确用法及相关参数的介绍
-
WordPress中获取页面链接和标题的相关PHP函数用法解析
-
HTML5移动端开发中的Viewport标签及相关CSS用法解析