前端的规范

假如团队中的小伙伴在提交代码时没有遵循规范要求，只写了一个"fix"或"update，这会给其他小伙伴造成困扰，不得不花时间查看代码和推测逻辑。

不仅会浪费了时间和精力，可能会导致项目以下问题：

  1. 可读性差

  2. 维护困难

  3. 变更历史不透明

  4. 自动化工具的不兼容

如何统一代码风格，规范提交呢？推荐使用前端规范全家桶 ESLint + Prettier + husky + lint-staged。

下面我会逐个讲解每个依赖包使用步骤，文末总结了使用过程中的问题，让大家少踩坑。

ESlint

eslint 是一个代码检测工具，用于检测代码中潜在的问题和错误，作用提高代码质量和规范。

安装步骤：

1、安装eslint

npm install eslint

2、快速构建 eslint 配置文件

npm init @eslint/config

参考如下gif操作：

图片

执行完成后，自动生成 eslint 配置文件.eslintrc.js可在 .eslintrc.js 中配置 rules 定义校验规则

    rules: {indent: ['error', 4], // 用于指定代码缩进的方式，这里配置为使用四个空格进行缩进。'linebreak-style': [0, 'error', 'windows'], // 用于指定换行符的风格，这里配置为使用 Windows 风格的换行符（\r\n）。quotes: ['error', 'single'], // 用于指定字符串的引号风格，这里配置为使用单引号作为字符串的引号。semi: ['error', 'always'], //用于指定是否需要在语句末尾添加分号，这里配置为必须始终添加分号。'@typescript-eslint/no-explicit-any': ['off'] // 用于配置 TypeScript 中的 "any" 类型的使用规则，这里配置为关闭禁止显式使用 "any" 类型的检查。}

husky：

husky 是一个 Git 钩子（Git hooks）工具，它可以让你在 Git 事件发生时执行脚本，进行代码格式化、测试等操作。

常见的钩子

  • pre-commit：在执行 Git commit 命令之前触发，用于在提交代码前进行代码检查、格式化、测试等操作。

  • commit-msg：在提交消息（commit message）被创建后，但提交操作尚未完成之前触发，用于校验提交消息的格式和内容。

  • pre-push：在执行 Git push 命令之前触发，用于在推送代码前进行额外检查、测试等操作。

具体的使用步骤如下：

安装

注意！需要在  .git 文件同目录下安装 husky，否则无法识别环境导致安装失败！

  1. 在项目根目录下运行以下命令安装 husky：

npm install husky --save-dev

  1. 启用git 钩子 输入以下命令

npm pkg set scripts.prepare="husky install"

安装成功后会在 package.json 文件中 script 中生成命令

注意！如为自动生成需手动添加，将以下内容粘贴到 package.json 文件中

// package.json
{"scripts": {"prepare": "husky install"}
}

  1. 创建.husky目录，执行如下代码

npm run prepare 

如图，执行成功后，项目中生成一个 .husky 目录

图片

注意！如未生成 .husky 目录，推荐使用命令 npx husky install

创建 Git 挂钩

pre-commit

在 Git 提交之前做eslint 语法校验 。

1、创建钩子脚本文件

npx husky add .husky/pre-commit "npm test"

执执行成功，.husky 目录多出一个 pre-commit 文件 ![1G4XQYMS(L9LGM9_NG}2)M.png

注意！window电脑输入后，可能会报错如下

Usage:husky install [dir] (default: .husky)husky uninstallhusky set|add <file> [cmd]

解决方式，删除 "npm test" 重新执行

npx husky add .husky/commit-msg

2、配置代码检测

git 提交前，执行 pre-commit  钩子脚本，进行校验代码语法、格式修复等操作。

1、打开 pre-commit 文件，内容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

2、下方代码添加到 pre-commit 文件中。lint-staged模块， 用于对 git 暂存区检测

npx --no-install lint-staged

npx --no-install lint-staged 是一个命令，用于在不安装 lint-staged 的情况下运行该工具。npx --no-install  命令用于从远程下载并执行指定的命令。

下一个章节会详细介绍 lint-staged的作用和使用步骤

lint-staged

  • 作用：lint-staged 可以让你在 Git 暂存（staged）区域中的文件上运行脚本，通常用于在提交前对代码进行格式化、静态检查等操作。

  • 使用方式：你可以在项目中使用 lint-staged 配合 husky 钩子来执行针对暂存文件的脚本。具体的使用步骤如下：

在项目根目录下运行以下命令安装 lint-staged：

npm install lint-staged --save-dev

在 package.json 文件中添加以下配置：

{"lint-staged": {// src/**/*.{js,jsx,ts,tsx} 校验暂存区、指定目录下的文件类型// 校验命令，执行 eslint 、prettier "src/**/*.{js,jsx,ts,tsx}": ["prettier --write","eslint --fix"]}
}

  • "src/**/*.{js,jsx,ts,tsx}" 是指定要针对的暂存文件模式，你可以根据自己的项目需求来配置。

  • ["prettier --write","eslint --fix"]为校验命令，可执行 eslint 、prettier 等规则

prettier

prettier 是一个代码格式化工具。prettier 与上述 husky 和 lint-staged 搭配使用，可以在提交代码之前自动格式化代码。具体的使用步骤如下：

在项目根目录下运行以下命令安装 prettier：

npm install prettier --save-dev

建 .prettierrc.js 文件，并定义你想要的代码样式，例如：

module.exports = {semi: true,//强制在语句末尾使用分号。trailingComma: 'none',//不允许在多行结构的最后一个元素或属性后添加逗号。singleQuote: true,//使用单引号而不是双引号来定义字符串。printWidth: 120,//指定每行代码的最大字符宽度，超过这个宽度的代码将被换行tabWidth: 4//指定一个制表符（Tab）等于多少个空格。
};

这里的配置选项根据你的需求定义，具体选项可以参考 prettier 文档。在 lint-staged 的配置中添加 "prettier --write"，例如：

{"lint-staged": {// src/**/*.{js,jsx,ts,tsx} 校验暂存区、指定目录下的文件类型// 校验命令，执行 eslint 、prettier "src/**/*.{js,jsx,ts,tsx}": ["prettier --write","eslint --fix"]}
}

这样当你进行 GIT 提交操作时，lint-staged 将自动运行 prettier 来格式化符合规则的文件。

配置 ctrl + s ，自动保存功能

第一种，在vscode 设置里面配置 点击Vscode的设置=>工作区=>文本编辑器

图片

安装步骤

Commitizen

是一个命令行工具，用于以一致的方式编写规范的提交消息。在使用Commitizen之前，你需要安装Commitizen及其适配器。

cz-conventional-changelog

是Commitizen的一个适配器，它实现了符合约定式提交（Conventional Commits）规范的提交消息。该规范定义了提交消息的格式和结构，并推荐了一些常用的提交类型和范围。

安装和使用步骤：

1、确保你的项目已经初始化并安装了 npm 或 yarn。2、打开命令行终端，并在项目根目录下运行以下命令来安装 commitizen 和 cz-conventional-changelog：使用 npm：

npm install --save-dev commitizen cz-conventional-changelog

使用 yarn：

yarn add --dev commitizen cz-conventional-changelog

3、安装完成后，在 package.json 中添加一个 config.commitizen 的字段，并设置它的值为 cz-conventional-changelog。示例如下：

"config": {"commitizen": {"path": "cz-conventional-changelog"}
}

在 package.json 中的 scripts 字段中添加一个 commit 的命令。示例如下：

"scripts": {"commit": "git-cz"
}

4、这将允许你使用 npm run commit 或 yarn commit 命令来进行交互式的提交。

现在，你可以使用 npm run commit 或 yarn commit 命令来进行提交。这将打开一个交互式的界面，引导你填写提交消息。

案例如下：1、提交修改文件

git add . 

2、开始交互式提交，填写规范信息

npm run commit

3、选择提交类型

? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new feature //新功能fix:      A bug fix //错误修复docs:     Documentation only changes //仅文档更改style:    [样式]Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)refactor: [重构] A code change that neither fixes a bug nor adds a featureperf:     A code change that improves performancetest:     Adding missing tests or correcting existing tests

4、根据提示填写内容，可选择空格跳过

? What is the scope of this change // 此更改的范围是什么
? Write a short, imperative tense description of the change//【必填】 简短的描述这个变化
? Provide a longer description of the change//提供变更的详细说明：
? Are there any breaking changes? //有什么突破性的变化吗？【y/n】
? Does this change affect any open issues? (y/N) //此更改是否会影响任何悬而未决的问题（是/否）// 完成提交，输出打印日志：
[master 2cf55e0] docs: 修改commitzen文档1 file changed, 2 insertions(+), 2 deletions(-)

当你完成提交消息后，Commitizen 会自动生成符合规范的提交消息，并将其添加到 Git commit 中。根据 cz-conventional-changelog 的规范，提交消息需要包括类型（type）、范围（scope）、简短的描述（subject）和可选的详细描述（body）。

解决 eslint 和prettier 冲突

有时，ESLint 的规则和 Prettier 的规则可能存在冲突，导致代码格式化不一致。使用 eslint-config-prettier 可以关闭 ESLint 中与 Prettier 冲突的规则。

npm i  eslint-config-prettier eslint-plugin-prettier -D

  • eslint-config-prettier ：关闭eslint中与prettier相互冲突的规则。

  • eslint-plugin-prettier  : 允许eslint用prettier格式化代码的能力。安装依赖并修改.eslintrc文件

在 .eslintrc.js 文件中，在extends配置基础上，追加内容

// .eslintrc
{//  - "extends": ["eslint:recommended"] // 原先配置+ "extends": ["eslint:recommended",  "prettier"] // 添加配置// 其余的配置
}

同理，plugins 配置基础上，追加 prettier

"plugins": ["@typescript-eslint","react","prettier" // 添加prettier插件],

常见报错

@typescript-eslint/dot-notation

错误日志：

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

错误原因：

这个错误是由于在使用 @typescript-eslint/dot-notation 规则时，没有为 @typescript-eslint/parser 提供正确的 parserOptions.project 属性值引起的。

解决方式：

eslint 配置文件中，设置一个有效的 parserOptions.project ，指向你的 TypeScript 配置文件（tsconfig.json）。

parserOptions: {project: './tsconfig.json',},

@typescript-eslint" uniquely.

错误日志：

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

解决方式:

1、重新安装 eslint相关依赖

npm cache clean --force //先清除缓存依赖

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

2、.eslintrc.js 文件，配置 root：true

root 被设置为 true 时，ESLint 使用当前配置文件作为根配，将停止在父级目录中查找其他配置文件。

图片

Warning: React version not specified

使用了 eslint-plugin-react 插件，未在配置文件中指定 React 版本，会遇到下述警告信息。Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration . 在 .eslintrc.js添加声明

"settings": {"react": {"version": "detect" //detect 自动检测react版本}},

最后总结一下

  1. eslint (https://github.com/eslint/eslint) JavaScript 代码检测工具，检测并提示错误或警告信息

  2. prettier (https://github.com/prettier/prettier) 代码自动化格式化工具，更好的代码风格效果

  3. husky (https://github.com/typicode/husky) Git hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序

  4. lint-staged (https://github.com/okonet/lint-staged) 对暂存区 (git add) 文件执行脚本 检测 校验

  5. Commitizen(https://github.com/commitizen-tools/commitizen) 检测 git commit 内容是否符合定义的规范

  6. eslint-config-prettier (https://github.com/prettier/eslint-config-prettier/) 解决 eslint 和 prettier 冲突

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/102201.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新能源商用车软件开发设计规范

新能源商用车软件开发设计规范

目 录 前 言.............................................................................................................. 1 1 范围............................................................................................................... 2 2 规范性…
阅读更多...
腾讯云-对象存储服务（COS）的使用总结-JavaScript篇

腾讯云-对象存储服务（COS）的使用总结-JavaScript篇

简介 对象存储&#xff08;Cloud Object Storage&#xff0c;COS&#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务&#xff0c;具有高扩展性、低成本、可靠安全等优点。通过控制台、API、SDK 和工具等多样化方式&#xff0c;用户可简单、快速地接入 COS&#xff0…
阅读更多...
单片机有哪些分类?

单片机有哪些分类?

单片机有哪些分类? 1.AVR单片机-----速度快&#xff0c;一个时钟周期执行一条指令&#xff0c;而普通的51单片机需要12个时钟周期执行一条指令。当然&#xff0c;Atmel公司出品的AT89LP系列单片机也是一个时钟执行一条指令&#xff0c;但目前还未普及。AVR单片机比51单片机多…
阅读更多...
Linux修复损坏的文件系统

Linux修复损坏的文件系统

如何判断文件系统是否损坏 当文件系统受损时&#xff0c;将会出现一些明显的迹象。例如&#xff0c;文件或文件夹无法访问、文件大小异常、系统启动慢或无法启动等。此外&#xff0c;系统也可能发出一些错误信息&#xff0c;如"Input/output error"、"Filesyst…
阅读更多...
Android Automotive概述

Android Automotive概述

Android开发者的新赛道 在智能手机行业初兴起时&#xff0c;包括BAT在内许多传统互联网企业都曾布局手机产业&#xff0c;但是随着手机市场的基本定型&#xff0c;造车似乎又成了各大资本下一个追逐的方向。百度、小米先后宣布造车&#xff0c;阿里巴巴则与上汽集团共同投资创…
阅读更多...
【Arduino27】DHT11温湿度传感器模拟值实验

【Arduino27】DHT11温湿度传感器模拟值实验

硬件准备 DHT11温湿度&#xff1a;1个 面包板&#xff1a;1个 杜邦线&#xff1a;3根 硬件连线 VDD引脚接 5V 电源 DATE引脚接 4号 接口 GND引脚接 GND 接口 软件程序 #include<DHT.h>#define DHT11_pin 4 //温湿度传感器引脚DHT dht(DHT11_pin,DHT11);float tem…
阅读更多...
【SpringCloud微服务--Eureka服务注册中心】

【SpringCloud微服务--Eureka服务注册中心】

SpringCloud微服务全家桶学习笔记【持续更新】 gitee仓库 内容&#xff1a;SpringCloud SpringCloud alibaba 技术栈&#xff1a;Java8mavengit&#xff0c;githubNginxRabbitMQSpringBoot2.0 微服务架构概述 微服务架构是一种架构模式&#xff0c;它提倡将单一应用程序划…
阅读更多...
kubeadmin安装k8s集群

kubeadmin安装k8s集群

目录 一 、环境部署 1、服务器规划 2、环境准备 二、所有节点安装docker 1、配置yum源&#xff0c;安装docker 2、配置daemon.json文件 三、所有节点安装kubeadm、kubelet 和kubectl 四、部署k8s集群 1、查看初始化需要的镜像 2、导入镜像 3、初始化kubeadm 3.…
阅读更多...
高忆管理：南京取消限购 苹果新机或搭载潜望式镜头

高忆管理：南京取消限购 苹果新机或搭载潜望式镜头

昨日&#xff0c;两市股指盘中单边下行。到收盘&#xff0c;沪指跌1.13%报3122.35点&#xff0c;深成指跌1.84%报10321.44点&#xff0c;创业板指跌2.11%报2056.98点&#xff0c;科创50指数跌3.72%&#xff1b;两市算计成交7668亿元。行业方面&#xff0c;半导体板块大幅下挫&a…
阅读更多...
搭建RabbitMQ消息服务，整合SpringBoot实现收发消息

搭建RabbitMQ消息服务，整合SpringBoot实现收发消息

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;3年JAVA全栈开发经验&#xff0c;专注JAVA技术、系统定制、远程指导&#xff0c;致力于企业数字化转型&#xff0c;CSDN博客专家&#xff0c;蓝桥云课认证讲师。 目录 一、前言1.1 什么是消息队列1.2 RabbitMQ 是什么1.…
阅读更多...
数据挖掘的学习路径

数据挖掘的学习路径

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
Llama-7b-hf和vicuna-7b-delta-v0合并成vicuna-7b-v0

Llama-7b-hf和vicuna-7b-delta-v0合并成vicuna-7b-v0

最近使用pandagpt需要vicuna-7b-v0&#xff0c;重新过了一遍&#xff0c;前段时间部署了vicuna-7b-v3&#xff0c;还是有不少差别的&#xff0c;transforms和fastchat版本更新导致许多地方不匹配&#xff0c;出现很多错误&#xff0c;记录一下。 更多相关内容可见Fastchat实战…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023