uni-app配置 eslint + prettier 代码格式校验

关于为什么要做代码校验,一个人开发还好。要是团队合作,没有统一的规则。你是天津狗不理,我是长沙臭豆腐。那个工程写出来,基本没有维护性可言。要自己去维护别人写的代码就是一个态度,他写的代码像💩一样,看不懂,只能重构。大多数人都是这个样子,没有例外。作为一个程序员,是要想想为什么那些大佬的代码一看就能懂,写代码就像写诗,在看看自己写的,过几天出了问题,等到亲切问候了全家之后再来看是自己写的。。。😮

0x1 问题

更新时间:2020-09-22 13:10:40

  • 2020-09-22 13:10:40

    • 增加 commit 之前用 prettier 按照配置格式化一遍。防止 💩 一样的代码。
  • 2020-09-10 18:27:21

    • 增加 eslintprettier 配置(对 vscode 用户友好)
  • 2020-08-28 21:41:15

    • 去除 package.jsonlint-stagedgit add 任务。
    • 增加 .eslintignore 配置

公司需要用到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 @vue/eslint-config-prettier eslint-plugin-prettier -D
  • eslint - 校验代码的核心
  • babel-eslint - babel 插件,用 babel 解析 js 文件
  • eslint-plugin-vue - vue官方的 eslint 插件
  • husky - 可以让 git hooks 的使用变得更简单方便
  • lint-staged - 可以在 git staged 阶段的文件上执行 linters,简单点来说就是当我们运行 eslintstylelint 的命令时,只会检查我们通过 git add 添加到暂存区的文件,可以避免我们每次检查都把整个项目的代码都检查一遍

0x4 配置

以下设置适用于 cli 创建的项目,HbuilderX 创建的项目,路径需要修改。例如 ./src/ 改成 ./ 这样。

prettier

${app}/.prettierrc.js

module.exports = {
  // 行宽
  printWidth: 80,
  // 使用tab键
  useTabs: false,
  // 是否添加分号
  semi: false,
  // 是否使用单引号
  singleQuote: true,
  // jsx单引号
  jsxSingleQuote: true,
  // 在对象字面量声明所使用的的花括号后({)和前(})输出空格
  bracketSpacing: true,
  // 将 > 多行 JSX 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。
  jsxBracketSameLine: false,
  // Tab 宽度
  tabWidth: 2,
  // 最后一个对象元素加逗号
  trailingComma: 'all',
  // (x) => {} 是否要有小括号
  arrowParens: 'avoid',
  // HTML空白敏感性
  htmlWhitespaceSensitivity: 'ignore',
  endOfLine: 'auto',
}

eslint

eslint的配置复制于 PanJiaChen 大佬的项目,vue-admin-template,关闭了一些实在是太变态的警告。。。(大部分是格式问题)

${app}/.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  // 配置js全局变量,因为是uni-app,全局的uni是不需要引入的,还有5+的plus对象
  globals: {
    uni: 'readonly',
    plus: 'readonly',
    wx: 'readonly',
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  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,

    '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: [
      'warn',
      '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-in-parens': [2, 'never'],
    'space-infix-ops': 1,
    'space-unary-ops': [
      2,
      {
        words: true,
        nonwords: false,
      },
    ],
    '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,
    '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,
    'spaced-comment': 0,
    'space-before-function-paren': 0,
    'arrow-spacing': 0,
    'object-curly-spacing': 0,
  },
}

.eslintignore

需要忽略打包的文件,像 .gitignore 一样的写法就行

# 忽略打包的文件
unpackage
# 忽略uni-app官方的组件库错误和警告,官方的竟然通不过...
components/uni-**

package.json

删除了不必要的信息

${app}/package.json

{
  "scripts": {
    "gc": "git add -A && git-cz && git pull && git push",
    "lint": "eslint --ext .js,.vue ./"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "prettier --write",
      "eslint --ext"
    ]
  },
}

0x5 使用

提交代码

本地执行

yarn gc
# 实际执行,这是个人自己定义的命令,因为经常需要推送和拉取代码,核心就是git cz替代git commit -m ''可以选择本次提交的类型,很方便
git add -A && git cz && git pull && git push

一条命令搞定了代码提交、校验、拉取、推送。当然遇到有冲突的情况还是需要自己手动解决。

代码校验

yarn lint
# 实际执行,调用eslint检查后缀是js和vue的文件,暂时没有加入css,和scss校验
eslint --ext .js,.vue ./src

0x6 总结

经过这么配置之后,代码的质量和规范相对于没有配置之前维护性大大提高,同时也可以避免一些错误的发生。但工具终究是工具,写代码的终究是人,在编写代码的同时,养成好的编码习惯和优化意识才是最重要的。

在我眼中程序员可以不穿很时髦的衣服,但是一定要穿的干净。多多少少有点洁癖、有点强迫症、😂

0x7 其他

参考文章:lint-staged和husky在pre-commit阶段做代码检查

关于我

SunSeekerX,前端开发、Nodejs开发、小程序、uni-app开发、等等

喜欢探讨技术实现方案和细节,完美主义者,见不得bug

Github:https://github.com/SunSeekerX

个人博客:/

个人在线笔记:https://sunseekerx.yoouu.cn/