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

news2025/4/8 21:06:26

目录

  • 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/sh

echo "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.js
  192: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] test
 3 files changed, 1 insertion(+), 12 deletions(-)
 mode change 100755 => 100644 .husky/pre-commit

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

主动元数据平台在企业建设 DataOps 体系中的“角色”

2018 年,Gartner 将 DataOps 纳入到数据管理技术的成熟度曲线之中。Gartner 认为,DataOps 是一种协作式数据管理实践,改善整个组织内数据管理者和使用者之间数据流的沟通、集成和自动化,通过对数据、数据模型和相关工序创建可预测…

Docker搭建基于Nextcloud的个人云盘/私有云盘/个人相册/家庭NAS

安装配置Docker 官方安装文档:https://docs.docker.com/engine/install/ Docker常用命令:https://blog.csdn.net/qq_43003203/article/details/139532097?spm1001.2014.3001.5502 Docker镜像仓库配置方法和国内常用镜像仓库地址: 输入&a…

安卓早期apk兼容性适配之内存读写

许多早期开发的apk放到现在的高版本安卓系统上使用就会出现报错&#xff0c;今天给大家带来的是内存读写权限适配教程。 工具 mt/np管理器 早期apk dex注入器&#xff08;自行下载&#xff09; 教程 使用mt查看apk打开AndroidManifest.xml表单 在权限上添加 <!-- 读取您共享…

C++ | Leetcode C++题解之 第508题出现次数最多的子树元素和

题目&#xff1a; 题解&#xff1a; class Solution {unordered_map<int, int> cnt;int maxCnt 0;int dfs(TreeNode *node) {if (node nullptr) {return 0;}int sum node->val dfs(node->left) dfs(node->right);maxCnt max(maxCnt, cnt[sum]);return su…

三维管线管网建模工具MagicPipe3D V3.5.3

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网三维模型&#xff08;包括管道、接头、附属设施等&#xff09;&#xff0c;输出标准3DTiles、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析&…

【数据结构和算法】三、动态规划原理讲解与实战演练

目录 1、什么是动态规划&#xff1f; 2、动态规划实战演练 2.1 力扣题之爬楼梯问题 &#xff08;1&#xff09;解题思路1: &#xff08;2&#xff09;解题思路2: &#xff08;3&#xff09;动态规划&#xff08;DP&#xff09;&#xff1a;解题思路 &#xff08;4&#x…

PHP免杀详细讲解PHP免杀详细讲解

基础学习 可变参数 $_GET $_POST $_COOKIE $_REQUEST $_SERVER 其中的某些参数可控,如REQUESTMETHOD,QUERYSTRING,HTTPUSERAGENT等 session_id() 这个比较特殊,但是依然可以利用 $_FILE $GLOBALS getallheaders() get_defined_vars() get_defined_functions() fil…

练习LabVIEW第二十五题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第二十五题&#xff1a; 用顺序结构实现数值匹配&#xff1a;输入1-100之间的任意1个整数&#xff0c;然后系统随机产生1-…

论文解析八: GAN:Generative Adversarial Nets(生成对抗网络)

目录 1.GAN&#xff1a;Generative Adversarial Nets&#xff08;生成对抗网络&#xff09;1、标题 作者2、摘要 Abstract3、导言 IntroductionGAN的介绍 4、相关工作 Related work5、模型 Adversarial nets总结 6.理论计算 Theoretical Results具体算法公式全局优化 Global O…

【项目管理】PMP冲刺真题200题 (题目+解析)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

深度学习Pytorch-Tensor的属性、算术运算

深度学习Pytorch-Tensor的属性、算术运算 Tensor的属性Tensor的算术运算Pytorch中的in-place操作Pytorch中的广播机制Tensor的取整/取余运算Tensor的比较运算Tensor的取前k个大/前k小/第k小的数值及其索引Tensor判定是否为finite/inf/nan Tensor的属性 每一个Tensor对象都有以…

HCIP-HarmonyOS Application Developer 习题(十七)

&#xff08;判断&#xff09;1、对于用户创建的一些临时卡片在遇到卡片服务框架死亡重启&#xff0c;此时临时卡片数据在卡片管理服务中已经删除&#xff0c;且对应的卡片ID不会通知到提供方&#xff0c;所以卡片使用方需要自己负责清理长时间未刚除的临时卡片数据。 答案&…

从0开始深度学习(17)——数值稳定性和模型初始化

在每次训练之前&#xff0c;都会对模型的参数进行初始化&#xff0c;初始化方案的选择在神经网络学习中起着举足轻重的作用&#xff0c; 它对保持数值稳定性至关重要。 我们选择哪个函数以及如何初始化参数可以决定优化算法收敛的速度有多快。 糟糕选择可能会导致我们在训练时遇…

3D、VR、AR技术的应用,对家电品牌营销有哪些影响?

家电行业3D数字化营销正以其独特的优势引领着行业的变革。随着技术的不断进步和应用场景的不断拓展&#xff0c;我们有理由相信&#xff0c;未来家电行业的3D数字化营销将会更加精彩纷呈。 那么3D、VR、AR技术的应用&#xff0c;对家电品牌营销有哪些影响&#xff1f; 01、提升…

[ 问题解决篇 ] 解决远程桌面安全登录框的问题

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

Leetcode 二叉树的最近公共祖先

class Solution {public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {//root p || root q 时不能再往更深层找了, 否则会不满足公共祖先的要求if(root null || root p || root q) {return root;//在二叉树递归算法中,root可以认为是递归过程中…

ZooKeeper 客户端API操作

文章目录 一、节点信息1、创建节点2、获取子节点并监听节点变化3、判断节点是否存在4、客户端向服务端写入数据写入请求直接发给 Leader 节点写入请求直接发给 follow 节点 二、服务器动态上下线监听1、监听过程2、代码 三、分布式锁1、什么是分布式锁?2、Curator 框架实现分布…

【HTML】之基本标签的使用详解

HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是构建网页的基础。它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;用于描述网页的内容和结构。本文将带你了解HTML的基础知识&#xff0c;并通过详细的代码示例和中文注释进行讲…

【C++】哈希冲突的解决办法:闭散列 与 开散列

哈希冲突解决 上一篇博客提到了&#xff0c;哈希函数的优化可以减小哈希冲突发生的可能性&#xff0c;但无法完全避免。本文就来探讨一下解决哈希冲突的两种常见方法&#xff1a;闭散列和开散列 1.闭散列 闭散列也叫开放定址法&#xff0c;发生哈希冲突时&#xff0c;如果哈…

线程的理解及基本操作

目录 一、线程的理解 &#xff08;1&#xff09;什么是线程呢&#xff1f; &#xff08;2&#xff09;线程的优缺点及异常 二、线程的基本操作 &#xff08;1&#xff09;创建一个新的进程 &#xff08;2&#xff09;获取线程id &#xff08;3&#xff09;线程终止 &…