vscode设置保存时自动按eslint+prettier格式化

1、安装依赖

eslint

prettier

eslint-plugin-prettier

eslint-config-prettier

2、配置eslint

新建.eslintrc.js文件，extends末尾添加eslint插件plugin:prettier/recommended，由  eslint-plugin-prettier插件提供，它可以帮助你自动格式化代码，使代码风格更加一致和美观。

prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。

这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

相当于将 Prettier 整合进了 ESLint 中。

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended' // eslint插件
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'vue/multi-word-component-names': 'off' // 具体的格式化要求可在这里定义
  }
}

可以参考文档：GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting

3、配置.vscode/setting.json

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 设置自动保存
  }
}