前言
JavaScript 的动态语言类型, 给它带来了独特的魅力, 产生了风格多样的开发范式, 同时也带来了一些问题, 从运行时常见的 undefined ,null 报错, 到代码随意的加减分号, 换行, 空格, 引起的视觉混乱, 如果是团队开发, 则这种情况会更加的严重, 必须加以约束, 下文介绍基于 vue 的代码严格模式及编程规范.
核心插件: Eslint https://github.com/eslint/eslint +
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 方案, 及对实际使用当中可能遇到的问题, 进行了记录.
参考链接
1,VSCode 环境下配置 ESLint 对 Vue 单文件的检测 https://juejin.im/post/5a15402a6fb9a045167cd624
来源: https://www.cnblogs.com/zhoumingjie/p/11582862.html