一步一步实现中后台管理平台模板-14-Vue开发工具配置和使用Vetur, ESLint, Prettier, StyleLint

一,前言

上一篇解决了IE浏览器兼容问题
到目前已经更新了13篇,但对于开发工具的配置和使用还只字未提
一方面开发工具越早启用越好,有利于代码规范和开发体验的优化
但不写一些有问题的代码就没办法表现出开发工具的效果和好处
到目前位置,其实已经有意无意的加入了一些"有问题"的代码

本篇,就来介绍Vue开发中实用且能够有效提高开发效率,保证编码规范的工具
ps:创建工程时已经选择了使用ESLint + Prettier

---

二,常用开发工具

首先就是IDE的选择,随着前端这几年的野蛮生长,IDE也是换了又换,sublime,webstorm,vscode...
目前多数使用vscode,少数webstorm,IDE这部分就选择开源免费的vscode

选择vscode的原因不仅仅因为其开源免费,其本身还提供了大量插件且支持自开发插件,配置灵活
例如Vetur插件为Vue提供了语法高亮,标签补全,模板生成,Lint检查,格式化...等等功能

编码规范方面可使用ESLint做代码规范和错误检查,帮助开发者及时发现不符合规范或错误的代码

使用prettier做代码格式化工具,统一多人开发下的代码格式,功能与ESLint有重叠,但二者专注点不同
ESLint专注于代码校验,Prettier则专注于代码格式的美化

StyleLint是一款CSS代码检查工具,有助于开发者统一CSS代码规范，避免样式错误
stylelint能够解析 SCSS，Sass，Less 等类 CSS 语法，和识别最新CSS语法,支持开发者自定义规则
stylelint提供的近百项配置主要分为3类:校对风格,判别代码可维护性,判断代码错误

Vue DevTools官方调试工具,它集成了Vuex的调试功能,远程调试及性能分析功能

这里我们将针对Vetur, ESLint, Prettier, StyleLint的配置和使用做详细介绍
目的是实现统一的编码规范,编码风格,改善团队开发中存在的编码差异

ps:DevTools的使用在另一篇文章已有介绍

---

三,安装Vetur, ESLint, Prettier, StyleLint

Vetur:

ESLint, Prettier

使用Vue-cli创建工程时,已经选择自动安装ESLint, Prettier

package.json:

}
  ...
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.9.0",
    // 避免eslint和prettier之间冲突
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    ...
  },
  ...
}

关于ESLint, Prettier的配置可以通过根目录下.eslintrc.js和.prettierrc.js进行配置

默认无.prettierrc.js文件(部分prettier配置可在eslint中实现)
改变Prettier默认配置，只需在根目录下新建一个.prettierrc.js文件

默认.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

extends数组，后面继承前面，引入eslint-plugin-vue插件，并开启essential系列规则
eslint-plugin-vue提供了四个规则：
	base，essential，strongly-recommended，recommended后面的规则前面规则的拓展
	推荐使用strongly-recommended

StyleLint

使用vue-cli搭建项目时，没有stylelint相关选项，需要自己安装

安装StyleLint:

npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin

Webpack插件stylelint-webpack-plugin:

在编译之前对源代码中的 css 代码进行检查

---

四,VSCode-Setting配置

{
    "extensions.ignoreRecommendations": false,
    "team.showWelcomeMessage": false,
    "git.enableSmartCommit": true,
    "vsicons.dontShowNewVersionMessage": true,
    "git.autofetch": true,
    "react.beautify.onSave": true,
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "[markdown]": {},
    "eslint.enable": true,
    // 配置eslint支持.vue文件
    "eslint.options": {
        "extensions": [
            ".js",
            ".jsx",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // 关闭模板校验(与本地ESLint冲突)
    "vetur.validation.template": false,
    "eslint.autoFixOnSave": true,
    "editor.tabSize": 2,
    "jest.autoEnable": false,
    "jest.pathToConfig": "./.jest.js",
    "terminal.integrated.rendererType": "dom",
    "window.zoomLevel": 0,
    "editor.quickSuggestions": {
        "strings": true
    },
    "diffEditor.renderSideBySide": true
}

---

五,配置ESLint

在eslint默认配置.eslintrc.js中,使用了essential规则,并添加@vue/prettier防止冲突
Vue提供了多种规格的校验方式,可根据需要选择,essential是最基础的

extends: ["plugin:vue/essential", "@vue/prettier"]

实际项目中,推荐使用strongly-recommended开启类型校验

extends: ["plugin:vue/strongly-recommended", "@vue/prettier"]

1)在ECharts一篇中,我们创装了一个Chart.vue组件,其中props参数并没有定义参数类型和默认值:

此时,会提示需要定义类型(还需要定义默认值)

2)组件传参-参数名规范(prop名称大小写)

