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

众所周知，前端项目可以在报很多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