使用 Eslint & standard 规范前端代码
时间:2019-09-25
本文章向大家介绍使用 Eslint & standard 规范前端代码,主要包括使用 Eslint & standard 规范前端代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
JavaScript的动态语言类型,给它带来了独特的魅力,产生了风格多样的开发范式,同时也带来了一些问题,从运行时常见的 undefined 、null 报错,到代码随意的加减分号、换行、空格,引起的视觉混乱,如果是团队开发,则这种情况会更加的严重,必须加以约束,下文介绍基于 vue 的代码严格模式及编程规范。
Eslint 是什么?
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。与它类似的项目有 JSLint、JSHint。
使用 ESLint 可以保证代码的一致性和避免错误,接下来介绍 ESLint 的使用。
ESLint 的安装与配置
一、vue-cli3 初始化引入ESLint
如果是用 vue-cli3 初始化搭建项目,可以在命令行中执行 vue ui 打开vue-cli3 新增的图形化界面,以创建和管理项目;默认是配置了 babel + eslint ,也可以手动执行项目配置以引入更多特性,如router、vuex 、scss、typescript、unit测试、e2e测试;
如果是后期引入 ESLint,则需要手动安装下图所示的几个与 ESLint 相关的插件,安装指令为
vue add @vue/eslint
提示: vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言,这不意味有一个替代(命令)。对于这些普通的 npm 包,你仍然需要(根据所选的 npm 包)使用包管理器。
vue add @eslint 会依次执行安装和调用两条命令,并智能生成需要的配置文件,可能会修改项目当前文件内容,所以在运行 vue add 前,需要先保存提交下项目当前状态;vue add 的好处在于,可以调用 vue cli 插件,比如我只是执行了 vue add @vue/eslint 一条指令,安装后根据命令行的提示,会帮助你匹配安装剩下的所有 eslint 配置,而不需要自己再一条条安装了。
安装完成后,可以在根目录发现多了一个 .eslintrc.js 文件,这是 eslint 的配置文件,可以配置自定义规则(rules)等。
二、通用项目引入 ESLint
如果项目不是基于vue-cli3 或者 vue,则需要以 npm 包管理器安装 eslint,安装完成后在 ./node_modules/.bin/ 目录下执行 eslint --init 命令,根据指引生成所需的 eslint 配置方案;这里可以选择应用于 vue 或者其它例如 react 项目。
npm install eslint --save-dev // 安装并保存到项目开发依赖 ./node_modules/.bin/eslint -- --init // 初始化命令
安装完成后,可以在 package.json 的 script 中配置 lint 命令,以执行eslint 校验。
"lint": "vue-cli-service lint" //基于vue-cli3 "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3
编码规范 Standard 的安装与使用
应用了 ESLint 后,通常是需要自己来配置繁杂的 rules 规则,这也是一个喜好类的东西,多数人是不愿意在这上面耗费太多精力的(比如手动配置数百个ESLint 规则),于是github 上出现了一些开源的代码规范库,比较流行的有 airbnb、standard、prettier等,下面介绍下 standard
在 vue 中的使用方式:
在 vue 中通常需要和 ESLint 一起使用,上面讲到 ESLint 时候有注意到么,ESLint 初始化指令中有一个选择开源编码规范的指令,系统默认是有 standard 的选项的,直接选择就可以了。
常见问题
1、配置了 ESLint + standard 但是不生效?
在项目根目录里找到 .eslintrc.js 文件,注意 extends 和 plugins 属性是否配置,下图的extends 代表 ESLint 继承了standard 的编码规范。
2、只是 .js 文件生效了, .vue 文件没有效果 ?
.vue 文件的校验,需要注意你的 package.json 是否安装了 eslint-plugin-html 插件,并且在 .eslintrc.js 中配置了 plugins;
如果是用 vscode 编辑器开发,需安装 ESLint、Vetur 这两个 vscode 插件,并在 设置 =》 settings.json 文件中添加以下配置,然后重启下 vscode,即可生效。
"files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true },"html","vue" ]
3、配置了 standard 后,还能自定义 rules 吗?
standard 本身是不赞成这样做的,如果你一定要使用 standard 并需要对其中某些规则进行自定义的话,你需要使用 eslint-config-standard,当然, 在上面我们执行的 ESLint init 指令安装的配置中,就是以这种形式使用standard 的。
总结
本文介绍了用于前端编码规范、代码质量管理的几个开源方案,搭建了基于 vue 的 ESLint + standard 方案,及对实际使用当中可能遇到的问题,进行了记录。
参考链接
原文地址:https://www.cnblogs.com/zhoumingjie/p/11582862.html
- flume搜集日志:如何解决实时不断追加的日志文件及不断增加的文件个数问题
- hduoj-----(2896)病毒侵袭(ac自动机)
- MySQL数据库(二):基本管理
- Golang编程实现生成n个从a到b不重复随机数的方法
- TiDB 在株式会社 FUNYOURS JAPAN 的应用
- MySQL数据库(三):数据类型
- spark开发环境详细教程2:window下sbt库的设置
- hdu----(2222)Keywords Search(ac自动机)
- MySQL数据库(四):约束条件
- hdu----(2084)数塔(dp)
- golang简单tls协议用法完整示例
- spark开发环境详细教程1:IntelliJ IDEA使用详细说明
- MySQL数据库(五):索引
- hdu----(1466)计算直线的交点数(dp)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 金九银十准备季——Java后端多线程&并发面试题及答案(二)
- TypeScript 设计模式之观察者模式
- pytest文档46-关于https请求警告问题
- pytest文档45-allure添加环境配置(environment)
- Pytest fixture参数化params
- Python 批量合并 Excel
- 用 Python 了解一下最炫国漫《雾山五行》
- Python 基础(六):列表与元组
- Word 批量转 PDF
- Python 数据分析(一):NumPy 基础知识
- 每日一题 | 环形排列问题
- 每日一题 | QQ群撩妹问题
- 每日一题 | 老板出的下棋问题
- Qt音视频开发12-mpv解码播放
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA