uniapp格式化代码

uniapp 格式化代码的方法

使用 IDE 或编辑器自带的格式化功能

大多数现代 IDE 和代码编辑器都内置了代码格式化功能，可以通过快捷键或菜单选项快速格式化代码。例如：

• HBuilderX（官方推荐的 uniapp 开发工具）：选中代码后，使用快捷键 Alt + Shift + F 进行格式化。
• VS Code：安装插件后，使用 Shift + Alt + F 格式化代码。

配置 ESLint 和 Prettier

通过配置 ESLint 和 Prettier 可以自动化代码格式化，确保团队代码风格一致。

1. 安装依赖： 在项目根目录下运行以下命令安装 ESLint 和 Prettier：

   npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev

2. 配置 .eslintrc.js： 在项目根目录下创建或修改 .eslintrc.js 文件，添加 Prettier 配置：

   module.exports = {
     extends: ['eslint:recommended', 'plugin:prettier/recommended'],
     rules: {
       'prettier/prettier': 'error'
     }
   };

3. 配置 .prettierrc： 创建 .prettierrc 文件，定义代码格式化规则：

   

   {
     "singleQuote": true,
     "semi": false,
     "tabWidth": 2
   }

使用 Git 钩子自动化格式化

通过 Git 钩子在提交代码前自动格式化，确保代码风格统一。

1. 安装 husky 和 lint-staged：

   npm install husky lint-staged --save-dev

2. 配置 package.json： 在 package.json 中添加以下配置：

   

   {
     "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     },
     "lint-staged": {
       "*.{js,json,vue}": ["prettier --write", "eslint --fix", "git add"]
     }
   }

手动格式化 Vue 文件

对于 Vue 文件中的模板、脚本和样式部分，可以分别使用以下工具手动格式化：

• 模板部分：使用 HTML 格式化工具或 Vue 插件。
• 脚本部分：使用 JavaScript 格式化工具（如 Prettier）。
• 样式部分：使用 CSS/SCSS 格式化工具。

在 VS Code 中，安装插件 Vetur 可以更好地支持 Vue 文件的格式化。

使用 uniapp 官方推荐的格式化工具

uniapp 官方推荐使用 HBuilderX 进行开发，其内置的格式化功能对 uniapp 项目有更好的支持。确保在 HBuilderX 中启用相关格式化选项：

• 打开 设置 -> 编辑器设置 -> 代码格式化，配置适合的格式化规则。
• 在编辑器中右键点击代码，选择 格式化代码 选项。

通过以上方法，可以有效地格式化 uniapp 项目中的代码，提升代码的可读性和维护性。