前端项目初始化的各种基本配置

136 阅读2分钟

git配置

git init初始化仓库。 创建.gitignore文件来过滤不需要提交时携带的文件目录 image.png

npm / yarn配置

npm init or yarn init

初始化项目,生成package.json,package-lock.json, yarn.lock几个文件。

代码校验配置

安装常用的dev依赖:image.png

ESLint配置

npm init @eslint/config

初始化配置

eslint.org/docs/latest…

会生成一个eslint配置文件,比如.eslintrc.js。 还可以配置.eslintignore文件来设置在哪些目录下不使用eslint检测。类似于.gitignore的配置。

lint-staged配置 => 在提交之前执行lint规则检查代码

上面用到了lint-staged, 需要下载相关的依赖。

npm install --save-dev lint-staged github.com/okonet/lint…

lint-staged的规则可以放在package.json文件中,也可以放在一个单独的文件中。 image.png

commitlint配置 => 用于检查commit提交的格式是否符合规范

一般用到的是 @commitlint/cli 和 @commitlint/config-conventional这两个。

npm install --save-dev @commitlint/cli @commitlint/config-conventional

创建一个.commitlintrc.json文件,内容为:

{
    "extends": ["@commitlint/config-conventional"]
}

或者js文件也可以的。

husky配置

typicode.github.io/husky/getti…

  • 安装husky

npm install husky --save-dev

  • 启用git hooks

npx husky install

  • 配置npm scripts

npm pkg set scripts.prepare="husky install"

husky的配置可以放在package.json文件里面,也可以放到一个单独的文件(.huskyrc 或 .huskyrc.json)里面

所有的git hooks: git-scm.com/book/en/v2/…

"husky": {
	"hooks": {
  	"pre-commit": "lint-staged",
  	"commit-msg": "npx --no-install commitlint --edit $1"
  }
}

在所有的相关依赖安装完成后,可以添加相应的husky命令。

npx husky add .husky/pre-commit 'lint-staged'

可以根据场景添加多个命令。 image.png 但是,要在.husky目录下的对应位置添加语法。 image.png

typescript配置

npm install --save-dev typescript 安装依赖

npx tsx --init 初始化生成tsconfig.json

Jest配置

npm install --save-dev jest

npx jest --init 生成jest.config.ts文件

对于要测试的文件,比如sum.js, 测试文件为sum.test.js。 所以每次提交的时候,也可以加上test命令来测试代码。 image.png

配置文件格式

在这些配置相中,相关的配置文件,可以.js的形式,也可以.json的形式

  • js文件
module.exports = {
  extends: ['@commitlint/config-conventional'],
};
  • json文件
{
    "extends": ["@commitlint/config-conventional"]
}

参考文档