改造你的VSCode，大幅提升你的Coding效率

工欲善其事，必先利其器，插件是Coding效率提升的利器

今天要来介绍的主角是Visual Studio Code(简称VSCode)，它是一款微软开发的原始码编辑器，几乎支援了所有的程序语言，为开发者提供好用的工具来提升效率，撰写高质量的程序码，那就让我来推荐给大家自己使用过的好用工具吧～

环境设定

在终端机使用指令开启VS Code

按下 command+Shift+P 来呼叫命令选择区，输入shell command，选择「Shell Command: Install code command in PATH」

安装完重启後，在要打开的资料夹右键，开启终端机，并输入code .，就会帮你开启专案在 VS Code 上罗～
p.s因为我是装iTerm2所以设定终端机为iTerm2

教你如何设定在Finder目前资料夹开启终端机

1.开启「系统偏好设定」
2.点击「键盘」

3.开启後选择上方「快速键」→左侧「服务」→找到档案与资料夹勾选「新增位於档案夹位置的终端机视窗」(系统预设)或是「New iTerm2 Window Here」(自行安装)

4.之後再到你要开启的资料夹点选右键，再输入「code .」就可以开启罗～

外观

设定完之後我们就要来讲美化VSCode的介面，让你在操作上能够更方便

One Dark Pro

自订VS Code外观样式
先安装好One Dark Pro主题後，点击Preferences>Color Theme

在选择刚刚安装的One Dark Pro主题

vscode-icons

vscode本身没有图示，安装後可以帮你把档案与资料夹icon美化
使用前：

使用後：

好用套件

TODO Highlight

当你写程序码过程中，突然想到有地方需要补充，但又不想停下手边的工作，打断思路，这功能超好用，只要使用TODO/FIXME关键字，就会把注解高亮起来

但是档案很多就会散落在各个档案里面，这时候还可以搭配Todo Tree，会统整整个专案，依照档案结构来产生树状的列表，相当方便

AutoFileName

提示档案位置。有时候我们打相对位置，不确定名称或路径时，都需要打开资料夹去确认，但是用了这套件後，就会出现提示。

Auto Close Tag

当你打html tag标签时，会帮你把右括号或结束标签补上

图片来源

Auto Rename Tag

修改html tag时，会自动修改对应的标签

图片来源

Bracket Pair Colorizer

当程序码多的时候，会变得很难阅读，甚至有时候还会误删或漏掉，导致要找很久，使用这个套件，就会自动将成对的括弧加上颜色，无论是在html、css、js点选括号时，会将对应的括号选起来，阅读程序码很方便。

indent-rainbow

将程序码缩排的部分增加颜色，方便阅读程序码

Sass/SCSS 相关

Live Sass Compile

即时编译SASS/SCSS成CSS，不需要使用官方直译器与终端机，也可以自订输出的档案位置，超级方便～

档案>喜好设定>设定，搜寻「livesass」就会出现安装Live Sass Compile的设定

在setting.json里面输入你的设定，就完成罗～以下是我的设定

format的设定属性有四种：