【VSCode】vue文件保存时自动格式化

用户目录下：AppData\Roaming\Code\User\settings.json

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "vscode-icons",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "vsicons.dontShowNewVersionMessage": true,
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Bash": {
      "path": "D:\\soft\\Git\\bin\\bash.exe",
      "args": []
    }
  },
  "terminal.integrated.defaultProfile.windows": "Bash",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.unicodeHighlight.nonBasicASCII": false,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false,
  "omnisharp.autoStart": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 1,
  "workbench.editorAssociations": {
    "*.emmx": "mergeEditor.Input",
    "*.xmind": "mergeEditor.Input"
  },
  "explorer.confirmDragAndDrop": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "html.format.wrapLineLength": 200,
  "editor.formatOnSave": true,
  "vetur.format.enable": false,
  "java.format.enabled": false
}

核心代码：

1. vue中默认格式化工具配置为prettier

?

1 2 3

"[vue]": {   "editor.defaultFormatter": "esbenp.prettier-vscode" },

　2. vscode配置为保存时自动格式化

  "editor.formatOnSave": true,

 

---------------------------------------------------

以上配置完成后，可以用vscode打开一个vue项目测试下，我的.prettierrc文件如下：

?

1 2 3 4 5 6 7 8

{     "useTabs": true,     "tabWidth": 4,     "printWidth": 200,     "singleQuote": true,     "semi": false,     "trailingComma": "none" }