为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)
因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。
eslint
eslint 是一个代码校验工具,用来规范项目代码风格。
初始化
通过 npm install eslint
后使用 npx eslint --init
来根据问答生成 .eslintrc.js
配置文件。我的项目是 React + JavaScript,这里选择了 Airbnd 的规则来校验,不同的项目类型可以进行其它的选择。配置详细介绍可以参考这一篇 规范代码编写风格就用 eslint 和 prettier 。
生成的 .eslintrc.js
文件包含当前 eslint 配置的规则,在命令行中使用 npx eslint ./xxx.js
文件时,eslint 就会读取项目的配置文件对其内容进行匹配,如果没有配置文件,则会出现图中第一次执行的命令的回应。【Oops!Something went wrong! 😦 ,ESLint couldn’t find a configuration file】
通过 npx eslint
可以检测出文件不符合规范的地方,增加 --fix
参数可以自动修复部分错误。但我们开发的过程中也很少会通过命令检测文件代码是否规范,如果有一个时刻检测代码,当代码出现问题标红提示,并且 ctrl + s 保存自动格式化的工具就好了!vscode 插件来满足你以上要求
vscode 插件
安装【eslint】插件
并在 vscode 的 settings.json 中进行增加配置,即可享受实时校验代码是否符合规范,并保存后自动修复的功能。
// settings.json"editor.codeActionsOnSave": {"source.fixAll.eslint": true,
},
prettier
prettier 也会对代码进行格式化,和 eslint 两者的区分在于,eslint 校验的范围会偏向于代码是否优雅,比如是否存在 console 语句、是否声明函数但未使用,而 prettier 更侧重于格式,比如一行展示多少个字符,使用单引号还是双引号。
配置
首先通过 npm install prettier
安装依赖,然后再新增配置文件 .prettierrc.js
,在文件里定义需要的配置,详细字段可以参考官网。
// .prettierrc.js
module.exports = {printWidth: 100,semi: true,singleQuote: true,tabWidth: 2,
};
判断是否生效直接使用命令 npx prettier --write [指定文件]
,查看文件是否根据 prettier 的规则格式化。
vscode 插件
同 eslint 一样,使用 vscode 插件 prettier 来实现保存后自动格式化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zo8Q3dE4-1691313614577)(en-resource://database/2230:1)]
// settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode"// 如果不生效,可能要针对每种类型的文件来执行格式化规则
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"
},
设置完之后按住 ctrl + s,自动保存为 .prettier 的文件版本,此时可能与 eslint 校验会存在冲突,在 eslint 插件的检查下,与 eslint 不一致的部分仍然会标红。所以需要将 eslint 规则和 prettier 保持一致。
通过以上本地设置,可以规范自己的开发,但多人开发时难免会存在有些开发者提交的代码不规范,那我们可以在提交时设置一个关卡,通过 git 代码提交时的钩子来阻挡不规范的提交。
git hooks
在网络上找到一张 git hooks 执行流程图示,从 git commit
开始有一些卡点,我们主要应用的钩子是 pre-commit
(通过eslint检测下是否有报错代码)、commit-msg
(提交的message格式是否正确)
.git/hooks
项目根目录初始化时就会存在 .git 文件夹,其中 hooks 文件夹包含了 git 整个流程的钩子,当前文件后缀以 .sample 结尾,去除掉 .sample 后缀并制定校验规则会直接生效。
这里修改了 pre-commit
的规则,为了演示直接设置校验指定文件,正常应该是检测使用 git add 添加到暂存区的文件,没有通过 eslint 校验时,则不会执行 git commit。
但我们发现,即使修改了 .git/hooks 文件夹下的文件,也不会显示文件修改,更没法将其添加到暂存区、本地仓库甚至到远程仓库,其他同事拉取代码后提交仍然不会有校验。
自定义文件下的hooks
既然 .git 文件不会提交到远程仓库,那么我们可以找一个代码可以被跟踪的地方,并且告诉 git 执行工作流的时候来我指定的文件夹执行文件。
在项目根目录新增文件夹 .myhooks(其他的也可以),新增 pre-commit 文件,增加 eslint 的校验,并且通过命令git config core.hooksPath .myhooks
修改 git 执行 hooks 的地址,可进入 .git 目录执行 cat config
查看配置是否修改。
将 .git/hooks 文件中的 .sample 后缀恢复,git commit 校验仍然是生效的,表示我们自定义的 hooks 是成功执行的。
如果希望达到共享的目的,将 .myhooks 文件夹推送到远程后,需要在协同开发者的笔记本都配置 git config core.hooksPath .myhooks
,这一步无论是手动敲命令,还是通过工具都有些许麻烦,况且不同项目直接自定义的 hooks 文件还有可能不同,造成维护困难。
husky
针对以上问题,husky
为我们提供了解决方案。
配置
通过 npm install husky
以及 npx husky install
在项目根目录生成 .husky 文件夹,将 pre-commit 文件从自定义的文件夹中移过来。
增加 package.json 的配置,在执行 npm install 之后会执行 npm run prepared ,这样每次新增依赖时,会更新 husky。
// package.json
"script": {"prepared": "husky install"
}
原理
此时再执行 git commit 操作时,和前面我们看到的校验是一致的。其实 husky 的实现原理和我们自定义 hooks 的一致,通过命令行去改变执行 git hooks 的位置。
通过 husky 可以共享 git hooks 的校验规范,但是我们应该对哪些文件进行校验呢?
以上为了演示方便,使用 eslint 去校验指定文件,也可以指定文件夹,比如 src ,但这样的校验方式会导致我明明只修改了一个文件,却需要去修复完src目录下所有文件的 bug 才能提交,极大增加了开发难度。
正确的方案应该是增量检测,只检测使用 git add 添加到暂存区的文件,如果这部分文件有问题,修复即可提交。
lint-staged
lint-staged 就可以实现对于暂存区的检测。
配置
使用 npm install lint-staged
安装后,在 package.json 中配置 lint-staged 指令,因为需要使用到 eslint 和 prettier 的自动修复,所以还需要将他们添加到 script 属性中。
// package.json
"script": {"eslint-fix": "eslint --fix", // 新增eslint的规则, --fix 表示自动修复"prettier-format": "prettier --write", // 新增eslint的规则, --write 表示自动修复
}
"lint-staged": {"*.{js,jsx,,ts,tsx}": ["npm run eslint-fix","npm run prettier-format" ]
}
然后在 .husky/pre-commit 将 npx eslint 修改成 npx lint-staged
,再次执行 git commit 就可以 eslint 只对暂存区的文件进行校验。
commitlint
以上是执行 commit 操作之前对于暂存区代码进行校验,防止不规范的代码提交,在提交时还有一项需要注意:提交的注释内容(git commit -m 后跟的引号中内容)是否清晰,回溯 git 提交记录时,不清晰的描述导致排查问题、寻找功能会非常低效。
为了保证提交注释的可阅读性,统一使用的规范格式为 <type>: <subject>
(subject前面有一个空格)。
- type 代表标识,比如:feat(新特性)、fix(修复bug)、style(样式调整)、refactor(重构)、docs(文档说明)
- subject 对于此时提交的描述信息
配置
以上属于口头规范,很有可能不被遵守,为了保证提交规范一致,还需要增加这些配置。
首先安装提交校验规范所需要的依赖,npm install @commitlint/cli @commitlint/config-conventional -D
新增 .commitlintrc.js 配置文件,设置 commit 备注信息的校验方案。
// .commitlintrc.js
module.exports = {extends: ['@commitlint/config-conventional'],
};
commit-msg钩子
再回到这张图,commit-msg 的钩子 是提交到本地库之前执行的,在这个阶段来校验 commit 信息是否符合规范比较合适。
在 .husky 文件夹下新增 commit-msg 文件,增加校验命令
#!/bin/sh
npx --no -- commitlint --edit ${1}
- npx --no :表示只使用项目 node_modules 下的脚本,不允许找不到时下载
- commitment --edit <文件名>:执行 commitment 命令行工具,–edit 表示从文件中提取commmit内容
- $1:指向 .git/COMMIT_EDITMSG 文件,这里存放着最后一次 commit 信息
以上便完成了对于 commit 注释内容的校验。我们在项目中常定义的文件类型,除了 js,还有 css ,eslint 可以对 js / jsx / vue 等文件类型进行校验,那么 css 也需要可以规范的工具。
stylelint
stylelint 可以完成对于 css/scss/less 等样式表文件的校验,功能类似于 eslint 对于 js文件。
配置
因为项目使用的样式表为 scss 格式,所以安装处理 scss 文件的依赖,npm install stylelint stylelint-scss stylelint-config-recommended-scss -D
,注意 stylelint 需要安装合适的版本,因为版本不正确的报错 Error:Undefined rule annotation-no-unknow 而排查了很久。
新增 stylelintrc.js
文件,告诉 stylelint 校验规则
module.exports = {extends: ['stylelint-config-recommended-scss'],
};
插件
和 eslint / prettier 相似,它也有 vscode 插件在编辑时 css/scss 文件时按住 ctrl+s 实现代码自动格式化
vscode 需要增加一些配置
// settings.json
"editor.codeActionsOnSave": {"source.fixAll.stylelint": true},"stylelint.validate": ["css", "scss"],
commit
和 eslint 一样,在提交时设置校验避免不规范的 css 代码提交到远程仓库,需要在 package.json 中增加配置。
"script": {"eslint-fix": "eslint --fix","prettier-format": "prettier --write","stylelint-fix": "stylelint --fix" // 新增stylelint的规则, --fix 表示自动修复
}
"lint-staged": {"*.{js,jsx,,ts,tsx}": ["npm run eslint-fix","npm run prettier-format"],"*.{css,scss}":["npm run stylelint-fix" // 新增 stylelint 校验]
}
stylelint 也同样是作用于暂存区的文件,和 eslint、prettier 一样,只是校验不同类型的文件,所以也配置在 因为之前在 lint-staged 的规则中,在 pre-commit 文件中不需要增添新的命令。
在提交文件时就可以看到对于 css/scss 等样式表的检测,如果报错会终止提交。
总结
- eslint 用来规范 js/ts/jsx 等类型文件编码时语法
- prettier 保障 js/ts/jsx 等类型文件编码时格式
- husky 为执行 git commit 操作设置卡点,避免不规范提交
- lint-staged 保证校验的区域只在暂存区
- commlint 使得commit msg按照既定格式
- stylelint 确保 css/scss 类样式表文件也能易读统一
以上工具/插件在简化前端开发流程,规范代码格式上有很大的帮助,祝我们都能写出优雅的代码。以上就是 前端工程化之react项目统一代码规范
相关内容,关于 前端开发
,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~
相关文章:

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)
因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和…...
小研究 - MySQL 数据库安全加固技术的研究(一)
随着信息系统的日益普及,后台数据库的安全问题逐步被人们重视起来。以当下热门的MySQL 数据库为例,通过分析数据库的安全机制以及总结数据库面临的安全风险,针对性地提出了相应的加固策略,为数据库的安全加固工作提供了技术支撑。…...

