VScode 刚载完的必备扩充功能

各位在刚载好VScode都会做甚麽样的设定或安装甚麽扩充功能呢?
虽然网路上一大堆的介绍,但零零总总,我也是找各个网站找了许久。
在这边就总和一下我觉得最初载好应该要有的设定吧!

1.改成中文版介面

Chinese (Traditional) Language Pack for Visual Studio Code

https://ithelp.ithome.com.tw/upload/images/20201108/20123321pqyQiEpijQ.png

VScode载好後只支持中文版,载了这个以後就可以把程序码以外的基本功能翻译成中文啦。
不过载好後可不会直接变成中文,请先输入Ctrl + Shift + P 上边就会跳出框框,这时在里面输入 configure display language并按下Enter,这时候会问你要哪个语言,再输入zh-tw就行罗!


2.让VScode自动换行

快捷键: Alt + Z
手动: 一般预设为off,改成on就可以了

  1. 档案-->喜好设定-->设定
    https://ithelp.ithome.com.tw/upload/images/20201108/201233215yBNS59ods.png

2.输入editor.wordWrap
https://ithelp.ithome.com.tw/upload/images/20201108/20123321GVf1otRCn9.png


3.按住Ctrl + 滑鼠滚轮 就能缩放字体

如果要把介面以及画面大小都变大,Ctrl + "+"Ctrl + "-"就可以了
但如果只想缩放字体大小的话就要设定一下了:
1.和上面一样。档案-->喜好设定-->设定
https://ithelp.ithome.com.tw/upload/images/20201108/201233210Zs1KCO23M.png

2.输入editor.mouseWheelZoom-->打勾
https://ithelp.ithome.com.tw/upload/images/20201108/20123321SnQmANSlAc.png


4.自动更新

里面有四个选项,这个也就见仁见智了,每个人喜好不一样,要选取什麽样的自动更新,选项也有写
1.同上
2.输入files.autoSave
https://ithelp.ithome.com.tw/upload/images/20201108/20123321VkDfk7qiMg.png

5.中文假字(lorem)

Chinese Lorem

安装後只要输入ctlorem就会有中文版的假字啦

https://ithelp.ithome.com.tw/upload/images/20201108/20123321RrIzoShh5T.png


6.假图

Lorem Picsum photos snippets

安装後只要输入picsum就会有假图啦!

https://ithelp.ithome.com.tw/upload/images/20201108/20123321aMdWk5MH4c.png


7.区分巢状括号

Bracket Pair Colorizer 2

打了很多程序码,要是遇到一堆括号,有可能会分不清,这个扩充功能就是要把这些不同组的括号用不同颜色区分!

https://ithelp.ithome.com.tw/upload/images/20201108/20123321UZMsY2Z96c.png
https://ithelp.ithome.com.tw/upload/images/20201108/20123321WWVIk4A5b3.png


8.变更不同语言档案的icon

Material Icon Theme

像css、jacascript 有很多种不同类型的档案,这写档案在vscode里面是没有内建这麽多图案的,安装这个可以让人更好辨认是甚麽样类型的档案。
https://ithelp.ithome.com.tw/upload/images/20201108/20123321DX09ZQqPZV.png


9.同时删除元素头尾

Auto Rename Tag

比如我打<div></div>
那麽我删除v,他就会一起变成<di></di>
要加s?,那麽他就会一起变成<dis></dis>
只要删除一边,另一边会跟着一起换

https://ithelp.ithome.com.tw/upload/images/20201108/20123321elQMhsCcyF.png


10.程序码与网页画面-同步化

Preview on Web Server

如果是新建立的档案记得要先把档案关闭,并拖拉有那个档案的资料夹到VScode里面,这样才有办法使用这个功能哦!
对着档案点下滑鼠右键,最下面两个就是罗!一个是在VScode里面打开,另一个是打开在网页上,两种都是同步的,很方便吧!

想打开到网页上-->快捷键:Ctrl + Shift + L
想打开到VScode上-->快捷键:Ctrl + Shift + V

https://ithelp.ithome.com.tw/upload/images/20201108/20123321uZ9XaQaINy.png


11.更多不同颜色,更好辨认

老实说一开始真的蛮不习惯的,但用了一两天後发现真的比较不会眼花,多点颜色反而比较好辨认程序码!

indent-rainbow

https://ithelp.ithome.com.tw/upload/images/20201108/20123321Dg5lppjTCs.png


希望这些有帮助到一些新手,能省掉更多麻烦!!!


<<:  [PHP][Laravel][Blade]如果想要在画面中,限制显示字数,该怎麽做呢?

>>:  前端工程学习日记第7天

Flutter体验 Day 20-Provider

Provider Provider封装了 InheritedWidget 功能,提供更高效且易懂的使...

D04 - 从零开始的 Firmata 通讯

电子助教:「(大包小包)窝准备好了 (≖‿ゝ≖)✧」 鳕鱼:「东西放下,我们没有要转生。」 电子助教...

连续 30 天 玩玩看 ProtoPie - Day 27

用 Range 来让滑到的影片动起来 今天来延续好几天前的练习。 我们有好几个影片,希望在滑到那个画...

Day-24 躺着认识Excel Round家族

今日练习档 ԅ( ¯་། ¯ԅ) 来到公式系列的第三天,今日准备的是除法相关的公式,四舍五入、无条件...

[Day04]稽核员守则与伦理

耶!上完课、通过考试之後,是不是就可以出去稽核客户了咧? 是不是可以执行稽核活动,然後就可以稽他!稽...