Vue第 50 篇，Vscode第 4 篇，Vue代码使用格式化文档无效，Vscode使用格式化文档无效

一. 问题

最近在写Vue代码的时候，使用 Vscode 格式化文档时不管用，请看

---

二. 原因

单页面使用大量 Element 组件和 HTML 代码导致，Vscode识别不了。

---

三. 解决方法

1. 打开文件

打开设置，点击右上角图标，打开settings.json文件，

点击右上角图标，打开settings.json文件

2. 写入代码

在settings.json文件中，写入以下代码，请看

    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html"

3. 代码含义

1. vetur.format.defaultFormatter.js: "vscode-typescript"

   • 作用：当 Vetur 格式化 .js 或 .vue 文件中的 <script> 标签内的 JavaScript 代码时，使用 vscode-typescript 作为默认的格式化工具。

   • 解释：vscode-typescript 是 Visual Studio Code 自带的 TypeScript 扩展的一部分，它也可以用来格式化 JavaScript 代码。

2. vetur.format.defaultFormatter.html: "js-beautify-html"

   • 作用：当 Vetur 格式化 .html 或 .vue 文件中的 <template> 标签内的 HTML 代码时，使用 js-beautify-html 作为默认的格式化工具。

   • 解释：js-beautify-html 是一个专门用于格式化 HTML 的工具，通常作为一个独立的扩展安装在 Visual Studio Code 中。

4. 代码位置

代码具体位置，请看

    "path-autocomplete.extensionOnImport": true,//导入文件时是否携带文件的拓展名
    "path-autocomplete.pathMappings": {//配置@的路径提示
        "@": "${folder}/src"
    },
    "explorer.confirmDelete": false,
    "editor.fontSize": 20,
    // 放在这里，解决格式化代码不管用
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",

 

创作不易，感觉有用，就一键三连，感谢(●'◡'●)