Vue:VSCode中Vue代码的格式化问题解决(Code formatter)

VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vue文件中的js ,css格式化样式都变了,原因在于都采用了 prettier 来格式化,而配置文件中 vetur.format.defaultFormatter.html 这个配置项的值为"none",我们需要对它重新进行设置。

步骤一:

首先确保你安装了vetur扩展插件。如下图,扩展里直接搜索vetur,安装下图的Vetur这个插件即可,安装完之后点击重新加载。

Vue:VSCode中Vue代码的格式化问题解决(Code formatter)_第1张图片

步骤二:

打开VSCode,文件->首选项->设置,打开settings.json文件,找到"eslint.validate" --> 添加"vue";另外搜索vetur,将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html;

Vue:VSCode中Vue代码的格式化问题解决(Code formatter)_第2张图片

步骤三:

Vue:VSCode中Vue代码的格式化问题解决(Code formatter)_第3张图片

安装插件Prettier - Code formatter,然后在settings.json文件中修改如下配置:

"prettier.singleQuote": true, 

"prettier.semi": false, 

"javascript.format.insertSpaceBeforeFunctionParenthesis": true

这样以下的三个格式化的问题就被解决了:

1.单引号成双引号的问题;

 2.句尾自动添加分号的问题;

 3.函数中参数的那个括号后面的空格被删除的问题。

 

这样我们的设置就完成了,接下来打开一个Vue文件,Alt+Shift+F即可对vue文件进行格式化,或者点击鼠标右键,选择格式化文件即可。

以下是我的settings.json的完整代码,仅供参考:

// 将设置放入此文件中以覆盖默认设置
{
    "typescript.check.tscVersion": false,
    "window.zoomLevel": 0,
    "files.autoSave": "off",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "git.confirmSync": false,
    "editor.minimap.enabled": true,
    "workbench.startupEditor": "newUntitledFile",
    "git.autofetch": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "vetur.validation.template": true,
    "vetur.format.enable": true,
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "workbench.settings.editor": "json"
}



参考文档:https://blog.csdn.net/twodogya/article/details/80728262

                  https://blog.csdn.net/qq_40690947/article/details/87803597#_settingsjson__eslintvalidate__vue_19

你可能感兴趣的:(前端开发,Vue起步学习)