使用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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JS功能代码集锦
May 04 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
element 动态合并表格的步骤
Dec 31 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
什么是Remote Module
2016/06/10 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
新领导上任欢迎词
2014/01/13 职场文书
邮政员工辞职信
2014/01/16 职场文书
征婚广告词
2014/03/17 职场文书
财务管理专业求职信
2014/06/11 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
部队2014年终工作总结
2014/11/27 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python