linux安装redis带图详细
如何在Linux系统中卸载Redis 一、使用apt-get卸载Redis sudo apt-get purge redis-server如果使用apt-get安装Redis,可以使用apt-get purge命令完全卸载Redis。其中,purge命令会不仅仅删除Redis二进制文件,还会删除配置文件、数据文件和日志…...
MySql——数据库常用命令
一、关于数据库的操作 查看mysql中有哪些数据库 show databases;显示创建指定数据库MySQL语句 SHOW CREATE DATABASE 数据库名:使用指定数据库 use 数据库名;查看当前使用的是哪个数据库 select database();查看指定数据库下有哪些表 use 数据库名; -- 先选择…...

如何通过 WordPress 数据库启用插件?【进不去后台可用】
如果您无法访问 WordPress 后台并需要激活插件以恢复访问权限,则可以通过 WordPress 数据库来实现。本文将向您展示如何使用数据库轻松激活 WordPress 插件。 何时使用数据库激活 WordPress 插件? 许多常见的 WordPress 错误会阻止网站所有者访问 WordP…...

芯片热处理设备 HTR-4立式4寸快速退火炉
HTR-4立式4寸快速退火炉 HTR-4立式4寸快速退火炉(芯片热处理设备)广泛应用在IC晶圆、LED晶圆、MEMS、化合物半导体和功率器件等多种芯片产品的生产,和欧姆接触快速合金、离子注入退火、氧化物生长、消除应力和致密化等工艺当中,通…...

