一,前言
上一篇解决了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有些问题