Vscode 格式化 YAML 配置文件的插件推荐
前段时间分享了vscode的前端格式化插件,原文链接:https://nishiweiyi.com/blog/58.html,可以优美的完成 html,css,js,vue,json
前端常见的文件后缀的格式化操作!最近由于我需要维护一些Java的开源项目,很显然又要接触到yml格式的配置文件了,虽然理论上 Prettier 也可以格式化 yml 文件,但是由于我前端空格习惯是4个,但是如果4个空格拿到 yaml 看上去就极其傻逼了,因此我决定找找有没有适合 vscode 的 yml 格式化插件!
插件推荐
很显然,我肯定是找到了,如果没找到,我也不可能写一篇博文记录一下!
这个插件名字就叫做:YAML,链接:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
下载完成后,增加如下配置即可!
{
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
}
}
完整配置参考
如下是我本地的 vscode 完整配置,当然我这个配置提出一些个性化的配置项,保留的都是一些格式化有关的,适配 html,css,js,vue,json
前端常见文件格式,适配 yml
格式的配置;
使用如下配置之前,你需要确保你的vscode上,有如下插件:
- Vuter -- 格式化
*.vue
文件的插件,链接:https://marketplace.visualstudio.com/items?itemName=yoyo930021.vuter - Prettier - Code formatter -- 格式化前端其他常见格式的插件,链接:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- YAML - 单独的格式化
*.yml
文件的插件,链接:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
参考配置如下
{
"[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
}
}