visual studio code教程:基础使用和自定义设置

2018-01-13 11:09:31来源:oschina作者:寒心一笑丶彳亍人点击

分享

visual studio code教程——基础使用、扩展插件安装使用以及少许自定义配置,推荐了几个自认为比较好的要求配置项目比较低的VS code扩展插件:


Html Snippets——html代码提示


easyless——css编程/生成


VS color Picker——颜色选择器


live HTML Previewer——html文件运行预览


SVG Viewer———SVG运行预览


phpfmt PHP formatter—— php代码格式化

1.基础教程

1.1 认识视图界面

和大多编辑器一样,该有的基本都有。如图:

visual studio code教程:基础使用和自定义设置


1.2 文件夹和文件的打开

文件——>打开文件夹/打开文件

visual studio code教程:基础使用和自定义设置


1.3 新建文件/文件夹

新建文件:

a. 文件——>新建文件;

b. 按Ctrl+n;

c. 点文件夹名后面的+号图标。

新建文件夹:

点文件夹名后面的+号图标。

visual studio code教程:基础使用和自定义设置


1.4 拆分编辑器(分列)

快加键:Ctrl+/

点击拆分编辑器图标(右上角)进行拆分编辑器。拆分完毕之后,可以通过鼠标点击拖动文件到相应的列。多列同时浏览免去多文件来回切换。

visual studio code教程:基础使用和自定义设置


1.5 集成终端

终端对开发者来说不可或缺,Visual Studio code 自然也自带终端视窗。

可按快捷键Ctrl+`快速调出终端,也可以查看——>集成终端调出。

需要注意的是:如果当前的文件夹的路径名称包含中文,会出现终端打开失败(待验证)。

visual studio code教程:基础使用和自定义设置


1.6 安装/卸载扩展(插件)

a. 进入扩展视图界面安装/卸载

a1.快捷键:Ctrl+shift+x;

a2.查看——>扩展;

a3.点左侧边框的扩展图标按钮进入。

在顶部搜索框输入你需要的扩展插件,找到之后在扩展插件后面的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。

扩展下载安装完毕之后需要点击【启用】才生效,有些扩展需要重启编辑器才生效。

b. 如何选择扩展(插件)呢?

其实也不难,扩展的名称一般都暴露了它的功能,基本如下:

1.带snippets 一般是代码提示类扩展;

2.带viewer 一般是代码运行预览类扩展;

3.带support 一般是代码语言支持;

4.带document 一般是参考文档类扩展;

5.带Formatt 一般是代码格式化整理扩展;

当然有的snippets 也自带support功能,并不是以上面的关键词作为唯一标准。

visual studio code教程:基础使用和自定义设置


2.VS code用户设置

1用户设置入口

VS code支持用户自定义设置编辑器,包括快加键修改、代码高亮、以及扩展插件配置等,点击文件——>首选项——>用户设置。

编辑器会拆分为两列,一个文件是【默认设置】,一个是【settings.json】,用户设置是空的【settings.json】这个文件(之前没有设置的话),需要自定义的设置项就在settings.json文件里写入json代码即可。

visual studio code教程:基础使用和自定义设置


2 自定义的设置方法为:

1、在【默认设置】里找到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。

2、到【settings.json】粘贴。不过记得加上外层(前后)“{}”符号,不然不是完整的json,会出错或者设置无效。

例如:

{

"editor.fontSize": 20

}

完后按Ctrl+s保存关掉窗口,编辑器的文字的大小就变成20了。

需要注意的是,【settings.json】的代码必须符合json格式,且名称(如上面的editor.fontSize)和值对(如上面的20)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。

visual studio code教程:基础使用和自定义设置

3.插件推荐及使用配置

VS code的扩展还是比较丰富的,具体选择方法在前面的步骤1.6已经教大家了,下面介绍几个对基本web前端编辑比较实用的扩展插件(我个人认为)。

3.1 HTNL Snippets

为HTML文档提供代码提示功能,包含HTML5。

3.2 easyless为less文档提供提示,错误警告,以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子:

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

可以粘贴到用户设置的【默认设置】里,也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略:如果settings.json是空的,应该写成:

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

}

如果之前已有写入json代码,你应该在前面的名称/值对块后面加上“,”(新手容易多加或者少加","符号,个人觉得是这样的)。

****提示:****

在写的时候,代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ,因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找,还没遇到过(我碰到jQuery.js因为这个报错的),入门的同学还是设置成false 比较好。

visual studio code教程:基础使用和自定义设置


3.3 VS color Picker


为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,如RGB等则推荐扩展:Color Picker(Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦)

visual studio code教程:基础使用和自定义设置


3.4 live HTML Previewer

为html文档提供预览功能,需要用命令或者快捷键调出,会在编辑器中新增一列,用于运行html文件。

a. 按F1在命令框中输入:Show side preview新增一列显示html,能边写边看到效果,实时预览。

b. 可以在html文档中右键选择:Open in browser在系统默认浏览器中打开,该模式下不能提供实时预览,保存时不自动刷新浏览器。

visual studio code教程:基础使用和自定义设置


3.5 SVG Viewer

为SVG 文档在编辑器中提供预览。

a. 按F1在命令框中输入:SVG

b. 选择SVG Viewer,新增一列显示SVG运行结果。

visual studio code教程:基础使用和自定义设置

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台