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

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

news 2025/9/14 13:15:57

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