共计 8946 个字符,预计需要花费 23 分钟才能阅读完成。
0x1 问题
更新时间:2020-05-25 23:09:58
公司需要用到 uni-app
开发新的项目,关于 uni-app
的介绍可以移步官网介绍。
核心就是用 Vue
写多端应用程序,但是 uni-app
的官方编辑器 HbuilderX
对代码校验这一块基本是空白。自己对 Hbuilderx
配置也是有点模糊。
用 Vue-cli
创建的项目默认启用了保存代码检查,但是 uni-app
开发方式有点区别。编译和打包集成到了工具内部。所以我们只能在提交代码之前来做代码校验了。
关于为什么要做代码校验,一个人开发还好。要是团队合作,没有统一的规则。你是天津狗不理,我是长沙臭豆腐。那个工程写出来,基本没有维护性可言。要自己去维护别人写的代码就是一个态度,他写的代码像? 一样,看不懂,只能重构。大多数人都是这个样子,没有例外。作为一个程序员,是要想想为什么那些大佬的代码一看就能懂,写代码就像写诗,在看看自己写的,过几天出了问题,等到亲切问候了全家之后再来看是自己写的。。。?
由此可见规范是很重要的。
0202 年了,ECMAScript 都已经 2020 版本了,别再用
var
定义变量、用==
做if
做判断了。
0x2 规范提交代码
可以参考约定式提交
一种用于给提交信息增加人机可读含义的规范。
简单来说就是提交代码的规范。
已经详细记录到个人的文档网站,这里不做详细介绍 地址
0x3 安装需要用到的依赖
yarn add eslint babel-eslint eslint-plugin-vue husky lint-staged -D
- eslint – 校验代码的核心
- babel-eslint – babel 插件,用 babel 解析 js 文件
- eslint-plugin-vue – vue 官方的 eslint 插件
- husky – 可以让 git hooks 的使用变得更简单方便
- lint-staged – 可以在 git staged 阶段的文件上执行 linters,简单点来说就是当我们运行
eslint
或stylelint
的命令时,只会检查我们通过git add
添加到暂存区的文件,可以避免我们每次检查都把整个项目的代码都检查一遍
0x4 配置
eslint
eslint 的配置复制于
PanJiaChen
大佬的项目,vue-admin-template,关闭了一些实在是太变态的警告。。。(大部分是格式问题)
${app}/.eslintrc.js
/** | |
* @name: .eslintrc.js | |
* @author: SunSeekerX | |
* @Date: 2020-04-18 11:43:35 | |
* @LastEditors: SunSeekerX | |
* @LastEditTime: 2020-05-25 22:01:11 | |
*/ | |
module.exports = { | |
root: true, | |
env: { | |
browser: true, | |
es6: true, | |
node: true, | |
}, | |
// 配置 js 全局变量,因为是 uni-app,全局的 uni 是不需要引入的,还有 5 + 的 plus 对象 | |
globals: { | |
uni: 'readonly', | |
plus: 'readonly', | |
}, | |
extends: ['plugin:vue/essential', 'eslint:recommended'], | |
parserOptions: {parser: 'babel-eslint',}, | |
rules: { | |
'no-console': [ | |
'warn', | |
{allow: ['warn', 'error'], | |
}, | |
], | |
'no-eval': 'error', | |
'no-alert': 'error', | |
'vue/max-attributes-per-line': [ | |
0, | |
{ | |
singleline: 10, | |
multiline: { | |
max: 1, | |
allowFirstLine: false, | |
}, | |
}, | |
], | |
'vue/singleline-html-element-content-newline': 'off', | |
'vue/multiline-html-element-content-newline': 'off', | |
'vue/name-property-casing': ['error', 'PascalCase'], | |
'vue/no-v-html': 'off', | |
'accessor-pairs': 2, | |
'arrow-spacing': [ | |
2, | |
{ | |
before: true, | |
after: true, | |
}, | |
], | |
'block-spacing': [2, 'always'], | |
'brace-style': [ | |
2, | |
'1tbs', | |
{allowSingleLine: true,}, | |
], | |
camelcase: [ | |
0, | |
{properties: 'always',}, | |
], | |
'comma-dangle': [2, 'only-multiline'], | |
'comma-style': [2, 'last'], | |
'constructor-super': 2, | |
curly: [2, 'multi-line'], | |
'dot-location': [2, 'property'], | |
'eol-last': 2, | |
eqeqeq: ['error', 'always', { null: 'ignore'}], | |
'generator-star-spacing': [ | |
2, | |
{ | |
before: true, | |
after: true, | |
}, | |
], | |
'handle-callback-err': [2, '^(err|error)$'], | |
'jsx-quotes': [2, 'prefer-single'], | |
'new-cap': [ | |
2, | |
{ | |
newIsCap: true, | |
capIsNew: false, | |
}, | |
], | |
'new-parens': 2, | |
'no-array-constructor': 2, | |
'no-caller': 2, | |
'no-class-assign': 2, | |
'no-cond-assign': 2, | |
'no-const-assign': 2, | |
'no-control-regex': 0, | |
'no-delete-var': 2, | |
'no-dupe-args': 2, | |
'no-dupe-class-members': 2, | |
'no-dupe-keys': 2, | |
'no-duplicate-case': 2, | |
'no-empty-character-class': 2, | |
'no-empty-pattern': 2, | |
'no-ex-assign': 2, | |
'no-extend-native': 2, | |
'no-extra-bind': 2, | |
'no-extra-boolean-cast': 2, | |
'no-extra-parens': [2, 'functions'], | |
'no-fallthrough': 2, | |
'no-floating-decimal': 2, | |
'no-func-assign': 2, | |
'no-implied-eval': 2, | |
'no-inner-declarations': [2, 'functions'], | |
'no-invalid-regexp': 2, | |
'no-irregular-whitespace': 2, | |
'no-iterator': 2, | |
'no-label-var': 2, | |
'no-labels': [ | |
2, | |
{ | |
allowLoop: false, | |
allowSwitch: false, | |
}, | |
], | |
'no-lone-blocks': 2, | |
'no-mixed-spaces-and-tabs': 1, | |
'no-multi-spaces': 2, | |
'no-multi-str': 2, | |
'no-native-reassign': 2, | |
'no-negated-in-lhs': 2, | |
'no-new-object': 2, | |
'no-new-require': 2, | |
'no-new-symbol': 2, | |
'no-new-wrappers': 2, | |
'no-obj-calls': 2, | |
'no-octal': 2, | |
'no-octal-escape': 2, | |
'no-path-concat': 2, | |
'no-proto': 2, | |
'no-redeclare': 2, | |
'no-regex-spaces': 2, | |
'no-return-assign': [2, 'except-parens'], | |
'no-self-assign': 2, | |
'no-self-compare': 2, | |
'no-sequences': 2, | |
'no-shadow-restricted-names': 2, | |
'no-spaced-func': 2, | |
'no-sparse-arrays': 2, | |
'no-this-before-super': 2, | |
'no-throw-literal': 2, | |
'no-trailing-spaces': 0, | |
'no-undef': 2, | |
'no-undef-init': 2, | |
'no-unexpected-multiline': 2, | |
'no-unmodified-loop-condition': 2, | |
'no-unneeded-ternary': [ | |
2, | |
{defaultAssignment: false,}, | |
], | |
'no-unreachable': 2, | |
'no-unsafe-finally': 2, | |
'no-unused-vars': [ | |
2, | |
{ | |
vars: 'all', | |
args: 'none', | |
}, | |
], | |
'no-useless-call': 2, | |
'no-useless-computed-key': 2, | |
'no-useless-constructor': 2, | |
'no-useless-escape': 0, | |
'no-whitespace-before-property': 2, | |
'no-with': 2, | |
'one-var': [ | |
2, | |
{initialized: 'never',}, | |
], | |
'operator-linebreak': [ | |
2, | |
'after', | |
{ | |
overrides: { | |
'?': 'before', | |
':': 'before', | |
}, | |
}, | |
], | |
'padded-blocks': [2, 'never'], | |
quotes: [ | |
2, | |
'single', | |
{ | |
avoidEscape: true, | |
allowTemplateLiterals: true, | |
}, | |
], | |
'semi-spacing': [ | |
2, | |
{ | |
before: false, | |
after: true, | |
}, | |
], | |
'space-before-function-paren': [2, 'never'], | |
'space-in-parens': [2, 'never'], | |
'space-infix-ops': 1, | |
'space-unary-ops': [ | |
2, | |
{ | |
words: true, | |
nonwords: false, | |
}, | |
], | |
'spaced-comment': [ | |
2, | |
'always', | |
{ | |
markers: [ | |
'global', | |
'globals', | |
'eslint', | |
'eslint-disable', | |
'*package', | |
'!', | |
',', | |
], | |
}, | |
], | |
'template-curly-spacing': [2, 'never'], | |
'use-isnan': 2, | |
'valid-typeof': 2, | |
'wrap-iife': [2, 'any'], | |
'yield-star-spacing': [2, 'both'], | |
yoda: [2, 'never'], | |
'prefer-const': 2, | |
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, | |
'object-curly-spacing': [ | |
2, | |
'always', | |
{objectsInObjects: false,}, | |
], | |
'array-bracket-spacing': [2, 'never'], | |
'no-prototype-builtins': 0, | |
// 自定义开始 | |
'vue/html-indent': 0, | |
'vue/html-closing-bracket-newline': 0, | |
'vue/html-self-closing': 0, | |
indent: 0, | |
semi: 0, | |
'comma-spacing': 0, | |
'space-before-blocks': 0, | |
'keyword-spacing': 0, | |
'key-spacing': 0, | |
'no-multiple-empty-lines': 0, | |
}, | |
} |
package.json
删除了不必要的信息
${app}/package.json
{ | |
"name": "ybt-mp", | |
"version": "1.0.0", | |
"scripts": { | |
"gc": "git add -A && git cz && git pull && git push", | |
"lint": "eslint --ext .js,.vue ./" | |
}, | |
"license": "MIT", | |
"devDependencies": { | |
"@commitlint/cli": "^8.3.5", | |
"@commitlint/config-conventional": "^8.3.4", | |
"babel-eslint": "^10.1.0", | |
"cz-conventional-changelog": "3.2.0", | |
"eslint": "^7.1.0", | |
"eslint-plugin-vue": "^6.2.2", | |
"husky": "^4.2.5", | |
"lint-staged": "^10.2.6" | |
}, | |
"config": { | |
"commitizen": {"path": "./node_modules/cz-conventional-changelog"} | |
}, | |
"dependencies": {"uview-ui": "^1.2.8"}, | |
"commitlint": { | |
"extends": ["@commitlint/config-conventional"] | |
}, | |
"husky": { | |
"hooks": { | |
"pre-commit": "lint-staged", | |
"commit-msg": "commitlint -e $GIT_PARAMS" | |
} | |
}, | |
"lint-staged": {"*.{js,vue}": [ | |
"yarn lint", | |
"git add" | |
] | |
} | |
} |
0x5 使用
提交代码
本地执行
yarn gc | |
# 实际执行,这是个人自己定义的命令,因为经常需要推送和拉取代码,核心就是 git cz 替代 git commit -m '' 可以选择本次提交的类型,很方便 | |
git add -A && git cz && git pull && git push |
示例
SunSeekerX@SunSeekerX-NoteBook MINGW64 /w/Coding/uni-app/ybt-mp (master) | |
$ yarn gc | |
yarn run v1.22.4 | |
$ git add -A && git cz && git pull && git push | |
cz-cli@4.1.2, cz-conventional-changelog@3.2.0 | |
? Select the type of change that you're committing: feat: A new feature | |
? What is the scope of this change (e.g. component or file name): (press enter to skip) | |
? Write a short, imperative tense description of the change (max 66 chars): | |
(16) 加入代码提交 eslint 校验配置 | |
? Provide a longer description of the change: (press enter to skip) | |
? Are there any breaking changes? No | |
? Does this change affect any open issues? No | |
husky > pre-commit (node v12.16.3) | |
‼ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index. | |
[STARTED] Preparing... | |
[SUCCESS] Preparing... | |
[STARTED] Running tasks... | |
[STARTED] Running tasks for *.{js,vue} | |
[STARTED] yarn lint | |
[SUCCESS] yarn lint | |
[STARTED] git add | |
[SUCCESS] git add | |
[SUCCESS] Running tasks for *.{js,vue} | |
[SUCCESS] Running tasks... | |
[STARTED] Applying modifications... | |
[SUCCESS] Applying modifications... | |
[STARTED] Cleaning up... | |
[SUCCESS] Cleaning up... | |
husky > commit-msg (node v12.16.3) | |
[master c050a53] feat: 加入代码提交 eslint 校验配置 | |
11 files changed, 1851 insertions(+), 1076 deletions(-) | |
create mode 100644 .eslintignore | |
rewrite components/ybt-patient-card/ybt-patient-card.vue (97%) | |
rewrite pages/home/home.vue (84%) | |
rewrite pages/patrol/patrol.vue (97%) | |
Already up to date. | |
Enumerating objects: 44, done. | |
Counting objects: 100% (44/44), done. | |
Delta compression using up to 4 threads | |
Compressing objects: 100% (19/19), done. | |
Writing objects: 100% (23/23), 16.87 KiB | 2.11 MiB/s, done. | |
Total 23 (delta 11), reused 0 (delta 0) | |
To http://gitlab.lvyii.com/yibiaotong/ybt-mp.git | |
be3ffc1..c050a53 master -> master | |
Done in 19.97s. |
一条命令搞定了代码提交、校验、拉取、推送。当然遇到有冲突的情况还是需要自己手动解决。
代码校验
yarn lint | |
# 实际执行, 调用 eslint 检查后缀是 js 和 vue 的文件,暂时没有加入 css,和 scss 校验 | |
eslint --ext .js,.vue ./ |
示例
SunSeekerX@SunSeekerX-NoteBook MINGW64 /w/Coding/uni-app/ybt-mp (master) | |
$ yarn lint | |
yarn run v1.22.4 | |
$ eslint --ext .js,.vue ./ | |
W:\Coding\uni-app\ybt-mp\main.js | |
31:7 error 's' is assigned a value but never used no-unused-vars | |
W:\Coding\uni-app\ybt-mp\pages\home\home.vue | |
6:2 warning Mixed spaces and tabs no-mixed-spaces-and-tabs | |
201:7 warning Unexpected console statement no-console | |
W:\Coding\uni-app\ybt-mp\pages\patrol\patrol-detail\patrol-detail.vue | |
124:4 warning Unexpected console statement no-console | |
W:\Coding\uni-app\ybt-mp\pages\patrol\patrol-list\patrol-list.vue | |
38:4 warning Unexpected console statement no-console | |
W:\Coding\uni-app\ybt-mp\utils\app-update.js | |
40:7 warning Unexpected console statement no-console | |
45:9 warning Unexpected console statement no-console | |
48:9 warning Unexpected console statement no-console | |
60:3 warning Unexpected console statement no-console | |
W:\Coding\uni-app\ybt-mp\utils\index.js | |
29:4 warning Unexpected console statement no-console | |
42:4 warning Unexpected console statement no-console | |
56:4 warning Unexpected console statement no-console | |
✖ 12 problems (1 error, 11 warnings) | |
error Command failed with exit code 1. | |
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. |
0x6 总结
经过这么配置之后,代码的质量和规范相对于没有配置之前维护性大大提高,同时也可以避免一些错误的发生。但工具终究是工具,写代码的终究是人,在编写代码的同时,养成好的编码习惯和优化意识才是最重要的。
在我眼中程序员可以不穿很时髦的衣服,但是一定要穿的干净。多多少少有点洁癖、有点强迫症、?
0x7 其他
参考文章:lint-staged 和 husky 在 pre-commit 阶段做代码检查
关于我
SunSeekerX,前端开发、Nodejs 开发、小程序、uni-app
开发、等等
喜欢探讨技术实现方案和细节,完美主义者,见不得bug
。
Github:https://github.com/SunSeekerX
个人博客:https://yoouu.cn/
个人在线笔记:https://sunseekerx.yoouu.cn/