当前位置: 首页 > news >正文

前端 eslint 配置,以及在git提交之前自动format

目录

  • 1、配置eslint
      • 步骤 1、eslint安装配置
      • 步骤 2、配置scripts
      • 步骤 3、测试eslint
  • 2、配置git-hook
      • 1、安装环境
      • 2、最终效果

众所周知,前端项目可以在报很多error的情况下运行。但是良好的代码规范仍然有利于项目的开发维护,这里提供我的规范,仅供参考。

1、配置eslint

步骤 1、eslint安装配置

这个还是用 Antfu 的,在前端根目录下配置 eslint.config.js。

默认是.eslintrc,要使用eslint.config.js,需要将eslint去年出的新功能打开:

   # setting"eslint.useFlatConfig": true,  # 刚才setting文件中有这一项 
// eslint.config.js
import antfu from '@antfu/eslint-config';export default antfu({stylistic: {indent: 'tab', // 4, or 'tab'},svelte: false,
});

安装 pnpm install -D @antfu/eslint-config

步骤 2、配置scripts

peckage.json文件中配置命令:

	"scripts": {"lint": "eslint .","lint:fix": "eslint . --fix",},

步骤 3、测试eslint

pnpm lint

2、配置git-hook

1、安装环境

1、项目根目录下执行 npx husky install
2、新建文件 .husky/pre-commit

#!/bin/shecho "linting..."
pnpm lint:fix || true # 上述eslint的配置是很严格的,所以这里即使有报错,仍然提交

这是一个bash脚本,功能是在commit之前,对代码格式化(执行 pnpm lint:fix)。
所以如果前端项目不在根目录,则首先cd front
目录如下:
在这里插入图片描述

2、最终效果

$ git commit -m "test"
linting...> loadtable@4.4.0 lint:fix /Users/li/VueProjects/CXF-ELC-GroundBasedTool/Front-End
> eslint . --fix/Users/li/VueProjects/CXF-ELC-GroundBasedTool/Front-End/.eslintrc.js192:18  error  Unexpected use of the global variable 'process'. Use 'require("process")' instead  node/prefer-global/process... # 中间还有很多报错,可以根据报错,修改自身代码176 problems (169 errors, 7 warnings)ELIFECYCLE  Command failed with exit code 1.
[main 31a9c46] test3 files changed, 1 insertion(+), 12 deletions(-)mode change 100755 => 100644 .husky/pre-commit

相关文章:

前端 eslint 配置,以及在git提交之前自动format

目录 1、配置eslint步骤 1、eslint安装配置步骤 2、配置scripts步骤 3、测试eslint 2、配置git-hook1、安装环境2、最终效果 众所周知,前端项目可以在报很多error的情况下运行。但是良好的代码规范仍然有利于项目的开发维护,这里提供我的规范&#xff0c…...

2024.10.9华为留学生笔试题解

第一题无线基站名字相似度 动态规划 考虑用动态规划解决 char1=input().strip() char2=input().strip() n,m=len(char1),len(char2) dp=[[0]*(m+1) for _ in range(n+1)] #dp[i][j]定义为以i-1为结尾的char1 和以 j-1为结尾的char2 的最短编辑距离 setA = set(wirel@com) set…...

利用ADPF性能提示优化Android应用体验

Android Dynamic Performance Framework(ADPF)是google推广的一套用于优化散热以及CPU性能的动态性能框架。本文主要介绍其中的performance hint的部分。 1、为何引入ADPF 我们都知道,在大多数设备上,Android 会动态调整CPU的频率和核心类型。如果work l…...

论文阅读 - Pre-trained Online Contrastive Learning for Insurance Fraud Detection

Pre-trained Online Contrastive Learning for Insurance Fraud Detection| Proceedings of the AAAI Conference on Artificial Intelligence 目录 摘要 Introduction Methodology Problem Formulation Pre-trained Model for Enhanced Robustness Detecting Network a…...

【最全基础知识2】机器视觉系统硬件组成之工业相机镜头篇--51camera

机器视觉系统中,工业镜头作为必备的器件之一,须和工业相机搭配。工业镜头是机器视觉系统中不可或缺的重要组成部分,其质量和性能直接影响到整个系统的成像质量和检测精度。 目录 一、基本功能和作用 二、分类 1、按成像方式分 2、按焦距分 3、按接口类型分 4、按应用…...

虚拟机WIN7安装PADS VX24 出现脚本故障 IPW213

用虚拟机安装WIN7,再开始安装PADS V24出现脚本故障IPW213 有去.NetFramework3.5 仍然没有效果 Download Microsoft .NET Framework 3.5 from Official Microsoft Download Center 最终用360驱动大师检测了下 发现有些必备组件没有安装,安装之后重启。 …...

Java正则表达式详解万字笔记内容丰富

正则表达式 1.1 正则表达式的概念及演示 在Java中,我们经常需要验证一些字符串,例如:年龄必须是2位的数字、用户名必须是8位长度而且只能包含大小写字母、数字等。正则表达式就是用来验证各种字符串的规则。它内部描述了一些规则&#xff0c…...

文件属性与目录

⚫ Linux 系统的文件类型; 普通文件:存储数据,如文本文件、可执行文件等。 目录:用于组织文件和其他目录的特殊文件。 符号链接:指向另一个文件或目录的引用,类似于 Windows 中的快捷方式。 硬链接&#x…...

5G 基站SCTP

如何实现SCTP多归属链路对接 文章目录 ​​前言​​​​一、SCTP是什么?​​​​二、lksctp​​​​三.sctp初始化​​​​四.绑定本端两个IP​​​​ 五.与对端建链​​​​六.设置主要路径​​​​七.设置是否启用心跳​​​​八.关于防火墙的配置​ ​总结​​ …...

MFC的SendMessage与PostMessage的区别

一、SendMessage 同步操作: SendMessage 是一个同步函数,它会将消息发送到指定的窗口,并等待该窗口的消息处理过程完成,然后返回。这意味着它会阻塞当前线程,直到消息处理完成。 直接调用: SendMessage 会…...

学习虚幻C++开发日志——基础案例(持续更新中)

官方文档:虚幻引擎C编程教程 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 1.物体上下起伏并旋转 1.1第一种写法 创建一个继承于Actor的类,并为新的Actor命名为FloatingActor,然后点击Create Class 重新…...

【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引

文章目录 一、数据存储方式二、二维网格二维线程块三、二维网格一维线程块四、一维网格一维线程块 为了方便下次找到文章,也方便联系我给大家提供帮助,欢迎大家点赞👍、收藏📂和关注🔔!一起讨论技术问题&am…...

VSCode Qt6安装OpenSSL

报错 Could NOT find OpenSSL, try to set the path to OpenSSL root folder in thesystem variable OPENSSL_ROOT_DIR (missing: OPENSSL_CRYPTO_LIBRARYOPENSSL_INCLUDE_DIR SSL Crypto) (Required is at least version "3.0")问题确认 这个错误显示在Windows环境…...

JAVA学习-练习试用Java实现“定义一个用户类,包含用户名和密码”

问题: 定义一个用户类(User),包含用户名(username)和密码(password)属性,提供静态方法验证密码是否有效(长度至少为6),并提供getter和…...

大数据之VIP(Virtual IP,虚拟IP)负载均衡

VIP(Virtual IP,虚拟IP)负载均衡是一种在计算机网络中常用的技术,用于将网络请求流量均匀地分散到多个服务器上,以提高系统的可扩展性、可靠性和性能。以下是对VIP负载均衡的详细解释: 一、VIP负载均衡的基…...

鸿蒙网络编程系列38-Web组件文件下载示例

1. web组件文件下载能力简介 在本系列的第22篇文章,介绍了web组件的文件上传能力,同样的,web组件也具备文件下载能力,鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate,该类型包括四个下载事件的回调接…...

Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置

文章目录 构建拓扑图配置IP地址配置路由器命令说明测试效果 构建拓扑图 1,添加2811路由器。 2,添加pc0。 3,使用交叉线连接路由器和pc(注意线路端口)。 4,使用配置线连接路由器和pc(注意线路…...

Flink系列之:学习理解通过状态快照实现容错

Flink系列之:学习理解通过状态快照实现容错 状态后端检查点存储状态快照状态快照如何工作?确保精确一次(exactly once)端到端精确一次 状态后端 由 Flink 管理的 keyed state 是一种分片的键/值存储,每个 keyed state…...

Linux 读者写者模型

1.背景概念 在编写多线程的时候,有一种情况是十分常见的。那就是,有些公共数据修改的机会比较少。相比较改写,它们读的机会反而高的多。这样就衍生出了读者写者模型,在这个模型中,有两类线程:读者和写者。读…...

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能,咱们要分几个步骤来搞定它!最主要的部分是处理 二进制数据,可以生成一个进度检测,然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…...

PROJECT MOGFACE与Dify平台集成:快速构建无需编码的AI智能体应用

PROJECT MOGFACE与Dify平台集成:快速构建无需编码的AI智能体应用 最近在折腾AI应用开发的朋友,可能都有过类似的烦恼:手头有一个效果不错的模型,比如我们团队部署的PROJECT MOGFACE,想把它变成一个能对外服务的、功能…...

如何让foobar2000界面脱胎换骨?3大设计理念打造个性化音乐体验

如何让foobar2000界面脱胎换骨?3大设计理念打造个性化音乐体验 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 副标题:从安装到定制:零基础也能掌握的foobox-cn美化…...

别再手动改稿了!用LaTeX的soul包搞定论文批注(删除线/高亮/引用兼容)

LaTeX高效批注指南:用soul包实现学术协作的优雅排版 当导师的红色批注铺满论文初稿,或是合作者发来二十处修改意见时,大多数研究者都会面临一个共同困境——如何在保留原始内容的同时清晰标记修改痕迹?传统的手动添加删除线或高亮…...

HelixDB部署与运维:从本地开发到生产环境的完整流程

HelixDB部署与运维:从本地开发到生产环境的完整流程 【免费下载链接】helix-db HelixDB is a powerful, graph-vector database built entirely in Rust for millisecond query latency and ease of use. 项目地址: https://gitcode.com/gh_mirrors/he/helix-db …...

Windows驱动管理与系统优化:DriverStore Explorer全方位解决方案

Windows驱动管理与系统优化:DriverStore Explorer全方位解决方案 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 设备驱动维护是保障Windows系统稳定运行的核心环节&…...

进程间通信(IPC):原理、场景与选型

在操作系统的世界里,进程是程序运行的基本单元,每个进程都拥有独立的内存空间和资源,彼此之间相互隔离,无法直接访问对方的数据。这种隔离机制保证了系统的稳定性,避免进程间相互干扰,但也带来了一个问题&a…...

忍者像素绘卷镜像免配置部署:自动检测GPU型号并加载最优配置

忍者像素绘卷镜像免配置部署:自动检测GPU型号并加载最优配置 1. 产品概览:打破次元壁的像素艺术工作站 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站,专为像素艺术创作而设计。它将传统漫画创作与现代AI技术相结合&#x…...

OFA模型在零售行业的视觉问答应用案例

OFA模型在零售行业的视觉问答应用案例 1. 引言 走进任何一家现代零售商店,你都会看到成千上万的商品整齐地陈列在货架上。但对于店员来说,要快速准确地回答"这个品牌的洗发水有没有无硅油版本?"或者"这款饼干是否含有坚果成…...

DRM驱动(三)之核心模块回调函数解析

1. DRM驱动回调函数的核心作用 如果你曾经在Linux系统下开发过显示驱动,一定会对DRM(Direct Rendering Manager)框架不陌生。作为现代Linux显示系统的核心,DRM框架通过一系列精心设计的回调函数,让硬件厂商能够灵活地适…...

AWPortrait-Z WebUI日志诊断指南:从webui_startup.log定位90%常见问题

AWPortrait-Z WebUI日志诊断指南:从webui_startup.log定位90%常见问题 1. 引言:为什么需要关注启动日志 当你启动AWPortrait-Z WebUI时,系统会自动生成一个名为webui_startup.log的日志文件。这个文件就像是系统的"健康检查报告"…...