使用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 getStyle获取最终样式函数代码
Apr 01 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
js实现按座位号抽奖
Apr 05 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
解决layer图标icon不加载的问题
Sep 04 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错误级别的设置方法
2013/06/17 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
功能强大的php分页函数
2016/07/20 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python字符串详细介绍
2015/05/09 Python
Python装饰器用法实例总结
2018/02/07 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python后端接收前端回传的文件方法
2019/01/02 Python
pytorch之添加BN的实现
2020/01/06 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
致垒球运动员加油稿
2014/02/16 职场文书
公司投资建议书
2014/05/16 职场文书
初中军训感言
2015/08/01 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS