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. HashSet源码分析2

    package com.test1; import java.util.HashSet; import java.util.Iterator; import java.util.Set; public ...

  2. 【Windows系统】-- 远程桌面时,WIN键被锁定

    问题重现: 在对远程机器进行操作的时候,按键时会自动变成WIN组合键,比如:你按D的效果为[WIN+D]组合键的效果 就是切换到桌面,按E就是[WIN+E]组合键的效果,就是打开资源管理器. 解决方案 ...

  3. MongoDB小结26 - 地理空间索引

    现在有一种查询变得越来越流行(尤其是移动设备):找到离当前位置最近的N个场所. MongoDB专为平面坐标查询做了专门的索引,称为地理空间索引. 同样需要用ensureIndex创建,不过,参数是两个 ...

  4. 旧瓶新酒之ngx_lua & fail2ban实现主动诱捕

    服务器承担着业务运行及数据存储的重要作用,因此极易成为攻击者的首要目标.如何对业务服务器的安全进行防护,及时找出针对系统的攻击,并阻断攻击,最大程度地降低主机系统安全的风险程度,是企业安全从业人员面临 ...

  5. 文件权限的获取,cmd命令:Takeown

    takeown /f * /a /r /d y #强制将当前目录下的所有文件及文件夹.子文件夹下的所有者更改为管理员组(administrators)命令: cacls d:documents*.* ...

  6. [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

    Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more ...

  7. Boss OpenCart 商城自适应主题模板 ABC-0012-01

    Boss OpenCart 商城自适应主题模板 ABC-0012-01 模板特性兼容浏览器IE7, IE8, IE9, IE10, Firefox, Safari, Chrome OpenCart版本 ...

  8. 智能社区--HI3516C可视门禁研发出来咯

    铝壳.非常大气的外壳. 200W像素,HI3516C,携带server.创新的产品.欢迎交流:QQ237753582 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5u ...

  9. [计算机-好软推荐]证件照制作的利器,不会PS也没有关系

    多年前发现了这一款软件,后来不管电脑是从xp升级到win7,还是从win7升级到win8,我都收藏了它. 我用它主要是制作大头照,然后通过咔嚓鱼冲印,比起一般的冲印店要便宜些. 这个软件是台湾的朋友开 ...

  10. 重装Eclipse 往其中加Python插件时 遇到不能独立运行c c++ python 代码时修改办法:

    鼠标移动到新建项目处 ,右键->run as-> run configuration->选择Enable auto build 即可.