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