使用eslint和githooks统一前端风格的技巧


Posted in Javascript onJuly 29, 2020

前端团队开发时,是必须要有一个统一的前端规范的,用一套统一的规范来规范开发者,可以有效的避免在提交和拉取代码时造成的代码错乱问题,这边文章主要讲下我们团队的代码规范使用,eslint结合vscode保存时自动修复不规范代码,githooks提交代码时的eslint校验和信息规范。

添加eslint

vue-cli3构建一个新项目(包含eslint模块),完成后添加 .eslintrc.js 配置如下:

module.exports = {
 root: true,
 parserOptions: {
 parser: 'babel-eslint',
 sourceType: 'module'
 },
 env: {
 browser: true
 },
 // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 extends: [
 'plugin:vue/base'
 ],
 // required to lint *.vue files
 plugins: [
 'vue'
 ],
 // add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'indent': [2, 2], // 两个空格的缩进
 'quotes': [2, 'single'], // js必须使用单引号
 'linebreak-style': [2, 'unix'], // 换行风格 unix/windows
 'semi': [2, 'never'], // 语句强制分号结尾
 // 'no-console': [1], // 不允许console语句
 'no-unused-vars': [1], // 声明了变量但是没有使用检测
 'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元运算符的前/后要不要加空格
 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括号风格
 'comma-spacing': [2, { 'before': false, 'after': true }], // 逗号后有空格,前没有空格
 'comma-style': [2, 'last'], // 逗号跟在结尾
 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象字面量中冒号的前后空格
 'lines-around-comment': [ // 行前/行后备注
  2, {
  'beforeBlockComment': false, // 段注释的前后
  'beforeLineComment': false, // 行注释的前面
  'afterBlockComment': false, // 块注释的后面
  'afterLineComment': false, // 行注释的后面
  'allowBlockStart': true,
  'allowObjectStart': true,
  'allowArrayStart': true
  }],
 'max-depth': [2, 4], // 代码最多允许4层嵌套
 'max-len': [1, 1000, 2],
 'max-nested-callbacks': [2, 3], // 回调嵌套深度
 'max-params': [2, 5], // 函数最多只能有5个参数
 'max-statements': [1, 80], // 单个函数最多80条语句
 'no-array-constructor': [2], // 禁止使用数组构造器
 'no-lonely-if': 2, // // 禁止else语句内只有if语句
 'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超过2行
 'no-nested-ternary': 2, // 不使用嵌套的三元表达式
 'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
 'no-trailing-spaces': 2, // 一行结束后面不要有空格
 'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;简单的判断用三元表达式代替
 'object-curly-spacing': [2, 'always', { // 大括号内是否允许不必要的空格 always始终允许;never始终不允许
  'objectsInObjects': false,
  'arraysInObjects': false
 }],
 'arrow-spacing': 2, // =>的前/后括号
 'block-scoped-var': 2, // 块语句中使用var
 'no-dupe-class-members': 2,
 // 'no-var': 1, // 禁用var,用let和const代替
 'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法
 'array-bracket-spacing': [2, 'never'], // 是否允许非空数组里面有多余的空格
 'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首
 // 'semi-spacing': [2, { 'before': false, 'after': false }], // 分号前后空格
 'keyword-spacing': ['error'],
 'space-before-blocks': 2, // 不以新行开始的块{前面要不要有空格
 'block-spacing': [2, 'always'],
 'space-before-function-paren': [2, 'never'], // 函数定义时括号前面要不要有空格
 'space-in-parens': [2, 'never'], // 小括号里面要不要有空格
 'spaced-comment': [1, 'always',
  {
  'exceptions': ['-', '*', '+']
  }], // 注释风格要不要有空格什么的
 'arrow-parens': 0,
 // allow async-await
 'generator-star-spacing': 0,
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 },
 globals: {
 '$': false,
 'jquery': false,
 'ActiveXObject': false,
 'arbor': true,
 'layer': false
 }
}

运行 npm run lint 会给出报错,运行 npm run serve 也会对项目进行eslint校验,无法通过校验就会报错

使用eslint和githooks统一前端风格的技巧

可以结合vscode的eslint插件快速修复无法通过验证的代码,首先下载插件,然后更改setting.json配置文件,具体如下:

"eslint.validate": [
 "javascript",
 "javascriptreact",
 "vue-html"
],
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}

配置完成之后重启vscode,在编辑代码的时候如果未符合eslint的校验,保存时会自动修复代码。

添加git hooks

前端团队开发中如果没有做正确的校验就提交了代码,拉取代码时会导致很多地方爆红不符合定制的开发规范,因此可以在提交代码时做些限制.在 git 提交代码时,会触发一些列的钩子函数,可以通过 husky 这个git hooks的工具来进行代码提交校验,需要先安装依赖包 cnpm i -D husky lint-staged @commitlint/config-conventional @commitlint/cli .然后在package.json中添加如下代码:

// package.json
"husky": {
 "hooks": {
 "pre-commit": "lint-staged",// 在pre-commit阶段运行下面配置的校验功能
 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" // 这个是规范提交的信息的,结合commitlint.config.js使用
 }
},
"lint-staged": {
 "src/**/*.{js,vue}": [
 "npm run lint",
 "git add ."
 ]
}
// commitlint.config.js
// 参考的官方配置,提交的信息必须按照下面规范书写,类似`git commit -m 'feat: 添加eslint'`
module.exports = {
 parserPreset: 'conventional-changelog-conventionalcommits',
 rules: {
 'body-leading-blank': [1, 'always'],
 'body-max-line-length': [2, 'always', 100],
 'footer-leading-blank': [1, 'always'],
 'footer-max-line-length': [2, 'always', 100],
 'header-max-length': [2, 'always', 100],
 'scope-case': [2, 'always', 'lower-case'],
 'subject-case': [
  2,
  'never',
  ['sentence-case', 'start-case', 'pascal-case', 'upper-case']
 ],
 'subject-empty': [2, 'never'],
 'subject-full-stop': [2, 'never', '.'],
 'type-case': [2, 'always', 'lower-case'],
 'type-empty': [2, 'never'],
 'type-enum': [
  2,
  'always',
  [
  'build',
  'chore',
  'ci',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'
  ]
 ]
 }
}

接下来修改文件提交代码,最后commit的时候就会对已修改文件进行校验,如果eslint校验不通过,或者commit信息不符合规范都是不能提交代码的,以上步骤已经可以很好的改善代码和提交信息规范,这对于团队项目开发能够很大对提高代码质量。

总结

到此这篇关于使用eslint和githooks统一前端风格的技巧的文章就介绍到这了,更多相关eslint和githooks统一前端风格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
You might like
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
JS中的多态实例详解
2017/10/15 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
PyMongo安装使用笔记
2015/04/27 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
市场营销专业推荐信
2013/11/03 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
加拿大留学自荐信
2014/01/28 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
店长岗位职责
2015/02/11 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书