vs code中新增Vue格式化時不支援格式化html部分的支援

weixin_34138377發表於2018-08-18

1.首先安裝vetur
2.然後配置vscode的設定項,如下

{
    "explorer.confirmDragAndDrop": true, // 當拖動一個檔案或者資料夾到另一個資料夾時,是否啟動提示
    "editor.fontSize": 14, // 設定編輯器字型大小
    "editor.tabSize": 2, // 設定編輯器一個tab佔多少個空格
    "editor.renderWhitespace": "all", // 空格是否顯示
    "editor.lineHeight": 20, // 編輯器行高
    "javascript.implicitProjectConfig.experimentalDecorators": true, // 使用vscode編輯器出現,experimentaldecorators報錯
    "window.zoomLevel": 0, // Adjust the zoom level of the window
    "editor.detectIndentation": false, // When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
    "typescript.updateImportsOnFileMove.enabled": "always", // Enable/disable automatic updating of import paths when you rename or move a file in VS Code. Possible values are: 'prompt' on each rename, 'always' update paths automatically, and 'never' rename paths and don't prompt me. Requires TypeScript >= 2.9
    "files.autoSave": "onFocusChange",
    "vetur.format.defaultFormatter": {
      "html": "prettier",
      "css": "prettier",
      "postcss": "prettier",
      "scss": "prettier",
      "less": "prettier",
      "js": "prettier",
      "ts": "prettier",
      "stylus": "stylus-supremacy"
  }
}

提示不存在配置別管,照配

如果要配置格式化選項,那麼需要新增一個檔案
.prettierrc
具體格式規則在下面配置就行了,如下

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    }
  ]
}

相關文章