使用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 02 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
神族 Protoss 历史背景
2020/03/14 星际争霸
用PHP实现小型站点广告管理
2006/10/09 PHP
一个PHP+MSSQL分页的例子
2006/10/09 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
python中random模块详解
2021/03/01 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
运动会稿件300字
2014/02/14 职场文书
操行评语大全
2014/04/30 职场文书
村居抓节水倡议书
2014/05/19 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript