vscode中使用beautify插件格式化vue文件

最新推荐文章于 2024-09-26 14:03:43 发布

XAIhan

最新推荐文章于 2024-09-26 14:03:43 发布

阅读量8.7k

点赞数 3

分类专栏： vue 文章标签： vscode 格式化 vue beautiful插件

本文链接：https://blog.csdn.net/weixin_44220680/article/details/99740863

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

博主重新安装vscode之后出现 .vue 文件没办法进行代码格式化的问题，查看插件，确定已经安装了beautiful的插件，寻找原因，发现是因为插件的配置文件有问题，以下是解决方法。

点击设置，找到beautify.language并在html一栏里加上vue，
打开(左上角)文件——首选项——设置，
找到如下位置：
在这里插入图片描述
点击编辑，会出现如下代码：

{
    "explorer.confirmDelete": false,
    "editor.quickSuggestions": {
        "strings": true
    },
    "workbench.iconTheme": "vscode-icons",
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}

进行修改，添加如下代码：

"beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    }

现在放上去完整版的代码：

{
    "explorer.confirmDelete": false,
    "editor.quickSuggestions": {
        "strings": true
    },
    "workbench.iconTheme": "vscode-icons",
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue" //在这里加上vue
        ]
    }
}