当我们需要对前端代码进行格式化的时候,其实只需要执行prettier的脚手架命令 就可直接对整个文件夹进行格式化
prettier . --write
如果还需要自定义的一些格式可以进行prettier 配置
Options · PrettierPrettier ships with a handful of format options.https://prettier.io/docs/en/options一般是新建配置文件.prettierrc( 还有插件系统)
{
"semi": true,
"tabWidth": 4,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "all",
"plugins": ["prettier-plugin-packagejson"]
}
有个问题,团队协作的时候不可能都按要求进行执行脚手架,所有需要把对应功能命令 放在代码提交之前,所有需要使用到
husky(哈士奇)
是将git内置的勾子函数暴露出来,便于配置
第一步
npm install --save-dev husky
第二步 当前目录会生成.husky的文件夹 里面会有pre-commit 的文件
npx husky init
第三步 pre-commit 写入提交前需要执行的shell 命令 如
#!/usr/bin/env sh
npx lint-staged // 这一步是确认下载 lint-staged 脚手架
lint-staged 对存于暂存区的文件进行特定规则,执行特定的命令
配置可以在package.json中
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
下面是配置的说明 可以在 package.json
, or package.yaml .lintstagedrc.json 都行
Lint-staged can be configured in many ways:
lint-staged
object in yourpackage.json
, or package.yaml.lintstagedrc
file in JSON or YML format, or you can be explicit with the file extension:.lintstagedrc.json
.lintstagedrc.yaml
.lintstagedrc.yml
.lintstagedrc.mjs
orlint-staged.config.mjs
file in ESM format- the default export value should be a configuration:
export default { ... }
- the default export value should be a configuration:
.lintstagedrc.cjs
orlint-staged.config.cjs
file in CommonJS format- the exports value should be a configuration:
module.exports = { ... }
- the exports value should be a configuration:
lint-staged.config.js
or.lintstagedrc.js
in either ESM or CommonJS format, depending on whether your project's package.json contains the"type": "module"
option or not.- Pass a configuration file using the
--config
or-c
flag
在flutter 环境下 使用
初始化package.json
npm init -y
pre-commit
#!/usr/bin/env sh
npx lint-staged
dart pub global activate melos
package.json
"scripts": {
"format": "prettier --write '**/*.+(md|yml|yaml|json)'",
"prepare": "husky"
},
"devDependencies": {
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5"
},
"lint-staged": {
"*.dart": [
"melos format",
"melos prepare"
]
}
melos 配置
melos.yaml
name: lh
packages:
- packages/*
ide:
intellij:
enabled: true
moduleNamePrefix: ''
vscode: true
scripts:
format:
run: dart format --set-exit-if-changed .
description: dart format --set-exit-if-changed .
build:
exec: flutter build apk
description: flutter build apk
prepare: melos bootstrap && flutter pub run flutter_native_splash:create && flutter packages pub run build_runner build
lint-staged - npmLint files staged by git. Latest version: 15.2.2, last published: 21 days ago. Start using lint-staged in your project by running `npm i lint-staged`. There are 2074 other projects in the npm registry using lint-staged.https://www.npmjs.com/package/lint-stagedhusky - npmModern native Git hooks. Latest version: 9.0.11, last published: 12 days ago. Start using husky in your project by running `npm i husky`. There are 2985 other projects in the npm registry using husky.https://www.npmjs.com/package/huskyGet started | HuskyGit hooks made easyhttps://typicode.github.io/husky/get-started.htmlprettier - npmPrettier is an opinionated code formatter. Latest version: 3.2.5, last published: 22 days ago. Start using prettier in your project by running `npm i prettier`. There are 16602 other projects in the npm registry using prettier.https://www.npmjs.com/package/prettier