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 gcyarn run v1.22.4$ git add -A && git cz && git pull && git pushcz-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? Nohusky > 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 threadsCompressing 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 -> masterDone 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 lintyarn 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-varsW:\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-consoleW:\Coding\uni-app\ybt-mp\pages\patrol\patrol-detail\patrol-detail.vue 124:4 warning Unexpected console statement no-consoleW:\Coding\uni-app\ybt-mp\pages\patrol\patrol-list\patrol-list.vue 38:4 warning Unexpected console statement no-consoleW:\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-consoleW:\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/