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

前端 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/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.kler.cn/a/370609.html

相关文章:

  • Day20 数据结构
  • Python从入门到高手7.3节-列表的常用操作方法
  • 【2024工业3D异常检测文献】LSFA: 面向三维工业异常检测的自监督特征适配
  • Xcode文件默认存储位置-使用c++file保存文件默认路径以及设置为路径为当前项目路径
  • Python 深度学习简单介绍
  • Java表单提交:轻松实现与PHP和Python相同的简便性
  • 力扣刷题(sql)--零散知识点(2)
  • linux系统操作教程小白学习
  • 大数据之Kafka集群的安装部署
  • mysql 十把锁之《小猫钓鱼》
  • 踩坑:关于使用ceph pg repair引发的业务阻塞
  • 【MATLAB源码-第187期】基于matlab的人工蜂群优化算法(ABC)机器人栅格路径规划,输出做短路径图和适应度曲线。
  • js 实现自定义打印模板
  • Java生态系统的完全掌握(5/5)
  • anchor、anchor box、bounding box之间关系
  • 大尺寸彩色电子墨水屏标签,如何焕新数字化商业体验?
  • 解决前后端跨域问题(包会的!)
  • pytest自动化测试数据驱动yaml/excel/csv/json
  • Python——发送HTTP请求
  • docker 安装 PostgreSQL