1.安装

进入官网下载https://code.visualstudio.com/

一直下一步就好了,中间可以选择把软件安装在哪个目录。

2.常用插件安装

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

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

a2.查看——>扩展;

a3.点左侧边框的扩展图标按钮进入。(最下面的正方形图标)

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

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

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

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

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

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

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

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

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

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

3.需要安装的插件

3.1 HTML Snippets

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

3.2 HTML CSS support 

css自动补齐

3.3 VS color Picker

为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,

如RGB等则推荐扩展:Color Picker (Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦)

3.4 live HTML Previewer

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

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

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

3.5 View In Browser 
- 预览页面(ctrl+F1)

3.6  vscode-icons

侧栏的图标

3.7 JS-CSS-HTML Formatter 

格式化

3.8 jQuery Code Snippets

jquery 自动提示

3.9 Path Autocomplete

- 路径自动补齐

3.10 Npm Intellisense 
- npm包代码提示

3.11 ESLint 
- 检测JS必备

3.12 Debugger for Chrome 
- 方便调试 
3.13 Auto Rename Tag 
- 自动同步修改标签

3.14 Bootstrap 3 Snippets 
- bootstrap必备

3.15 Vue VSCode Snippets

- vue必备

3.16 background 
- 一个萌萌的插件,可以自己设置vsc的背景图

3.17 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 比较好。

4.常用快捷键

文件 – 首选项 – 键盘快捷方式 :就可以看到所有快捷键;

修改快捷键 
文件 – 首选项 – 键盘快捷方式,找到你要修改的快捷键名字,右边覆盖就可以了,很方便!也可以高级自定义,选项在文件 – 首选项 – 键盘快捷方式打开之后的最上边,和sublime 自定义快捷键的方式相同。

将保存,和打开浏览器的快捷键改成了自己习惯的方式,如下图;

注释:ctrl + /

向上(下)复制行 shift + alt + top(down)

向上(下)移动行* alt + top(down)*

新建一个窗口 ctrl + shift + N

行增加缩进: ctrl + [

行减少缩进 * ctrl + ]**

裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + x     ctrl +k

强烈建议把这个启用,这样保存的时候就会自动删掉那些没用的空格,在很多公司的代码规范里都是不允许存在这些空格的。

显示隐藏侧边栏:ctrl + B

拆分编辑器(最多拆分成三块):ctrl + /按ctrl + 1(2,3)就可以在拆分后的编辑器里切换

方法缩小ctrl +(-)

关闭编辑器 ctrl + W(F4)

切换编辑器 ctrl + shift + left(right)

也可以用 ctrl+1(2,3)

切换全屏 F11

切换自动换行 alt + Z

显示Git ctrl + shift + G

前提是你的项目必须是一个git项目

先用着,后面有需要了来补充;

vscode使用教程(web开发)的更多相关文章

  1. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接

      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...

  2. IT兄弟连 Java Web教程 Web开发的相关知识

    Web基本概念 Web,是环球信息网的缩写,也称作“WWW.W3”,英文全称为World Wide Web,中文名成为万维网,常简称为Web.Web分为Web客户端和Web服务器程序.Web可以让We ...

  3. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  4. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

  5. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  6. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  7. 对于 Web 开发很有用的 jQuery 效果制作教程

    如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...

  8. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  9. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  10. python bottle框架(WEB开发、运维开发)教程

    教程目录 一:python基础(略,基础还是自己看书学吧) 二:bottle基础 python bottle web框架简介 python bottle 框架环境安装 python bottle 框架 ...

随机推荐

  1. systemtap 作用-- SystemTap使用技巧

    http://blog.csdn.net/wangzuxi/article/details/42849053

  2. E-SATA接口

    1.VGA接口 VGA接口就是显卡上输出模拟信号的接口,也叫D-Sub接口,其实就是显示转移的接口,比如连接投影仪.连接电视等等.从外观上讲,VGA接口是一种D型接口,上面共有15针空,分成三排,每排 ...

  3. Linux学习系列之memcached

    memcached简介 一.memcached是什么 memcached是一个开源的.支持高性能.高并发的分布式内存缓存系统 mem+cache+daemon:分布式内存缓存守护进程 memcache ...

  4. Cocos2dx 小技巧(九)现成的粒子特效

    和高中的她 差点儿相同有两三年没见面了吧.下午她正好来泉州.我俩出来一起吃了个饭. 怎么说呢,自从高中毕业后我俩的联系就少了非常多.大学期间也就见过两三面吧. 现在毕业也快一年了,她已是人妇,而我自己 ...

  5. UVa 1531 - Problem Bee

    题目:如图所看到的的蜂巢型的图中.蜜蜂想从A点飞到B点,假设A与B不在同一个正六边形中, 则它先飞到A的中心.每次飞到相邻格子的中心,最后飞到B的中心,再飞到B点: 假设在一个格子中.直接飞过去就可以 ...

  6. 关于函数return的一些理解与小实例

    先看代码: function example (){ var index=1; return {//像这种加个大括号的就是返回一个对象了,而不仅仅是一个值 index, net:function(){ ...

  7. 利用vue-cli配合vue-router搭建一个完整的spa流程

    好文章备忘录: 转自:https://segmentfault.com/a/1190000009160934?_ea=1849098 demo源码:https://github.com/1590123 ...

  8. checkstyle+ant生成checkstyle报告

    <?xml version="1.0" encoding="UTF-8" ?> <project name="tibim" ...

  9. 托管C++线程锁实现 c++11线程池

    托管C++线程锁实现   最近由于工作需要,开始写托管C++,由于C++11中的mutex,和future等类,托管C++不让调用(报错),所以自己实现了托管C++的线程锁. 该类可确保当一个线程位于 ...

  10. Android学习笔记-junit单元测试

    我们都知道测试对于程序员来说是必不可少的,所以,做Android程序,也要学会使用junit,这里比着java的junit测试,要稍微复杂一点,需要一些配置,下面饿哦就介绍一下怎样使用junit的测试 ...