uni-app 增加保存自动格式化代码

在uni-app项目中，增加保存自动格式化代码的功能可以显著提升代码的可读性和一致性。尽管uni-app本身没有直接提供内置的保存自动格式化功能，但我们可以结合一些工具和编辑器插件来实现这一需求。以下是基于VSCode编辑器的解决方案，它利用ESLint和Prettier来自动格式化代码。

步骤一：安装必要的插件和依赖

1. 安装VSCode插件

   • 安装Prettier - Code formatter插件。
   • 安装ESLint插件（如果尚未安装）。

2. 安装项目依赖 在你的uni-app项目根目录下，运行以下命令安装Prettier和ESLint及其相关配置：

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

步骤二：配置ESLint和Prettier

1. 创建.eslintrc.js

   在项目根目录下创建一个.eslintrc.js文件，内容如下：

   module.exports = {
     extends: [
       'eslint:recommended',
       'plugin:prettier/recommended',
     ],
     parserOptions: {
       ecmaVersion: 2020,
       sourceType: 'module',
     },
     env: {
       browser: true,
       es2021: true,
     },
     rules: {
       // 自定义规则可以在这里添加
     },
   };
   

2. 创建.prettierrc

   在项目根目录下创建一个.prettierrc文件，内容如下：

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
   }
   

3. 配置VSCode

   打开VSCode的设置文件（settings.json），添加以下内容以启用自动格式化：

   {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "vue"
     ]
   }
   

步骤三：验证配置

现在，当你保存一个.vue、.js或.jsx文件时，VSCode将自动运行Prettier和ESLint来格式化代码。

注意事项

• 确保你的项目依赖已经正确安装，并且VSCode的插件已经启用。
• 你可以根据需要调整.eslintrc.js和.prettierrc文件中的配置选项。
• 如果你使用其他编辑器或IDE，可能需要查找相应的插件和配置方法来实现类似功能。

通过上述配置，你可以在uni-app项目中实现保存时自动格式化代码的功能，提高代码质量和团队协作效率。