1.1 VSCode简介

VSCode官网:https://code.visualstudio.com/

支持语音:

速度较快,对超大文件读写速度飞快(打开10M代码不到1s,Subline原生会卡近6s),插件数量相对少,有一些增强功能比如调试器, 终端,原生支持语言语法高亮较少(C# JS TypeScript是第一位),内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好,写C#和JS/TS专用

注意:VSCode需要安装git和Framework

主题常用:Monokai

1.2 常用插件

插件名称 介绍 使用方法
filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 自动启用
vscode-icons 美化VSCode的界面,在文件名前面显示小图标 自动启用
view in browser 用浏览器预览HTML文件 鼠标右键
Bootstrap 3 Sinnpet 常用 bootstrap 的可以下 根据片段触发
css peek 跟踪样式表中 CSS 类和 id 的样式,点击右键直接跳转到对应的css代码  
Auto Close Tag 自动闭合HTML标签  
HTML Snippets 超级实用且初级的 H5代码片段以及提示  
HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式。 <br>新版已经支持scss文件检索(更新应该是这个插件 IntelliSense for CSS class names in HTML)
Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试  
jQuery Code Snippets jquery 重度患者必须品  
Sublime Text Keymap for VS Code 模仿sublime快捷键操作  
Path Intellisense 自动路劲补全,默认不带这个功能的  
ESlint ESlint 接管原生 js 提示,可以自定制提示规则。 1
HTMLHint html代码检测 1
Project Manager 在多个项目之前快速切换的工具  
HTML CSS Class Completio 扫描项目中的所有css中的class名,在html中自动补全,安装后每次打开自动启用  
     
vscode-fileheade 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间  
Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 1
Beautify css, sass and less code 格式化代码的工具,css/sass/less格式化 1
Bracket Pair Colorizer 让括号拥有独立的颜色,易于区分。可以配合任意主题使用。  
vetur 语法高亮、智能感知、Emmet等  
VueHelper snippet代码片段  

1.3主题

1.Material

冷门、好看、实用。此主题已停更许久

2.Dracula

目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~

3.One Dark Pro

源于Atom,老版本的Atom One Dark主题可以扔了.

VScode使用简介的更多相关文章

  1. VScode小白简介

    前言   现在使用Vscode编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点收货了一大批忠实粉丝 最近因项目需要开始使用Vscode,但不知为何,感觉有点力不从心,不知道该怎么用 首先想到去官 ...

  2. VSCODE插件开发:用户输入输出

    阅读这篇文章之前,假设你已经具有开发helloworld的插件的能力. vscode.window 简介 vscode.window 负责当前激活窗口的输入输出,比如展示信息,和用户输入等功能都是用v ...

  3. ASP.NET MVC 简介(附VS2019和VSCode版示例)

    MVC可以理解为一种思想,应用在web应用程序的架构上. ASP.NET MVC的核心类是实现了IHttpHandler接口的MVCHandler,它的底层仍然是HttpHandler.HttpReq ...

  4. 2016年最新mac下vscode配置golang开发环境支持debug

    网上目前还找不到完整的mac下golang环境配置支持,本人配置成功,现在整理分享出来. mac最好装下xcode,好像有依赖关系安装Homebrew打开终端窗口, 粘贴脚本执行/usr/bin/ru ...

  5. VSCODE 插件初探

    写在前面 分享一个vscode插件background(用于改变背景).点击直接跳到vscode插件开发步骤 做vscode的插件,很久就有这个想法了,但是一直因为这样,那样的事情耽误,放弃了N次.不 ...

  6. jupyter巨好玩-使用jupyter结合VScode写博客

    打开jupyter-ipython 其实人家就叫jupyter了,后面咱可能就少提ipython了. # 打开命令行,让我们输入 jupyter notebook 当然,这个前提是你已经安装了jupy ...

  7. python的简介及入门

    前言 为何使用Python Python 是一种效率极高的语言.与其他众多的语言相比,实现相同功能,使用Python编写的程序包含的代码更少.Python的语法简单,易上手,使用Python编写的代码 ...

  8. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库 ...

  9. VSCode 必装的 10 个高效开发插件

    本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」. V ...

随机推荐

  1. C# 学习笔记 三层架构系列(控件一)

    下面是我两周的学习总结:这是我写给自己的,如果哪位朋友有幸看到这篇文章就是缘分.如果所说的内容不对,就请纠正.勿喷!!! 想要将两周的学习知识通过文字.通过代码.通过图片储备起来,以防自己那天思维短路 ...

  2. 收集主机OS相关数据

    #!/usr/bin/ksh touch hostinfo$(date +%Y%m%d).csv filename=hostinfo$(date +%Y%m%d).csv >${filename ...

  3. vue动态绑定class的最常用几种方式

    vue动态绑定class的最常用几种方式:  第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...

  4. 02、监听key是否正确

    SDKInitializer其实是有两个action,第三个SDK_BROADTCAST_INTENT_EXTRA_INFO_KEY_ERROR_CODE虽然是一个常量但是它不是action.第二个a ...

  5. Redis学习和应用记录(2)--常用数据类型及命令

    这一节主要介绍Redis支持的数据结构及常用命令. 数据类型 Redis支持多种数据类型的存储,包括字符,列表,集合,有续集合,哈希表,bit数组,超级日志等.下面分别介绍: strings:存储普通 ...

  6. eclipse的快捷键---调试

    1:查看类或接口的方法 Ctrl+T 2:debug调试查看信息 Ctrl+Shift+i 3:debug调试快捷键 (1):F11好像是重新运行debug. (2):F8直接输出结果.(3):F5单 ...

  7. Vue.js经典开源项目汇总-前端参考资源

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  8. jvm gc日志解读

    参考 https://blog.csdn.net/yxc135/article/details/12137663 认识gc日志每个位置的含义 java 8 full gc [Full GC (Meta ...

  9. inner join / left join / right join

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  10. drupal 8——在CKEditor中导入video media时添加caption会导致video缩小至消失

    在CKEditor中,我点击media browser,选择video型的media,并在caption中输入video的名字.当我保存后发现在前台页面的video消失了,只留下video的名字,点击 ...