小研究 - 基于 MySQL 数据库的数据安全应用设计(一)
信息系统工程领域对数据安全的要求比较高,MySQL 数据库管理系统普遍应用于各种信息系统应用软件的开发之中,而角色与权限设计不仅关乎数据库中数据保密性的性能高低,也关系到用户使用数据库的最低要求。在对数据库的安全性进行设计时…...

mysql转sqlite3
在项目中需要将mysql迁移到sqlite3中,此时需要作数据转换 准备工作 下载mysql2sqlite转换工具 https://github.com/dumblob/mysql2sqlite/archive/refs/heads/master.zip 下载sqlite3 https://www.sqlite.org/download.html 转换 命令行中输入如下命令 1、cd …...
在linux中使用 ./configure 时报错
./configure --build编译平台 --host运行平台 --target目标平台 1. configure: error: cannot guess build type; you must specify one 解决办法:指定编译平台 ./configure --buildarm 2. configure: error: Either a previously installed…...
【LeetCode 算法】Reverse String 反转字符串
文章目录 Reverse String 反转字符串问题描述:分析代码双指针 Tag Reverse String 反转字符串 问题描述: 编写一个函数,其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间,…...
linux sysctl.conf 常用参数配置
kernel.sysrq 0 kernel.core_uses_pid 1 kernel.msgmnb 65536#默认为16384,调高 kernel.msgmax 65536#默认为16384,调高 kernel.shmmax 68719476736#以sctl -a实际查询出的为准 kernel.shmall 4294967296#以sctl -a实际查询出的为准 net.ipv4.ip_f…...