在声明prop时，命名应始终使用camelCase(驼峰)
而在模板和 JSX 中应始终使用 kebab-case(横线命名)
即:在 JavaScript 中是 camelCase，在 HTML 中则是 kebab-case

参数使用驼峰命名将产生警告:

需统一使用小写加"-"连接符

2)定义但未使用警告

有时候,我们希望允许定义但未使用的变量放在那里,可修改规则:

此时,不在报错

细心的话可以发现,之前vuex字符串使用单引号,保存后自动变为单号引号

import { mapState } from "vuex";

这是ESLint的又一个功能

---

3)字符串统一使用双引号

之前的代码中,有意提交了一些单引号字符串,这时会产生警告:

使用了"plugin:vue/strongly-recommended"后,会统一修复为双引号

---

4)语句强制使用分号结束

相比java,在js中代码可不需要分号结尾,也可以使用分号结尾,这使得代码风格不统一

更多规则可参考: http://eslint.cn/docs/rules/

在eslint规则文档中，带扳手图标的规则eslint可自动修复
不带该图标的规则，eslint只给出错误或警告，需手动进行修复

忽略检查配置:

.eslintignore

/build/
/dist/
/*.js
/test/unit/coverage/

使用注释忽略eslint检查

整个文件忽略检查:

/* eslint-disable */
alert('整个文件忽略检查');

指定代码块忽略eslint检查:

/* eslint-disable */
alert('指定代码块忽略检查');
/* eslint-enable */

指定规则禁用警告

/* eslint-disable no-alert, no-console */
alert('no-alert规则忽略检查');
console.log('no-console规则忽略检查');
/* eslint-enable no-alert, no-console */

指定行禁用规则警告(两种方法):

alert('指定行禁用规则警告'); // eslint-disable-line
 
// eslint-disable-next-line
alert('指定行禁用规则警告');

指定行禁用指定规则警告:

alert('指定行禁用指定规则警告'); // eslint-disable-line no-alert
 
// eslint-disable-next-line no-alert
alert('指定行禁用指定规则警告');

指定行禁用多个规则警告:

alert('指定行禁用多个规则警告'); // eslint-disable-line no-alert, quotes, semi
 
// eslint-disable-next-line no-alert, quotes, semi
alert('指定行禁用多个规则警告');

---

六,配置StyleLint(还有些问题需要解决)

在src目录下新建配置文件.stylelintrc.js:

/**
 * 规则: https://stylelint.io/user-guide/rules
 */
module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    // 不允许使用非法的十六进制颜色值
    "color-no-invalid-hex": true,
    // 不允许颜色值大写
    "color-hex-case": "lower",
    // 允许使用的度量单位是 em、rem、%、s、px
    "unit-whitelist": ["em", "rem", "%", "s", "px"],
    // "rule-empty-line-before": null,
    // "color-hex-length": "long",
    // "declaration-colon-newline-after": null
  }
};

App.vue中添加一条非法的css:

此时运行项目控制台会报错,并中断运行:

如果在热重载中修改色值为非法值会在页面报错:

忽略检查配置:

.stylelintignore:

# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff

# 测试和打包目录
/test/
/dist/

---

七,结尾

本篇介绍了Vue开发中的实用工具配置和使用
使用ESLint+StyleLint把控编码规范和代码风格,及时检测错误代码
(StyleLint有些问题,暂时从Vue-FrameWork-Admin中拿掉了)

还可以使用lint-staged,husky插件,利用githook做代码提交时的校验
StyleLint还可以规范CSS的属性顺序
还可以在package.josn中创建对应的检测命令
等等...后续将补充进来

下一篇介绍自动部署,后面等git环境搭建好了再写一篇前端的CI/CD

---

八,代码下载

传送门:CSDN下载(审核中)
传送门:GitHub下载-vue-framework-admin-v0.0.14

---

维护日志

20191010:
编写文章
20191014:
修改部分问题,添加lint忽略文件和注释,上传代码
StyleLint有些问题