Vue项目中使用eslint的笔录

2018-06-14 admin

一、前言

Javascript 是一门弱类型语言,所以语法检查变得尤为重要。虽然有很多前端IDE开发工具,可以很好地帮助我们提示在编写时的错误,但是大多数开发者还是使用的像 Sublime Text、Visual Studio Code 之类的轻量级编辑器,这导致在开发中很容易出现各种错误,比如单词拼写错误,漏掉了括号等。而且每个人的代码编写习惯也不一样,因此有的项目的代码格式千差万别,比如 缩进空格数,有的习惯4个,有的习惯2个,这也导致项目维护起来越来越麻烦,遇到错误也很难定位。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。


二、创建VUE项目

通过使用命令


二、配置方式

ESLint 具有高可配置行,这就意味着你可以根据项目需求定制代码检查规则。ESLint 的配置方式可以有以下两种方式: **文件注释:**在 Javascript 文件中使用注释包裹配置内容。 **配置文件(推荐):*在项目根目录下创建包含检查规则的 .eslintrc. 文件。 目前采用的是第二种,且仅实现在 “.eslintrc.js” 的文件里面进行配置


三、扩展配置文件

ESLint 配置文件中的 extends 字段可以扩展集成现有的规则,比如著名的 Airbnb JavaScript Style,可以通过安装 eslint-config-airbnb-base 集成使用。


四、开始使用

因为本人比较偏向于 Airbnb JavaScript Style,所以今后的代码规范将均使用此规范。并且我们这里是 Vuejs 项目,所以需要同时对 .vue 文件中的 js 代码进行检测,就需要利用 eslint-plugin-vue 插件来搭配使用。 首先,安装依赖: npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 其次,在项目根目录下新建 .eslintrc.js 文件,配置如下:

module.exports = { extends: [ ‘plugin:vue/essential’, ‘airbnb-base’ ], };

最后,在 package.json 中添加 lint 脚本: // … “scripts”: { // … “lint”: “eslint --ext .js,.vue src” }, // …

当然你也可以全局安装以上依赖,这样你可以直接运行 eslint --ext .js,.vue src 命令。

Ok, 配置好了~ 命令行运行 npm run lint,输出如下: $ npm run lint

vue-webpack-demo@0.0.1 lint /Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4 eslint --ext .js,.vue src

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue 17:16 error Missing trailing comma comma-dangle 26:9 warning Unexpected console statement no-console 38:9 warning Unexpected console statement no-console

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/utils.js 15:3 warning Unexpected console statement no-console

✖ 4 problems (1 error, 3 warnings) 1 error, 0 warnings potentially fixable with the --fix option. 你会发现检查出一堆错误,不要方,输出的错误说明的非常明显,只需要根据错误提示行号去检查,然后根据规则更改就行了。 上面的命令中 --ext 参数就是用来指定需要检查的扩展名的文件,src 就是指定检查的目录。


五、 添加自定义规则

虽然 Airbnb 的代码风格已经很成熟了,但是并不是满足任何人需求的。有些时候,如果想修改一些规则怎么办?这时我们可以通过在 .eslintrc.js 文件中添加 rules 字段来自定义。规则 no-console 就是用来规定禁止使用 console 来调试程序,Airbnb 代码风格在检查是会输出如下警告: /Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue 26:9 warning Unexpected console statement no-console 但是我们有些时候项目经常使用到 console,所以我会关闭该条规则,修改 .eslintrc.js 文件如下: module.exports = { extends: [ ‘plugin:vue/essential’, ‘airbnb-base’ ], rules: {

'no-console': 'off',

} }; 这样在运行 npm run lint 时,命令行就不会输出 no-console 警告了。

有关 ESLint 的基础教程请阅读 ESLint,关于 Airbnb 代码规范,请阅读 Airbnb JavaScript Style。


六、 总结

读完你会发现,之前自己一直不敢使用的 ESLint 是如此的简单,无论是安装还是配置,非常的人性化。 作为一名优秀的程序员,规范化的代码风格尤为重要,这不仅能降低代码出错率,而且非常有益于别人阅读你的代码。说到代码阅读,代码注释也是必不可少的。俗话说 己所不欲,勿施于人,如果你不想阅读 shit 一样的代码,那么就先从自身做起,赶紧在你的项目中实践起来吧~

作者:yugasun 链接:https://juejin.im/post/5aa7ba… 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文链接:https://segmentfault.com/a/1190000015285153

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34026.html

文章标题:Vue项目中使用eslint的笔录

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
回到顶部