vue保存自动格式化代码

在 Vue 项目中，可以使用 ESLint 和 Prettier 进行代码规范和格式化。其中，ESLint 负责检查代码是否符合规范，而 Prettier 则负责格式化代码。

首先，需要在项目中安装 ESLint 和 Prettier：

npm install eslint prettier --save-dev

然后，在项目根目录下创建 `.eslintrc.js` 文件，并添加如下配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'prettier/prettier': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

这里使用了 `@vue/prettier` 插件来集成 Prettier 的规则。同时，将 `prettier/prettier` 规则设置为 `error`，表示如果代码不符合 Prettier 的格式，就会报错。

最后，在 `package.json` 文件中添加如下脚本：

{
  "scripts": {
    "lint": "eslint --fix src",
    "prettier": "prettier --write \"src/**/*.{js,vue}\""
  }
}

其中，`lint` 脚本用于检查代码是否符合规范，并自动修复一些简单的错误。`prettier` 脚本用于格式化代码。这里的 `src/**/*.{js,vue}` 表示对 `src` 目录下所有的 `.js` 和 `.vue` 文件进行格式化。

现在，在命令行中运行 `npm run prettier` 命令，即可自动格式化项目中的代码。如果想要在保存文件时自动格式化代码，可以使用编辑器插件，如 VS Code 中的 `ESLint` 和 `Prettier - Code formatter` 插件。