Visual Studio Code 使用指南
安装
VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。
HTML Snippets:增强了zen-coding,增加了H5的自动补全,安装后每次打开自动启用(可能与其他插件冲突)。
下载地址:https://code.visualstudio.com/Download
配置
Ctrl + Shift + P 或 F1 打开命令面板(也可以使用 查看-》命令面板打开);
输入 user set 后按回车打开用户配置;
使用 “editor.fontFamily”:“Consolas, ‘Courier New’, monospace” 选择字体样式,默认为“Consolas, ‘Courier New’, monospace”;使用 editor.fontSize“:14 控制字体大小,默认为14;使用 ”editor.wrappingColumn“:0使文本自动换行,默认为300;在左侧的默认配置中会有详细的中文描述,配置文件是json格式的文本文档。
插件
Ctrl + Shift + P 或 F1 打开扩展面板,输入 install 后按回车打开扩展安装面板;或点击侧边栏的最后一个按钮;或使用ctrl + shift + x命令打开;或使用 查看-》扩展打开扩展面板。
在对话框中输入[string ]@sort:installs可以根据下载量排序查看,选择所需插件,单击安装即可。
@sort:installs:根据下载量排序查看所有插件,asc 升序排列,desc 降序排列。
@sort:raTIng :分级查看,asc 升序排列,desc 降序排列。
string可以为空
推荐插件
C/C++:添加C/C++支持,包括但不限于自动补全
Python:自动缩进,补全,查错,debug,代码格式化等等
beauTIfy:格式化html,css,js
vscode-icons:一款很火的图标主题
HTML Snippets:可以在不输入 《 的情况下提示
View In Browser:在浏览器中打开 HTML 文件
Crane - PHP Intellisense:PHP代码的自动补全插件
jQuery Code Snippets:一款jQuery重度患者的插件
Debugger for Chrome :调试JavaScript
Git History:显示git log和line history
Git 的使用
需要本机已经安装 Git
无需安装插件,单机侧边栏的第三个图标即可进行 add、commit、push、pull。(或者使用ctrl+shift+g打开,或使用 查看-》Git 打开Git)
主题更换
图标主题:Ctrl+shift +p 打开命令面板,输入 icon theme 后回车,选择一个即可。
颜色主题:Ctrl+shift +p 打开命令面板,输入 color theme 后回车,选择一个即可。
跳转
跳转到文件:Ctrl+P。
跳转到符号:Ctrl+shift+o,可以跳转到文件中的方括号、大括号等等。
跳转到行:Ctrl+G,可以跳转到指定行。
Debug
使用ctrl+d 打开debug面板。
可以根据需要配置launch.json
常用功能
Emmet:使用 Tab 自动补全HTML标签
Markdown Preview:使用 Ctrl + shift + v预览markdown文件
使用shift + alt + up/down可以向上/下复制选中内容或者当前行
常用插件
View In Browser
- 预览页面(ctrl+F1)
vscode-icons
- 侧栏的图标,对于一个有视觉强迫症的人是必须要的
HTML Snippets
- 支持HTML5的标签提示
HTML CSS support
- css自动补齐
JS-CSS-HTML Formatter
格式化
jQuery Code Snippets
jquery 自动提示
Path Autocomplete
- 路径自动补齐
Npm Intellisense
- npm包代码提示
ESLint
- 检测JS必备
Debugger for Chrome
- 方便调试
Auto Rename Tag
- 自动同步修改标签
Bootstrap 3 Snippets
- bootstrap必备
Vue 2 Snippets
- vue必备
background
- 一个萌萌的插件,可以自己设置vsc的背景图
常用快捷键
(在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 OpTIon/Alt 键。)
这里主要就是实验F1上的快捷键,一些我认为没用的我就不列出来了。
向上(下)复制行 shift + alt + top(down)
向上(下)移动行* alt + top(down)*
新建一个窗口 ctrl + shift + N
行增加缩进: ctrl + [
行减少缩进 * ctrl + ]**
裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x
强烈建议把这个启用,这样保存的时候就会自动删掉那些没用的空格,在很多公司的代码规范里都是不允许存在这些空格的。
显示隐藏侧边栏:ctrl + B
拆分编辑器(最多拆分成三块):ctrl + /按ctrl + 1(2,3)就可以在拆分后的编辑器里切换
方法缩小ctrl +(-)
关闭编辑器 ctrl + W(F4)
切换编辑器 ctrl + shift + left(right)
也可以用 ctrl+1(2,3)
显示和隐藏侧边栏 ctrl + B
切换全屏 F11
切换自动换行 alt + Z
显示Git ctrl + shift + G
前提是你的项目必须是一个git项目
这个还是很有用的,有时候我们的屏幕不够大,可是代码没有自动换行,所以被遮住的代码就会看不到,但是你用这个快捷键就可以换行看到了。这个我是在用户设置里面设置成自动换行的。
修改用户设置
把默认的用户设置成适合我们自己的还是很重要的。
也很简单,文件 – 首选项 – 用户设置,然后出来左边的默认设置是不能改的,需要在右边setTIngs.json中覆盖。
修改快捷键
文件 – 首选项 – 键盘快捷方式,和修改用户设置的时候一样,找到你要修改的快捷键名字,右边覆盖就可以了,一些还没有绑定快捷键的功能可以在左边的最下面看到,然后快捷键的名字就是这个。
新建文件
右键 – 新建文件,文件后缀名自己加上,自动识别。
新建.html文件后,空白页,没有页面默认代码结构,此时在编辑区输入html,回车第二个或者第三个即可。
技术群 : 192713488
Visual Studio Code 使用指南的更多相关文章
- Visual Studio Code 配置指南
Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指 ...
- Visual Studio Code使用指南
简介 Visual Studio Code是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性 ...
- Visual Studio Code,完美的编辑器
今日凌晨,微软的文本(代码)编辑器 Visual Studio Code(简称 VS Code),发布了首个正式版,距离首个 beta 版上线时间刚好一年. 在十多年的编程经历中,我使用过非常多的的代 ...
- ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序
原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith ...
- Visual Studio Code中文文档(一)-快速入门
Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...
- Visual Studio Code中文文档
Visual Studio Code中文文档 Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行. ...
- 学习笔记之Visual Studio Code & Clang
Mac上XCode太占空间,卸载然后安装VSCode和Clang.在VSCode中再安装extension C/C++和Code Runner,配置Tasks: Configure Task,就可以开 ...
- Visual Studio Code v1.17
Visual Studio Code v1.17发布 欢迎来到2017年9月发行的Visual Studio代码.在这个版本中有一些重要的更新,我们希望你会喜欢,一些关键的亮点包括: macOS To ...
- 如何用visual studio code更好的编写python
目录 1.先决条件 2.Visual Studio Code扩展安装Python 3.Visual Studio Code扩展安装Python for VSCode 4.Visual Studio C ...
随机推荐
- 《A_Pancers》第二次作业 基于Android系统的音乐播放系统项目开题报告
小组名 N A B C D 总分 Just_Do_IT! 8 8 9 9 8 42 Miracle-House 8 8 7 8 8 39 ymm3 9 8 8 8 8 41 Spring_Four ...
- YOLO V2论文理解
概述 YOLO(You Only Look Once: Unified, Real-Time Object Detection)从v1版本进化到了v2版本,作者在darknet主页先行一步放出源代码, ...
- RabbitMQ入门_08_所谓的点对点与发布订阅模型
A. JMS 模型 JMS 中定义了点对点和发布订阅两种消息模型,原来以为 AMQP 协议中 direct Exchange 对应点对点模型,topic Exchange 对应发布订阅模型,fanou ...
- js插件---GoJS 如何去水印
js插件---GoJS 如何去水印 一.总结 一句话总结:把a.Kv=d[w.Jg("7eba17a4ca3b1a8346")][w.Jg("78a118b7" ...
- Dajngo的CBV和FBV
CBV: class. base. view 路由: url(r'students/', views.StudentsView.as_view()) 视图: from django.views imp ...
- 『cs231n』无监督学习
经典无监督学习 聚类 K均值 PCA主成分分析 等 深度学习下的无监督学习 自编码器 传统的基于特征学习的自编码器 变种的生成式自编码器 Gen网络(对抗式生成网络) 传统自编码器 原理 类似于一个自 ...
- 安装torch-opencv
安装torch-opencv torch torch-opencv opencv-3.1.0 opencv-contrib 想在torch中使用光流法,于是就希望能够调用opencv中的光流代码,而t ...
- UVA-11882 Biggest Number (DFS+剪枝)
题目大意:给出一个方格矩阵,矩阵中有数字0~9,任选一个格子为起点,将走过的数字连起来构成一个数,找出最大的那个数,每个格子只能走一次. 题目分析:DFS.剪枝方案:在当前的处境下,找出所有还能到达的 ...
- OC 设计模式
设计模式 一种或几种被所有程序员广泛认同的,有某些特定功能,或者实现某些特殊作用的编码格式 单例模式 键值编码(KVC) 键值观察(KVO) 观察者模式() 工厂模式(工厂方法) ps:MVC &am ...
- [转载]Java集成PageOffice在线打开编辑word文件 - Spring Boot
开发环境:JDK1.8.Eclipse.Sping Boot + Thymeleaf框架. 一. 构建Sping Boot + Thymeleaf框架的项目(不再详述): 1. 新建一个maven p ...