11 个 VS Code 设定及套件推荐：色彩、icon 主题、字体、注解、防错标示，外加 Mac Terminal 设

有时候看电脑很久，觉得眼睛看 code 花花的，
这时候好的环境配置就很重要，颜色对比度适中，会比较好看 code，提升工作效率。

今天跟大家分享几个我试了后， 长期使用下来，
我喜欢的主题、字体还有套件。

本篇同步发表于我的 Hashnode 部落格

1. 主题：Glacier Theme

对比度高，又不会刺眼，我满喜欢的。

2. 主题：Material Icon Theme

图案很多种，资料夹也有，能想到的几乎都有。
而且每个对比度也够高，也好看，我很喜欢。

3. 字体：Source Code Pro

是 Adobe 开发的开源等宽字体。 我觉得简单好看，Regular 的粗细适中。

4. 套件：indent-rainbow

有时候 code 很长的时候（尤其是 Html），真的看得非常眼花，
这个套件能帮助你把缩排变成彩虹，帮助非常大！

5. 套件：Better Comments

针对常见的注解写法，有不同颜色标示， 还能透过设定档设定更多的分类。
也满好用的。

6. 套件：TODO Highlight

针对常见的注解写法，会变成色块的方式显示。
不过如果和 Better Comments 混用， TODO 会变成橘色字橘色背景，反而不明显。
建议可以择一使用。

7. 套件：Todo Tree

当 TODO 注解散落在各个档案中，只能使用全域搜寻一个个找吗？
不，有了 Todo Tree 后，它会帮你按照资料夹分类，列出来。
也很实用喔！

8. 套件：Color Highlight

使用后 CSS 中的颜色会直接显示为该颜色的色块，满直观的。
定义为 SCSS 变数后也会显示颜色，推！

点击前方的小色块还能直接改颜色，只不过我通常不会这么用。

9. 套件：Code Spell Checker

有了这个套件后，就不用担心打字时手残命名拼错字， 可以避免掉因错字而找不到该变数或 function，然后 debug 困难的情况。

它会帮你将错字标示出来提醒你，
例如图片中的 userInfomation 应该是 userInformation。
推荐！

10. 套件：Chinese Lorem

在切版时有的时候需要假字先填充内容，接近完成时的样貌。VsCode 内建有英文的 lorem，而这个套件可以产生中文版的假字，在 HTML 的格式内，输入 ctlorem 按下 tab 或是 enter 即可产生 128 个字的中文假文。

我公司是使用 .Net Core 开发， 所以 .cshtml 要能够运作的话， 要另外将 aspnetcorerazor 设定到支援的语言中。

11. 套件：Inline fold

这个套件使用后能够把你的 class name 缩起来，画面变得清爽许多！
预设是折叠起 class，好像 svg 也能折叠起来， 不过我还没有试用过。

后记：这有个致命缺点，在编辑 vue v-bind:class 一直开开合合，其实有一点不便。
如果你不常更改 class name 的话，推荐！但经常要变更的话就不推荐了。

和上一个套件一样，.cshtml 要能够运作的话， 要另外将 aspnetcorerazor 设定到支援的语言中。

Mac Terminal 设定

另外，我是使用 Mac， 我有把 VS Code 的 Terminal 改成 iTerm APP。

而我的 iTerm 有改过样式，
所以 VS Code 的 Terminal 也一起有客製的样式啦！(开心)

分享我之前看过的教学文给大家：

为 MAC 的 Terminal 上色 - 透过 iTerm 2 和 Oh My Zsh 高亮你的终端机

在VSCode 装个漂亮的 Terminal 介面- zsh + powerlevel10k

以上就这次的 VS Code 套件分享。
希望有帮助到你。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜欢我的创作，还想看看其他有趣的分享与日常，
可以追蹤我的 IG → @im1010ioio • Instagram 相片与影片

或者是，
送杯珍奶鼓励我 →