uni-app 代码格式美化

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app 代码格式美化

需要一个自动调整代码格式的插件

Harmonyos Next教程
2 回复

插件市场的格式化插件如下： 目前HBuilderX上所有的格式化插件
同时建议在项目中，使用eslint和editorconfig eslint教程: https://ask.dcloud.net.cn/article/37070
editorconfig教程：https://ask.dcloud.net.cn/article/36070


在开发uni-app项目时，保持代码格式的一致性和可读性是非常重要的。这不仅有助于团队协作，还能减少因格式问题导致的合并冲突和调试困难。为了美化uni-app的代码，我们可以使用ESLint和Prettier等工具来自动格式化代码。以下是如何在uni-app项目中配置和使用这些工具的步骤，以及相关的代码案例。

1. 安装ESLint和Prettier

首先，在你的uni-app项目根目录下，通过npm或yarn安装ESLint和Prettier：

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

或者

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier --dev

2. 配置ESLint

在项目根目录下创建或编辑.eslintrc.js文件，添加以下配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    // 你可以在这里添加自定义规则
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

3. 配置Prettier

在项目根目录下创建.prettierrc文件，添加以下配置：

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf"
}

4. 添加脚本命令

在package.json中添加以下脚本命令，方便运行ESLint和Prettier：

"scripts": {
  "lint": "eslint --ext .js,.vue src/",
  "format": "prettier --write 'src/**/*.{js,vue,json,css,scss,md}'"
}

5. 使用代码格式化工具

现在，你可以通过以下命令来检查和格式化你的代码：

npm run lint
npm run format

或者

yarn lint
yarn format

这些命令将分别运行ESLint来检查代码中的问题，并使用Prettier来自动格式化代码。通过将这些工具集成到你的开发流程中，你可以确保uni-app项目的代码始终保持一致和易于维护的格式。

回到顶部