vscode使用教程(web开发)

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项目

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

原文地址:https://www.cnblogs.com/sunmarvell/p/9087260.html

时间: 2024-10-14 03:21:38

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

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

? Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=15818 ? ? 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论. 原文地址:https://www.cnblogs.com/lovebing/p/9578193.html

Play Framework Web开发教程(19): 任务–启动一些进程

有些时候,一个Web应用有需要在正常的请求-响应周期之外执行一些代码,比如一些常时间运行的后台任务,或者也是在请求-响应周期中执行,但无需用户交互.比如我们回到之前的产品分类的例子,我们需要跟踪订单是否有人拣选,打包了和发货了.拣选货物涉及了某个人根据订单在仓库中查找订单中的物品,然后可以打包这些货品,交给物流发货.一个实现方法是生成新图所示的货品目录的物品拣选单(和HTML表单无关). 在过去很长的一段时间内,系统构架都假定这些任务都在Web应用外实现,比如在一些旧系统中的批量任务生成. 而今

《Python3 bottle Web开发系列教程》

<Python3 bottle Web开发系列教程——前言> http://blog.91duofanli.com/opensource/%E3%80%8APython3+bottle+Web%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B%E2%80%94%E2%80%94%E5%89%8D%E8%A8%80%E3%80%8B bottle web开发环境搭建 http://blog.91duofanli.com/opensourc

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点

勤拂拭软件系列教程 - java web开发

勤拂拭软件工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: 1. 勤拂拭软件Android开发之旅(1) 之 Android 开发环境搭建 勤拂拭软件工作室,专业计算机程序定制,程序辅导,论文指导. 技术交流QQ群:439261058 商务合作加QQ:1215714557 工作室官方博客: http://www.cnblogs.com/wangleiblog/ http://blog.csdn.net/u012627658 工作室淘

Play Framework Web开发教程(16): 处理HTTP请求和响应

设计应用的一个方面是规划HTTP请求的URL规范,超链接,HTTP表单以及可能的公用API接口.在Play这是通过路由配置,然后在控制器中实现相应的接口.Play应用中的路由配置可以Controller类构成了MVC框架中的控制层,如下图所示:在Play应用中Controller为定义了HTTP接口的Scala类,而你的路由配置决定了给定的HTTP请求调用哪个Controller中定义的方法,这些Controller中的方法称为Action(动作),因此Play 的MVC框架也称为基于"动作&q

用Eclipse+Maven+Jetty构建Java Web开发环境(综合几篇教程整合2014年版)

工作需要用到Jetty作为web容器,得知Eclipse+Maven+Jetty的组合很不错,因此到网上查找了很多教程,但是或多或少写的不详细或者有过时的内容在里面导致最后配置失败,为了以后同事配置方便,写下这篇配置教程,顺便来方便一下大家. 用到的参考资料如下: [用Maven构建Java Web开发环境(Jetty容器)](以此教程为主)http://sarin.iteye.com/blog/784275 以及 http://sarin.iteye.com/blog/784697 [在Ecl

【web开发】☆★之利用POI操作Excel表格系列教程【8】设置单元格对其方式

[web开发]☆★之利用POI操作Excel表格系列教程[8]设置单元格对其方式 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFCellStyle; import org.apache.poi.hssf.usermodel.HSSFRichTextString; import org.apache.poi.hssf.usermodel.HS

【web开发】☆★之利用POI操作Excel表格系列教程【9】单元格边框处理

[web开发]☆★之利用POI操作Excel表格系列教程[9]单元格边框处理 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellStyle; import org.a

【web开发】☆★之利用POI操作Excel表格系列教程【10】单元格填充色和颜色操作

[web开发]☆★之利用POI操作Excel表格系列教程[10]单元格填充色和颜色操作 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellStyle; import