vscode代码编辑框控件_visualstudiocode教程vscode的基础
使⽤和⾃。。。
推荐了⼏个⾃认为⽐较好的要求配置项⽬⽐较低的VS code扩展插件:
Html Snippets——html代码提⽰
easyless——css编程/⽣成
VS color Picker——颜⾊选择器
live HTML Previewer——html⽂件运⾏预览
SVG Viewer———SVG运⾏预览
还有就是⽤户设置的配置⽅法和⽤户代码⽚段的编写。
***提⽰***
经验⾥的图⽚都是GIF动图,⼤家要多次点击图⽚才能看到具体操作。
1.1 认识视图界⾯
和⼤多编辑器⼀样,该有的基本都有。如图:
1.2 ⽂件夹和⽂件的打开
⽂件——>打开⽂件夹/打开⽂件
1.3 新建⽂件/⽂件夹
新建⽂件:
a. ⽂件——>新建⽂件;
b. 按Ctrl+n;
c. 点⽂件夹名后⾯的+号图标。新建⽂件夹:
点⽂件夹名后⾯的+号图标。
1.4 拆分编辑器(分列)
快加键:Ctrl+\
点击拆分编辑器图标(右上⾓)进⾏拆分编辑器。拆分完毕之后,可以通过⿏标点击拖动⽂件到相应的列。多列同时浏览免去多⽂件来回切
换。
终端对开发者来说不可或缺,Visual Studio code ⾃然也⾃带终端视窗。
可按快捷键Ctrl+`快速调出终端,也可以 查看——>集成终端 调出。
需要注意的是:如果当前的⽂件夹的路径名称包含中⽂,会出现终端打开失败(待验证)。
1.6 安装/卸载扩展(插件)
a. 进⼊扩展视图界⾯安装/卸载
a1.快捷键:Ctrl+shift+x;
a2.查看——>扩展;
a3.点左侧边框的扩展图标按钮进⼊。
在顶部搜索框输⼊你需要的扩展插件,到之后在扩展插件后⾯的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。扩展下载安装完毕之后需要点击【启⽤】才⽣效,有些扩展需要重启编辑器才⽣效。
b. 如何选择扩展(插件)呢?
其实也不难,扩展的名称⼀般都暴露了它的功能,基本如下:
1.带snippets ⼀般是代码提⽰类扩展;
2.带viewer ⼀般是代码运⾏预览类扩展;
3.带support ⼀般是代码语⾔⽀持;
4.带document ⼀般是参考⽂档类扩展;
5.带Formatt ⼀般是代码格式化整理扩展;
当然有的snippets 也⾃带support功能,并不是以上⾯的关键词作为唯⼀标准。
1.7 ⽂件图标主题设置之前写的有⼀篇经验,链接附上。1.7 ⽂件图标主题设置之前写的有⼀篇经验,链接附上。
2.VS code⽤户设置visual studio和vs code的区别
2.1 ⽤户设置⼊⼝
VS code⽀持⽤户⾃定义设置编辑器,包括快加键修改、代码⾼亮、以及扩展插件配置等,点击⽂件——>⾸选项——>⽤户设置。
编辑器会拆分为两列,⼀个⽂件是【默认设置】,⼀个是【settings.json】,⽤户设置是空的【settings.json】这个⽂件(之前没有设置的话),需要⾃定义的设置项就在settings.json⽂件⾥写⼊json代码即可。
2.2 ⾃定义的设置⽅法为:
1、在【默认设置】⾥到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论