1.安装插件：

依次在vscode插件安装界面，安装vue、vertur、eslint、prettier。

2.vscode编辑器自动格式化配置

点击vscode编辑器左下角设置按钮，弹出菜单里选择settings

以下配置，直接复制覆盖到打开的setting.josn.支持vue、js、json的自动格式化

其中：

perttier配置使用单引号、换行长度由默认80改成160，防止换行过多。

{
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "update.channel": "none",
  "editor.formatOnSave": true, // eslint保存格式化
  "javascript.format.enable": false, // 不启动JavaScript格式化
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 160, // 超过最大值换行
  "javascript.updateImportsOnFileMove.enabled": "never",
  // 使用单引号代替双引号
  "prettier.singleQuote": true,
  // 去掉行末尾分号
  "prettier.semi":false,
  "background.customImages": [],
  "winopacity.opacity": 50,
  "background.style": {
    "opacity": 0
  },
  // "winopacity.opacity": 1,
  "eslint.codeAction.disableRuleComment": {},
  "editor.codeActionsOnSave": null,
  "diffEditor.ignoreTrimWhitespace": false,
  "files.associations": {
    
    "*.tsx": "typescriptreact"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }, // 让prettier遵循eslint格式美化,
  "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "printWidth": 160,
            // Prettier option here https://prettier.io/docs/en/options.html
            // 字符串单引号
            "singleQuote": true,
            // 去掉行末尾分号要
            "semi": false,
            // 箭头函数 参数需要()包起来
            "arrowParens": "always",
            // 是否用tab  false的话用空格代替tab
            "useTabs": false,
            // 去掉对象末尾的逗号
            "trailingComma": "none"
        }
  },
  "[vue]": {
    
  // 编辑器默认格式化工具 很重要
    "editor.defaultFormatter": "octref.vetur",
    // 配置格式化工具的选项 根据需要自己配置
   
 },
}

以上内容，2026年3月亲测可用