React18入门(第二篇)——React18+Ts项目配置husky、eslint、pretttier、commitLint

本文主要是介绍React18入门(第二篇)——React18+Ts项目配置husky、eslint、pretttier、commitLint,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

我的项目版本如下:

  • React: V18.2.0
  • Node.js: V16.14.0
  • TypeScript:最新版
  • 工具: VsCode

本文将采用图文详解的方式,手把手带你快速完成在React项目中配置husky、prettier、commitLint,实现编码规范的统一,git提交规范的统一。


文章目录

  • 前言
  • 一、使用 eslint
      • 1.1 装包
      • 1.2 ESLint 插件安装
      • 1.3 创建命令并使用
  • 二、使用 prettier
      • 2.1 装包
      • 2.2 创建配置文件
      • 2.3 安装插件
      • 2.3 创建命令并使用
      • 2.4 vscode 配置
      • 2.5 代码风格配置
      • 2.6 重启 vscode
  • 三、将代码提交到 git 仓库
  • 四、使用 husky
      • 4.1 简介
      • 4.2 安装
      • 4.3 编辑package.json >准备脚本并运行一次
      • 4.4 增加钩子函数
  • 五、使用 commitlint
      • 5.1 安装
      • 5.2 配置
      • 5.3 安装 husky
      • 5.4 增加 hook
      • 5.5 测试一下
      • 5.6 正确且优雅的提及
      • 5.7 提交格式
      • 5.8 查看合法的提交前缀
  • 六、授人以渔
      • 6.1 以上步骤如何来的?
      • 6.2 以 husky 为例
  • 七、创作不易,点赞收藏不迷路

一、使用 eslint

1.1 装包

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

1.2 ESLint 插件安装

在这里插入图片描述


1.3 创建命令并使用

新增命令

"lint": "eslint \"src/**/*.+(js|ts|jsx|tsx)\"",

在这里插入图片描述
执行 npm run lint :
在这里插入图片描述

二、使用 prettier

2.1 装包

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

在这里插入图片描述

2.2 创建配置文件

在根目录中创建 .eslintrc.js 文件,写入如下代码

module.exports = {"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],"overrides": [],"parser": "@typescript-eslint/parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module"},"plugins": ["react","@typescript-eslint"],"settings": {"react": {"version": '18.2.0', // 指定你的 React 版本,可以是具体版本号或 "detect" 自动检测},},"rules": {}
}

2.3 安装插件

Prettier - Code formatter

在这里插入图片描述
安装成功后:
在这里插入图片描述

2.3 创建命令并使用

新增命令:表示扫描文件格式,并将文件中的代码修改为正确的格式

"format": " prettier --write \"src/**/*.+(js|ts|jsx|tsx)\"",

在这里插入图片描述
运行命令:
在这里插入图片描述
在这里插入图片描述

2.4 vscode 配置

配置成功后,之前讲的通过 npm run format 可以将双引号格式化为 单引号,现在仅需使用 ctrl + s 保存文件,vscode 即可自行格式化

{"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

在这里插入图片描述

2.5 代码风格配置

根目录下新建 .prettierrc.js 文件,并写入如下代码:

module.exports = {	// 箭头函数只有一个参数的时候可以忽略括号arrowParens: 'avoid',// 括号内部不要出现空格bracketSpacing: true,// 行结束符endOfLine: 'auto',// 行宽printWidth: 100,// 换行方式proseWrap: 'preserve',// 分号semi: false,// 使用单引号singleQuote: true,// 缩进tabWidth: 2,// 使用tab缩进useTabs: false,// 后置逗号,多行对象、数组在最后一行增加逗号trailingComma: 'es5',parser: 'typescript',
}

2.6 重启 vscode

重启 vscode 后,我们在 .prettierrc.js 文件中配置的代码风格才会生效


三、将代码提交到 git 仓库

如何使用 vscode 将代码推送至 git 仓库👉:http://t.csdnimg.cn/t7YT9


四、使用 husky

4.1 简介

  • 一个 git hook 工具
  • 在 git commit 之前执行自定义的命令
  • 如执行代码风格的检查,避免提交非规范代码

最终实现的是,即使多人协同开发项目,最终提交到远程仓库中的,也是符合规范的、风格统一的代码。

4.2 安装

npm install husky -D

4.3 编辑package.json >准备脚本并运行一次

npm pkg set scripts.prepare="husky install"
npm run prepare

4.4 增加钩子函数

// 表示 git commit 之前执行 npm run lint 
npx husky add .husky/pre-commit "npm run lint"
// 表示 git commit 之前执行 npm run format 
npx husky add .husky/pre-commit "npm run format"
// 表示 git commit 之前执行 npm run git add .
npx husky add .husky/pre-commit "git add ."

在这里插入图片描述
简单测试一下:
在这里插入图片描述


五、使用 commitlint

5.1 安装

windows:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

mac:

npm install --save-dev @commitlint/{config-conventional,cli}

5.2 配置

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

5.3 安装 husky

注:已安装 husky 的不用重复安装
npm:

npm install husky --save-dev

yarn

yarn add husky --dev

5.4 增加 hook

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

5.5 测试一下

随便写一个提交描述,将无法成功提交
在这里插入图片描述

5.6 正确且优雅的提及

参考 git 上的开源项目 vue-pure-admin
在这里插入图片描述


参考大家熟知的 vue.js :
在这里插入图片描述

5.7 提交格式

前缀 + 冒号 + 一个空格 + 本次提交描述

5.8 查看合法的提交前缀

在这里插入图片描述
在这里插入图片描述


六、授人以渔

6.1 以上步骤如何来的?

或许屏幕前的你,会好奇,为啥我就知道是这些命令,然后这样配置就能成功,其实这些步骤,在 github 上都有写, 而且比你在网上找的博客帖子更加准确。

6.2 以 husky 为例

在这里插入图片描述
在这里插入图片描述


七、创作不易,点赞收藏不迷路

这篇关于React18入门(第二篇)——React18+Ts项目配置husky、eslint、pretttier、commitLint的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1370

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

hadoop开启回收站配置

开启回收站功能,可以将删除的文件在不超时的情况下,恢复原数据,起到防止误删除、备份等作用。 开启回收站功能参数说明 (1)默认值fs.trash.interval = 0,0表示禁用回收站;其他值表示设置文件的存活时间。 (2)默认值fs.trash.checkpoint.interval = 0,检查回收站的间隔时间。如果该值为0,则该值设置和fs.trash.interval的参数值相等。

NameNode内存生产配置

Hadoop2.x 系列,配置 NameNode 内存 NameNode 内存默认 2000m ,如果服务器内存 4G , NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列,配置 Nam

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释:wolfCrypt是一个开源的、轻量级的、可移植的加密库,支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作,而不依赖其他加密库。 2. DTLS Support 解释:DTLS(Datagram Transport Layer Security)是一种基于UDP的安全协议,提供类似于

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定