用vscode写vue程序,实现代码的自动格式化。

vscode需要的插件:
2022-05-20T13:24:08.png
2022-05-20T13:24:26.png
2022-05-20T13:24:34.png


插件配置好了,直接进行如下操作
直接配置到vscode的设置中的settings.json

{
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.editor.enablePreview": false,
  "editor.tabSize": 2,
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.iconTheme": "material-icon-theme",
  "explorer.confirmDelete": false,
  "editor.formatOnSave": true,
  "workbench.colorTheme": "Dracula",
  "editor.tokenColorCustomizations": {
    "comments": "#02AAB0"
  },
  "editor.fontLigatures": false,
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false,
    "html": true,
    "Log": false,
    "vue": true,
    "jsonc": true,
    "javascript": true,
    "json": true
  },
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "prettier.semi": false, // 格式化不加分号
  "prettier.singleQuote": true, // // 格式化以单引号为主
  "prettier.trailingComma":"none" , //// 这个就是设置是否末尾添加逗号的字段
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true, // 格式化以单引号为主
      "trailingComma": "none"  //// 这个就是设置是否末尾添加逗号的字段
    },
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  "editor.inlineSuggest.enabled": true,

}

发表评论