Git Hooks 就是在 Git 执行特定事件(如commit、push、receive等)时触发运行的脚本,类似于“钩子函数”,没有设置可执行的钩子将被忽略。
一个项目如果涉及到多人协作,由于每个人代码的书写习惯和风格不太一样,如果没有统一的规范,那就会很乱,这对代码的可维护性大大降低。
假如团队中的小伙伴在提交代码时没有遵循规范要求,例如只写了一个"修改"或"更新,这会给团队中其他小伙伴造成困扰呢,不得不花时间查看代码和推测逻辑。
https://www.npmjs.com/package/lint-staged
webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint
https://juejin.cn/post/6947872709208457253
解决git hooks的生成,hooks位于/.git/hooks/,下面的pre-commit的则为/.git/hooks/pre-commit,为bash脚本
因为换了一个公司,发现在这里有太多东西学了,而且技术大牛特别多,仿佛从原始时代进入了工业时代,所以一直在埋头学习,就好久没有更新文章了。
ESLint 是一个在前端工具链中被众人熟知的代码检查工具,它能够被开发者灵活的配置,使其能够达到我们提前制定好的代码规范的要求,并且在编码过程中实时检测输入的代码,对于不符合代码规范的代码警告或报错。不得不说,在有了 ESLint 这个工具之后,团队之间开发维护会舒服很多,因为在强制约束下,你只需要去理解代码本身的含义就可以了,对于风格的问题则少了很多麻烦。
在我们介绍了Husky、Commitlint之后,来看一个前端文件过滤的工具Lint-staged,代码的格式化肯定会涉及到文件系统,一般工具会首先读取文件,格式化操作之后,重新写入。对于较大型的项目,文件众多,首先遇到的就是性能问题,虽然如Eslint之类的也有文件过滤配置,但毕竟还是对于匹配文件的全量遍历,如全量的.js文件,基本达不到性能要求,有时还会误格式化其他同学的代码,因此我们引入Lint-staged,一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。
大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。
eslint 是一个开源的 js 代码检查工具,初衷是为了让程序员可以创建自己的检测规则。实际生产中,团队内往往会制订一套统一的标准,让整个团队的编码风格达到一致。 eslint 其实与 webpack 没有任何关系,两者并不互相依赖,甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。
说明: 这里使用脚手架安装项目的时候遇到了一个问题,大致可能说的是 node 版本不匹配,也就是我的版本低了,截图如下。
习惯用webpack对项目开发工程化,接触小程序后,稍微有点不适应,市面上有taro等优秀的小程序框架可以使用,由于负责项目历史背景,而无法大规模改造,因此只能做一些简单的工程化方案
对于多人参与的中大型前端项目,代码质量与代码风格的重要性不言而喻,对于开发者而言,当你重构或者接手别人工作时,都期望是一目了然的舒爽,而不是令人头晕眼花的"shi shan"。对于团队而言,良好的代码质量可以减少产品的缺陷,一致的代码风格能够提升团队开发效率。
看完 《前端规范之Git工作流规范(Husky + Commitlint + Lint-staged) https://www.cnblogs.com/Yellow-ice/p/15349873.html》,再次修改本文
在执行 git commit 后,首先要通过 pre-commit-msg hook 对更改的文件进行代码格式、测试用例检查,这个时机点检查既不会影响开发过程,又能做统一的收敛,性价比很高。如果直接配置 git hooks,会比较麻烦而且不便于多人合作开发,所以这里使用 husky 库设置:
众所周知,一个 Javasript 项目的脚本类工具,可以使用 package.json 中的 scripts 字段来组织,简单来说,这就是 npm script。
大家在做前端开发的时候,为了保证团队成员提交代码的质量,一般都会对代码进行代码质量检查和代码美化工作,通常的做法是进行一系列的配置,借助于 eslint、prettier、lint-staged、husky 等工具实现代码的检测工作。但是这个过程涉及众多,配置起来也很繁琐,而且针对不同的项目都需要进行重复配置,无疑增加了大家的工作量,那么我要解决的就是这个问题,提供一个命令行工具来封装上述检测工具,简化配置步骤。
npx create-react-app react-standard-f –template typescript
我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具,可以完成以最小的代价在Git提交到远程仓库前,格式化为统一风格的代码,eslint大家都很熟悉这里就不列举了。下面举一个配置。
1、 Nuxt3 中是使用 @nuxt/eslint-config 进行代码检查和格式化,执行安装命令:
Prettier 和 ESLint 是两个互补的工具,它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码,而 ESLint 则执行更复杂的静态分析和规则检查。
基于最新的一些库来规范项目, 比如格式化和提交预处理等~ 一些库的最新版的配置更加独立了, 对于工程化来说,其实更加直观了~ 围绕react技术栈加入相关门禁来开展文章~
早年间有幸在Raychee哥门下当小弟,学到两把刷子。在编程路上,他的很多思想深深影响了我,比如笔者今天要分享的主题。在程序开发中,有个utils包,叫做实用程序包,程序员们会把项目中通用的东西抽离出来放到这个里面,这有利于项目工程化的落地,提高项目的可维护性,减少代码冗余,锻炼编码能力,提高编码效率,理解编程思想。
ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Java
在真实的工程项目中,尤其是多人协作的场景下,代码规范就变得非常重要了,它可以用来统一团队代码风格,避免不同风格的代码混杂到一起难以阅读,有效提高代码质量,甚至可以将一些语法错误在开发阶段提前规避掉。但仅有规范本身不够,我们需要自动化的工具(即Lint 工具)来保证规范的落地,把代码规范检查(包括自动修复)这件事情交给机器完成,开发者只需要专注应用逻辑本身。
规范比业务开发搬砖更为重要,没有一个好的编码规范,维护老的代码或者是编写新的代码都非常痛苦
husky是一个Git Hook,可以帮助我们对commit前,push前以及commit提交的信息进行验证,现在我们就来安装并配置一下这个工具,首先通过自动配置命令安装,命令如下:
prettier的配置项比较少(容易配置),且只专注于代码样式,而eslint还提供语法检查,现在的eslint也集成了formatter功能。
本文虽然使用 Vite 创建了一个 Vue3 + TS 的项目,但其实文中涉及的内容和技术栈并没有关系,主要是结合 ESLint ,Husky,等第三方库实现比较规范的现代化前端工程,可应用于任何技术栈的项目中
Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言,您可以结合 ESLint 和 Prettier,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。 备
在日常需求迭代中,代码的规范与质量是编码的重要一环。Eslint 作为规则扫描器,能够对前端代码进行有效管控,避免出现低级错误,对于前端项目或多或少肯定都会看到 eslint 的相关配置。
husky主要是触发钩子函数的,lint-staged主要是检查,eslint则是约束工具
在每一个使用 git 进行版本管理的仓库,都有一个目录 .git/hooks,包含 commit 各个阶段 Hooks 的脚本。这些 Hooks 在 git 操作 commit、push、merge 等得时候,可以做前置或者后置的操作,例如 pre-commit 在 git commit 前可以做代码校验,校验代码的时候使用的ESLint,格式化使用的是 prettier。Git 支持的常用钩子见下表,更多请查看官网Hooks:
当前,前端项目支持代码规范校验、代码格式化已经必不可少,同时需要支持代码提交前对代码格式校验预检查,这里提供一份最简单的配置供大家参考。
最近遇到了一个老项目,比较有意思的是这个项目集前后端的代码于一起,而后端也会去修改前端代码,所以就出现了后端用 IntelliJ IDEA 来开发前端项目,而前端用 VSCode 来开发前端项目的情况。于是乎,出现了代码规范的问题,所以就有了这篇文章,整理了一下前端代码校验以及在 Vue 项目中的实践。
系列常规操作,没兴趣的可以跳过这篇水文. 写过Angular 2+的小伙伴会有一种天然的熟悉感. 因为Nest基本就是同一个思想模式搞得~~
Prettier是一个支持多语言的代码格式工具,如常用的:js、jsx、Vue、Flow、Ts、HTML、CSS等,非常全面,将代码解析为AST,然后重新组装,目的是最终输出风格统一的代码,对比eslint对error的fix要强一些,如最大长度的改动,eslint只是对有问题的地方进行格式化修改,不改动源代码风格,而prettier是对全量的代码进行格式化。
大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
作者:陈龙 https://zhuanlan.zhihu.com/p/81764012 已获取作者授权,请勿未经允许转载。
在前面的文章中,我为大家带来了许多Vue 实战技巧,也得到了大家的许多好评,但中间还是存在着些许漏洞,在此向大家表示歉意。其实在前面那些技巧之外,我们还可以做的更多,让我们的开发流程更流畅,开发体验更好,项目性能更上一层楼,怎么做呢,我们一起来看看。
对于编程语言进行「语法、书写」校验,能有效「归并」不同开发者的「不同风格」,还能检验出一些语法错误。
本文是基于Vite+AntDesignVue打造业务组件库[2]专栏第 10 篇文章【在 monorepo 中怎么组织和优化研发流程?】,前面几篇都在说函数库开发的相关内容,所以本文接着围绕这块说,主要是把研发流程梳理清楚,方便后续更多内容的铺开。
工欲善其事,必先利其器。对于写代码而言,也是需要有一套完善的工作流(工具和流程)。
关于这些问题,在之前的一篇介绍 lerna 的文章中已经详细介绍过,感兴趣的同学可以再回顾下。
讲代码规范的文章很多,但是很可惜没有一篇文章能讲好讲全,其他文章没完成的工作,就让这篇文章来完成吧。
领取专属 10元无门槛券
手把手带您无忧上云