【stm32】初识stm32—stm32环境的搭建
文章目录 🛸stm32资料分享🍔stm32是什么🎄具体过程🏳️🌈安装驱动🎈1🎈2 🏳️🌈建立Start文件夹 🛸stm32资料分享 我用夸克网盘分享了「STM32入门教程资料…...
Spring Boot3.0基础篇(二):Web 开发
Web 开发 Spring Boot Web 开发非常的简单,其中包括常用的 json 输出、filters、property、log 等 json 接口开发 在以前使用 Spring 开发项目,需要提供 json 接口时需要做哪些配置呢 添加 jackjson 等相关 jar 包配置 Spring Controller 扫描对接的方…...
【WebRTC---源码篇】(三:一)音频轨
音频轨的创建时序在Conductor::AddTracks()中 rtc::scoped_refptr<webrtc::AudioTrackInterface> audio_track(peer_connection_factory_->CreateAudioTrack(kAudioLabel, peer_connection_factory_->CreateAudioSource(cricket::AudioOptions()))); 通过代码我们…...
POM文件总体配置详细说明
今天跑一个项目,报错显示他的pom文件有问题,需要一个标准的pom文件对比,希望能帮到各位! <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" …...

【项目 计网3】Socket介绍 4.9字节序 4.10字节序转换函数
文章目录 4.8 Socket介绍4.9字节序简介字节序举例 4.10字节序转换函数 4.8 Socket介绍 所谓 socket(套接字),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端,提供了应用层进…...
Spring Security 和 Apache Shiro 登录安全架构选型
Spring Security和Apache Shiro都是广泛使用的Java安全框架,它们都提供了许多功能来保护应用程序的安全性,包括身份验证、授权、加密、会话管理等。 Spring Security和Apache Shiro都是非常常用的登录安全框架,两者在登录安全架构的选型上各有特点: Sp…...

如何恢复已删除的 PDF 文件 - Windows 11、10
在传输数据或共享专业文档时,大多数人依赖PDF文件格式,但很少知道如何恢复意外删除或丢失的PDF文件。这篇文章旨在解释如何有效地恢复 PDF 文件。如果您身边有合适的数据恢复工具,PDF 恢复并不像看起来那么复杂。 便携式文档格式(…...

服务器数据恢复-raid5同步过程中又有一块磁盘报警的数据恢复案例
服务器数据恢复环境: 某研究院一台DELL存储,15块硬盘搭建的一组RAID5磁盘阵列。 该RAID5阵列只有一个卷组,该卷组占用了阵列的全部空间;该卷组只有一个起始位置为0扇区的XFS裸分区。 服务器故障&初检&分析: 该…...

解密Redis:应对面试中的缓存相关问题2
面试官:Redis集群有哪些方案,知道嘛? 候选人:嗯~~,在Redis中提供的集群方案总共有三种:主从复制、哨兵模式、Redis分片集群。 面试官:那你来介绍一下主从同步。 候选人:嗯ÿ…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...

【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...