由于公司前端的开发人员能力太弱，之前的指定规范实行一段时间，由于我手中的项目众多，事情比较多，中间好长一段时间没有去看，之前的项目我。到测试阶段的时候，去看之前的项目，发现之前参与开发的相关人员，各种混乱，各种风格，最可气的是，居然把规范给我注释掉，直接提交到服务器上。造成其他人员开发困难，以及不利于读取。

由于种种原因把！我把公司的项目全部加入lint-staged 半自动提升项目代码质量。尽可能降到最低。依据本篇可以实现在git commit之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是一个人写的。

这篇文章，在之前的配置基础上追加lint-staged，如果你想使用，请先阅读之前的我写的一篇文章git 加入钩子和提交信息规范化，还有一篇是一个提交信息的解释Commit message 的格式说明

实现思路或是提交过程

  • 待提交的代码
  • git add 添加到暂存区
  • 执行 npm run commit
  • yorkie注册在git pre-commit的钩子调起 lint-staged
  • lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）
  • 如果有错误（没通过ESlint检查）则停止任务，等待下次commit，同时打印错误信息
  • 成功提交

本次项目是通过vue-cli3.0脚手架构建的一个项目。git 加入钩子和提交信息规范化也是通过vue-cli3.0搭建，加入的。

安装lint-staged

npm i --D lint-staged

添加 gitHooks函数

// package.json
....
  "gitHooks": {
    ....
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  .....

解释： 这里 lint-staged 的配置是：在 git 的待提交的文件中，在 app 目录下的所有 .js .vue 都要执行vue-cli-service lint, git add这个两个命令,将处理过的代码重新 add 到 git 中

格式化代码vue-cli-service lint

vue-cli-service lint是vue-cli3.0在构建项目的时候，自动生成的。如果你在构建项目的过程中选择了js标准，这个就会生成这个指令，如果你没有使用，所以构建完项目，需要你自己手动增加js规范啦！

vue-cli-service lint 验证规则配置

vue-cli3.0在构建项目的时候，会自动生成的js/vue项目的文件 .eslintrc.js，.eslintignore，.editorconfig

.eslintrc.js

这个是js配置各种验证规则

......
  rules: {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow switch case through
    'no-fallthrough': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // 禁止使用 eval 函数
    'no-eval': [2, { allowIndirect: true }],
    // 禁止多个空格， 忽略行位注释前的多个空格
    'no-multi-spaces': [2, { ignoreEOLComments: true }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 去除文件末尾需要换行
    'eol-last': 0
  },
  parserOptions: {
    // 指定解析器 parser
    parser: 'babel-eslint'
  }
......

更多规则配置参考

.eslintignore

这里是配置要排除要验证的文件或者目录

.....
build/
config/
....

.editorconfig

这个配置IDE格式化的，为了各种IDE的配置，兼容，覆盖等

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
......

到这里配置已经结束啦！

前面说到ESLint，下面来说下ESLint

什么是ESlint？

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。

【ESlint 中文官方网站】(http://eslint.cn/)

ESlint规范

你可以通过下面的列表大概了解ESlint的风格

"no-bitwise": 0,//禁止使用按位运算符
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格

更全面的了解ESlint规则建议点这里 ：ESlint 官方规则列表

参考链接：
prettier
eslint

欢迎进入个人公众号 ，一起学习啊！

在这里插入图片描述

# 自动化
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue