uni-app 插件需求自动格式化代码保存

保存的时候可以自动格式化代码

yuanlaile 1楼•10 小时前作者

在uni-app项目中实现自动格式化代码并在保存时应用，通常可以借助VSCode编辑器插件和一些自动化工具来完成。下面是一个基本的实现思路，以及相关的配置和代码示例。

1. 安装VSCode插件

首先，确保你在VSCode中安装了以下插件：

Prettier - Code formatter：用于格式化代码。
Vetur（如果项目中包含Vue文件）：增强Vue文件的支持，包括格式化。

2. 配置Prettier

在项目的根目录创建或修改.prettierrc文件，配置Prettier的格式化规则。例如：

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

3. 配置VSCode设置

打开VSCode的设置（settings.json），添加以下配置，确保在保存文件时自动格式化：

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.formatOnSave": true
  },
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
  "prettier.bracketSpacing": true,
  "prettier.arrowParens": "avoid"
}

4. 使用Husky和Lint-Staged

为了在项目级别确保代码在提交前被格式化，可以使用Husky和Lint-Staged。首先安装这些npm包：

npm install husky lint-staged prettier --save-dev

然后，在项目根目录创建或修改package.json，添加以下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx,vue}": [
    "prettier --write"
  ]
}

这样，每次你提交代码时，Lint-Staged会运行Prettier来格式化指定的文件。

5. 自动化脚本（可选）

如果你希望在开发过程中通过某些自动化脚本（如Gulp或npm脚本）来格式化代码，可以编写一个简单的npm脚本来运行Prettier：

"scripts": {
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue}\""
}

然后，你可以通过运行npm run format来手动格式化整个项目的代码。