Skip to main content

VS Code 技巧

Tab 自动触发 Emmet​

进入设置，搜索 'emmet' 将 Emmet: Trigger Expansion On Tab 设为 true。

这样永远按 Tab 都会自动触发 Emmet 更符合预期（Sublime Text 装的 Emmet 插件默认就是这个行为，用习惯了）。

格式化时将每个标签属性单独一行​

进入设置，搜索 'format' 将 HTML › Format: Wrap Attributes 设为 force-expand-multiline。

对于前端开发来说，非常重要，每个属性单独一行便于维护更易阅读，最终样式参考如下：

<div
  :class="{'px-6 py-4 w-full text-right transition-[padding-right]': true, 'active': navActiveItem === i, }"
  v-for="(item, i) in navItems"
  :key="i"
>
  {{ item }}
</div>

格式化 Markdown 代码​

安装插件 https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

最重要的是可以格式化表格，自动对齐 alt + shift + f。

美中不足，若表格内容有中文，由于非等宽字体的关系，会有一点点对不齐，强迫症需要忍耐。

|     |      |
| --- | ---- |
|     | 中文 |
|     |      |

自动内容对齐​

Better Align:
https://marketplace.visualstudio.com/items?itemName=Chouzz.vscode-better-align

该插件的好处是：它是基于对已选择的文本内容做格式化，不针对特定语言，因此随处可用。

让 Tailwind 支持 Emmet​

该配置项默认是关闭的，需要手动加。

settings.jso

{
  "tailwindCSS.emmetCompletions": true
}