目录
- 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
