Vscode 格式化 YAML 配置文件的插件推荐

前段时间分享了vscode的前端格式化插件,原文链接:https://nishiweiyi.com/blog/58.html,可以优美的完成 html,css,js,vue,json 前端常见的文件后缀的格式化操作!最近由于我需要维护一些Java的开源项目,很显然又要接触到yml格式的配置文件了,虽然理论上 Prettier 也可以格式化 yml 文件,但是由于我前端空格习惯是4个,但是如果4个空格拿到 yaml 看上去就极其傻逼了,因此我决定找找有没有适合 vscode 的 yml 格式化插件!

截图_选择区域_20211107155102.png

插件推荐

很显然,我肯定是找到了,如果没找到,我也不可能写一篇博文记录一下!

这个插件名字就叫做:YAML,链接:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

下载完成后,增加如下配置即可!

{
    "[yaml]": {
        "editor.defaultFormatter": "redhat.vscode-yaml"
    }
}

完整配置参考

如下是我本地的 vscode 完整配置,当然我这个配置提出一些个性化的配置项,保留的都是一些格式化有关的,适配 html,css,js,vue,json 前端常见文件格式,适配 yml 格式的配置;

使用如下配置之前,你需要确保你的vscode上,有如下插件:

参考配置如下

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[yaml]": {
        "editor.defaultFormatter": "redhat.vscode-yaml"
    },
    "prettier.printWidth": 999,
    "prettier.tabWidth": 4,
    "prettier.proseWrap": "never",
    "prettier.trailingComma": "none",
    "editor.quickSuggestions": {
        "strings": true
    }
}