web项目规范配置(husky、eslint、lint-staged、commit)

简介: 通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。

在现代Web开发中,规范配置有助于保持代码质量和一致性。通过使用Husky、ESLint、lint-staged和Commit规范,可以实现自动化的代码质量检查和规范化的提交流程。下面是详细的配置指南。

一、初始化项目

首先,确保你有一个Node.js项目。如果还没有,可以通过以下命令初始化:

mkdir my-web-project
cd my-web-project
npm init -y
​

二、安装必要的依赖

安装Husky、ESLint、lint-staged以及相关的依赖:

npm install --save-dev husky eslint lint-staged @commitlint/config-conventional @commitlint/cli
​

三、配置ESLint

ESLint是一个静态代码分析工具,用于识别和修复JavaScript中的问题。

  1. 初始化ESLint配置:

    npx eslint --init
    ​
    

    按照提示选择你的配置选项。例如,可以选择检查语法、找到问题和强制代码风格,选择JavaScript模块、React等。

  2. 创建或修改 .eslintrc.json文件,确保包含以下内容:

    {
      "env": {
        "browser": true,
        "es2021": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
      ],
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
      },
      "plugins": [
        "react",
        "@typescript-eslint"
      ],
      "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
      }
    }
    ​
    

四、配置lint-staged

lint-staged用于在提交代码之前运行ESLint,只检查暂存区中的文件。

  1. package.json中添加以下配置:

    "lint-staged": {
      "*.js": [
        "eslint --fix",
        "git add"
      ]
    }
    ​
    

五、配置Husky

Husky用于在Git hooks中执行自定义脚本,比如在提交代码之前运行ESLint。

  1. 初始化Husky:

    npx husky install
    ​
    
  2. package.json中添加husky钩子:

    "husky": {
      "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "npx --no-install commitlint --edit $1"
      }
    }
    ​
    
  3. 创建Husky配置文件:

    npx husky add .husky/pre-commit "npx lint-staged"
    ​
    

六、配置Commitlint

Commitlint用于强制执行规范化的提交消息格式。

  1. 创建 commitlint.config.js文件,并添加以下内容:

    module.exports = {
      extends: ['@commitlint/config-conventional']
    };
    ​
    

分析说明表

步骤 说明 命令示例
初始化项目 初始化Node.js项目 npm init -y
安装依赖 安装Husky、ESLint、lint-staged和Commitlint npm install --save-dev husky eslint lint-staged @commitlint/config-conventional @commitlint/cli
配置ESLint 初始化ESLint配置并配置 .eslintrc.json npx eslint --init
配置lint-staged 配置 lint-staged,在提交前运行ESLint 添加 "lint-staged"配置到 package.json
配置Husky 初始化Husky并配置Git hooks npx husky install npx husky add .husky/pre-commit "npx lint-staged"
配置Commitlint 创建 commitlint.config.js并配置,强制规范化的提交消息格式 创建并配置 commitlint.config.js

结论

通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。

目录
相关文章
|
22天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
36 4
|
10天前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
24 1
|
18天前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
38 1
|
2月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
47 2
|
2月前
|
监控 Apache
HAProxy的高级配置选项-Web服务器状态监测
这篇文章介绍了HAProxy的高级配置选项,特别是如何进行Web服务器状态监测,包括基于四层传输端口监测、基于指定URI监测和基于指定URI的request请求头部内容监测三种方式,并通过实战案例展示了配置过程和效果。
78 8
HAProxy的高级配置选项-Web服务器状态监测
|
2月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
55 2
|
25天前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
99 0
|
27天前
|
NoSQL Java 数据库连接
springBoot:整合其他框架&condition&切换web配置 (五)
本文档介绍了如何在Spring Boot项目中整合JUnit、Redis和MyBatis等框架,并提供了相应的依赖配置示例。同时,还展示了如何通过条件注解实现Bean的条件创建,以及如何切换Web服务器配置,从默认的Tomcat切换到Jetty。
|
3月前
|
开发者 Java 安全
Struts 2 实战秘籍:Action 驱动业务,配置文件成就高效开发!
【8月更文挑战第31天】Struts 2 框架作为 Apache 软件基金会的顶级项目,广泛应用于企业级 Web 应用开发。其核心组件 Action 类处理用户请求,而配置文件定义请求与 Action 类间的映射关系。掌握 Action 组件的最佳实践包括继承 `ActionSupport` 类、实现 `execute` 方法及使用类型安全的方法;配置文件的最佳实践则涉及组织 Action 到包中、定义全局结果及使用通配符映射。遵循这些最佳实践,可构建高效、可维护的 Web 应用程序。
40 0