前端工程化探索-代码格式化

当我们需要对前端代码进行格式化的时候，其实只需要执行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 your package.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 or lint-staged.config.mjs file in ESM format
  • the default export value should be a configuration: export default { ... }
• .lintstagedrc.cjs or lint-staged.config.cjs file in CommonJS format
  • the exports value should be a configuration: module.exports = { ... }
• 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 配置

Getting StartedLearn how to start using Melos in your projecthttps://melos.invertase.dev/~melos-latest/getting-started

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