uniapp配置eslint代码检测

40次阅读

共计 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/

正文完
vue.js
发表至： vue.js
2020-05-26
 0
关于vue.js:源码学习适用于-Vue3-的-ECharts-包装组件
关于vue.js:vue源码分析diff算法核心原理
关于vue.js:Vue移动端车牌选择器实现摘要
关于vue.js:47-张图带你-MySQL-进阶