前端 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

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

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

相关文章

SpringBoot篇(运维实用篇 - 临时属性)

目录 一、临时属性设置 1. 简介 2. 属性加载优先级 那是否还有其他的配置方式呢? 3. 知识小结 二、开发环境中使用临时属性 1. 如何操作 2. 知识小结 3. 思考 三、配置文件分类 1. 简介 2. 4个级别 3. 为什么设计多种配置文件? 一个典型的应…

基于vue框架的的汇生活家居商城的设计与实现bdjlq(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能:商品分类,商品信息,用户 开题报告内容 开题报告 项目名称:基于Vue框架的汇生活家居商城的设计与实现 一、项目背景与意义 随着互联网技术的不断发展和普及,电子商务已成为现代商业的重要组成部分。家居商城作…

免费可离线的AI抠图工具(鲜艺AI抠图 )免费下载

鲜艺AI抠图是一款使用Tauri 2 和RMBG-1.4 开发并免费提供的AI抠图工具,它能够快速去除图片背景,并支持本地和在线图片处理。: 极速AI抠图: 基于最新的AI技术,能够精准识别图像中的前景和背景,实现快速抠图…

面试经典 150 题.P27. 移除元素(002)

本题来自:力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣(LeetCode)全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解: class Solution {public int removeElement(int[] nums, int…

标准正态分布的数据 tensorflow 实现正态分布图,python 编程,数据分析和人工智能...

登录后复制 import tensorflow as tfimport matplotlib.pyplot as plt# 设置随机种子以获得可重复的结果tf.random.set_seed(42)# 生成正态分布的数据# mean0 和 stddev1 表示生成标准正态分布的数据# shape(1000,) 表示生成1000个数据点data tf.random.normal(mean0, stddev1…

13.音乐管理系统(基于SpringBoot + Vue)

目录 1.系统的受众说明 ​​​​​​​ 2 需求分析 2.1用例图及用例分析 2.1.1 用户用例图及用例分析 2.1.2 管理员用例图及用例分析 2.2 系统结构图和流程图 2.2.1 音乐播放器的系统流程图(图2.2.1-1) 2.2.2 系统功能表(表2.2.2…

iOS调试真机出现的 “__llvm_profile_initialize“ 错误

一、错误形式&#xff1a; app启动就崩溃&#xff0c;如下&#xff1a; Demo__llvm_profile_initialize:0x1045f7ab0 <0>: stp x20, x19, [sp, #-0x20]!0x1045f7ab4 <4>: stp x29, x30, [sp, #0x10]0x1045f7ab8 <8>: add x29, sp, #0x100x1…

[Linux] linux 软硬链接与动静态库

标题&#xff1a;[Linux] linux 软硬链接与动静态库 个人主页水墨不写bug &#xff08;图片来源于网络&#xff09; /** _oo0oo_* o8888888o* 88" . "88* (| -_- |)* …

[mysql]相关子查询

相关子查询 相关子查询的概述 我们前面把单行子查询和多行子查询就已经说完了,我们现在要把继续把相关子查询的内容给大家说明白,因为之前用的都是不相关子查询的案例, 我们来谈一谈相关子查询,记住单行子查询和多行子查询是可以进行相关子查询,只是我们刚才写的案例都是相关…

【C++】—— priority_queue :平衡效率与秩序的算法利器

去感受一棵草、一缕风、一场日落&#xff0c;去重新触摸真正的生活。 ——高盛元 目录 1、优先级队列 1.1什么是优先级队列 1.2 priority_queue 的使用 1.3 仿函数 2、priority_queue 的模拟实现 2.1整体框架接口 2.2插入&&向上调整 2.2删除&&向下调整…

AI与低代码的碰撞:企业数字化转型的新引擎

引言 在当今的商业环境中&#xff0c;企业数字化转型已从选择题变成了必答题。面对日益复杂的市场竞争和不断变化的客户需求&#xff0c;传统的开发模式常常显得力不从心——开发周期冗长、技术门槛高、成本居高不下&#xff0c;企业很难快速响应市场变化。而在这种背景下&…

智慧用电监控装置:引领0.4kV安全用电新时代

在智能科技日新月异的今天&#xff0c;电力安全与管理正迎来一场前所未有的革新。为0.4kV以下TT、TN系统打造的智慧用电在线监控装置不仅重新定义了电力监控的边界&#xff0c;更为建筑安全用电筑起了一道坚不可摧的防线。 装置集成了单、三相交流电精确测量、四象限电能计量、…

【Linux内核揭秘】深入理解命令行参数和环境变量

文章目录 命令行参数什么是命令行参数main函数的参数 环境变量什么是环境变量常见的环境变量PATHHOMESHELLPWDOLDPWD 本地变量总结 命令行参数 什么是命令行参数 形如这样的命令后面带的选项就是命令行参数。 首先我们要了解一下命令行参数的原理。 我们知道像ls,mkdir,touch等…

leetcode57:插入区间

给你一个 无重叠的 &#xff0c;按照区间起始端点排序的区间列表 intervals&#xff0c;其中 intervals[i] [starti, endi] 表示第 i 个区间的开始和结束&#xff0c;并且 intervals 按照 starti 升序排列。同样给定一个区间 newInterval [start, end] 表示另一个区间的开始和…

探熵科技|以科技赋能销售,创造卓越业绩。

发展 在当今时代&#xff0c;AI 和大数据技术迅猛发展&#xff0c;各行业与大数据技术的融合已成为推动企业发展的重要力量。 天眼销 探熵科技作为一家专注于商业数据服务的专业公司&#xff0c;始终致力于为企业和个人提供高质量的数据解决方案。我们凭借深厚的技术实力和对…

Nginx+Lua脚本+Redis 实现自动封禁访问频率过高IP

1 、安装OpenResty 安装使用 OpenResty&#xff0c;这是一个集成了各种 Lua 模块的 Nginx 服务器&#xff0c;是一个以Nginx为核心同时包含很多第三方模块的Web应用服务器&#xff0c;使用Nginx的同时又能使用lua等模块实现复杂的控制。 &#xff08;1&#xff09;安装编译工具…

批量剪辑视频软件源码搭建全解析,支持OEM

一、引言 在当今数字化内容创作的时代&#xff0c;视频制作的需求呈爆发式增长。无论是社交媒体上的短视频创作者&#xff0c;还是专业的视频制作团队&#xff0c;都面临着大量视频剪辑的任务。批量剪辑视频软件应运而生&#xff0c;它能够显著提高视频剪辑的效率&#xff0c;满…

C语言笔记(指针题目)例题+图解

本文分为两部分 &#xff0c;第一部分为数组、字符串、字符指针在sizeof和strlen中的辨析&#xff0c;第二部分是一些笔试题目。若有错误&#xff0c;请批评指正。 目录 1.第一部分 1.1.数组名的使用 1.1.1一维整型数组在sizeof中的使用 1.1.2一维字符数组在sizeof中的使用…

015:地理信息系统开发平台ArcGIS Engine10.2与ArcGIS SDK for the Microsoft .NET Framework安装教程

摘要&#xff1a;本文详细介绍地理信息系统开发平台ArcGIS Engine10.2与ArcGIS SDK for the Microsoft .NET Framework的安装流程。 一、软件介绍 ArcGIS Engine 10.2是由Esri公司开发的一款强大的GIS&#xff08;地理信息系统&#xff09;开发平台。该软件基于ArcGIS 10.2 fo…

华为手机卸载系统应用的方法

摘要&#xff1a; 1.手机环境&#xff1a;手机需要开启开发者模式并使用usb连接电脑&#xff0c;并选择文件传输模式 2.电脑环境&#xff1a;使用鸿蒙工具箱进行傻瓜操作或安装adb工具进行命令卸载 3.鸿蒙工具箱和adb工具本质都是使用adb shell pm uninstall -k --user 0 xx…