VsCode 的使用
一、简介
VsCode(Visual Studio Code),官网地址:https://code.visualstudio.com/
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). Begin your journey with VS Code with these introductory videos.
二、特点
- 开源
- 轻量级:更少的内存和CPU占用率
- 更大的社区支持
- 更好的支持JavaScript和TypeScript
三、使用
VsCode是一个轻量的编译器,所以默认是通过打开文件夹的方式来打开工程。
常用快捷键
alt + ← : 后退 alt + →: 前进
- 主命令框
F1 或 Ctrl+Shift+P
: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:
- 按一下 Backspace 会进入到
Ctrl+P
模式 - 在
Ctrl+P
下输入 > 可以进入Ctrl+Shift+P
模式 - 在
Ctrl+P
窗口下还可以:
-直接输入文件名,跳转到文件- ? 列出当前可执行的动作
- ! 显示 Errors或 Warnings,也可以
Ctrl+Shift+M
- : 跳转到行数,也可以
Ctrl+G
直接进入 - @ 跳转到 symbol(搜索变量或者函数),也可以
Ctrl+Shift+O
直接进入 - @ 根据分类跳转 symbol,查找属性或函数,也可以
Ctrl+Shift+O
后输入:进入 - # 根据名字查找 symbol,也可以
Ctrl+T
编辑器与窗口管理
- 打开一个新窗口:
Ctrl+Shift+N
- 关闭窗口:
Ctrl+Shift+W
- 同时打开多个编辑器(查看多个文件)
- 新建文件
Ctrl+N
- 文件之间切换
Ctrl+Tab
- 切出一个新的编辑器(最多 3 个) Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
- 左中右 3 个编辑器的快捷键
Ctrl+1
Ctrl+2
Ctrl+3
- 3 个编辑器之间循环切换 Ctrl+
- 编辑器换位置,
Ctrl+k
然后按 Left或 Right
代码编辑
格式调整
- 代码行缩进:
Ctrl+[
、Ctrl+]
Ctrl+C
、Ctrl+V
复制或剪切当前行/当前选中内容- 代码格式化:
Shift+Alt+F
,或Ctrl+Shift+P
后输入format code
- 上下移动一行:
Alt+Up
或Alt+Down
- 向上向下复制一行:
Shift+Alt+Up
或Shift+Alt+Down
- 在当前行下边插入一行:
Ctrl+Enter
- 在当前行上方插入一行
Ctrl+Shift+Enter
光标相关
- 移动到行首: Home
- 移动到行尾: End
- 移动到文件结尾:
Ctrl+End
- 移动到文件开头:
Ctrl+Home
- 移动到定义处: F12
- 定义处缩略图:只看一眼而不跳转过去
Alt+F12
- 移动到后半个括号:
Ctrl+Shift+]
- 选择从光标到行尾:
Shift+End
- 选择从行首到光标处:
Shift+Home
- 删除光标右侧的所有字:
Ctrl+Delete
- 扩展/缩小选取范围:
Shift+Alt+Left
和Shift+Alt+Right
- 多行编辑(列编辑):
Alt+Shift+鼠标左键
,Ctrl+Alt+Down/Up
- 同时选中所有匹配:
Ctrl+Shift+L
Ctrl+D
下一个匹配的也被选中 (在 sublime 中是删除当前行,后面自定义快键键中,设置与Ctrl+Shift+K
互换了)- 回退上一个光标操作:
Ctrl+U
- 选中所有匹配词批量编辑:鼠标高亮选中需要查找的词,按下
Ctrl + Shift + L
键,即可快速选中当前文件中所有匹配的词,并在每一个词后面有一个编辑光标,可批量同步编辑
重构代码
- 找到所有的引用:
Shift+F12
- 同时修改本文件中所有匹配的:
Ctrl+F12
- 重命名:比如要修改一个方法名,可以选中后按
F2
,输入新名字,回车,则所有该方法的引用也都同步更新了 - 跳转到下一个 Error 或 Warning:当有多个错误时可以按
F8
逐个跳转 - 查看 diff: 在 explorer 里选择文件右键
Set file to
compare,然后需要对比的文件上右键选择Compare with file_name_you_chose
查找替换
- 查找
Ctrl+F
- 查找替换
Ctrl+H
- 整个文件夹中查找
Ctrl+Shift+F
显示相关
- 全屏:
F11
- zoomIn/zoomOut:
Ctrl +/-
- 侧边栏显/隐:
Ctrl+B
- 显示资源管理器
Ctrl+Shift+E
- 显示搜索
Ctrl+Shift+F
- 显示 Git
Ctrl+Shift+G
- 显示 Debug
Ctrl+Shift+D
- 显示 Output
Ctrl+Shift+U
其他
- 自动保存:
File -> AutoSave
,或者Ctrl+Shift+P
,输入auto
修改默认快捷键
打开默认键盘快捷方式设置:File -> Preferences -> Keyboard Shortcuts
,或者:Alt+F -> p -> k
修改 keybindings.json
:
// Place your key bindings in this file to overwrite the defaults
[
// ctrl+space 被切换输入法快捷键占用
{
"key": "ctrl+alt+space",
"command": "editor.action.triggerSuggest",
"when": "editorTextFocus"
},
// ctrl+d 删除一行
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
},
// 与删除一行的快捷键互换
{
"key": "ctrl+shift+k",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
// ctrl+shift+/多行注释
{
"key":"ctrl+shift+/",
"command": "editor.action.blockComment",
"when": "editorTextFocus"
},
// 定制与 sublime 相同的大小写转换快捷键
editor.action.transformToLowercase
editor.action.transformToUppercase
{
"key": "ctrl+k ctrl+u",
"command": "editor.action.transformToUppercase"
"when": "editorTextFocus"
},
{
"key": "ctrl+k ctrl+l",
"command": "editor.action.transformToLowercase"
"when": "editorTextFocus"
}
]
前端开发必备插件
- PostCSS Sorting
- stylelint
- stylefmt
- ESLint
- javascript standard format
- beautify
- Babel ES6/ES7
- Debugger for Chrome
- Add jsdoc comments
- javascript(ES6) code snippets
- vue
- weex
- Reactjs code snippets
- React Native Tools
- Npm Intellisense
- Instant Markdown
- Markdown Shortcuts
- TextTransform
问题处理
1、解决VSCode中不断输入git用户名、密码问题
打开终端,在项目位置输入以下命令:
git config --global credential.helper store
然后重启vscode即可解决问题。
VsCode 的使用的更多相关文章
- VSCode添加Sciter脚本Tiscript高亮支持
Sciter中的Tiscript脚本不是标准的Javascript,是对Javascript的扩展.所以在常用的编辑器和IDE上对于高亮的支持很不好. 不过在Sciter论坛中找到了在VSCode上的 ...
- 在linux系统中安装VSCode(Visual Studio Code)
在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网 ...
- 2016年最新mac下vscode配置golang开发环境支持debug
网上目前还找不到完整的mac下golang环境配置支持,本人配置成功,现在整理分享出来. mac最好装下xcode,好像有依赖关系安装Homebrew打开终端窗口, 粘贴脚本执行/usr/bin/ru ...
- 使用vscode访问和修改远程计算机文件
使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate:在本地windows上安装openssh:在vscode中安装扩展remote vscode. 1. 在远程lin ...
- 前端编辑工具之VSCode
因为前段时间看了瞬息之间的一篇文章编辑器背后的程序观, 里面只提到了Visual studio. 我想想可能是因为非.Net开发者,所以不知道Visual sutdio code这个工具.来看看V ...
- 配置VSCode右键菜单
修改注册表,添加鼠标右键 选择文件 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode]@="Ope ...
- 【Git】关于VSCode 内置Git问题
VSCode的内置git是自动关联本机git的, 所以当提交代码时,VSCode提示[警告:请配置git用户名和账户]时, 只需要在git bash 端配置git config --gobal use ...
- [原创]vscode初体验
这段时间,在网上看见很多从.net转java的,为什么会造成这样的情况,我感觉有几点 1. 微软在中国的生态不好,死要钱,很多公司都不想花这部分钱 2. 做.net开发人,工资普遍较低 前言 闲聊 ...
- 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容
问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...
- 用VSCode写python的正确姿势(转载)
最近在学习python,之前一直用notepad++作为编辑器,偶然发现了VScode便被它的颜值吸引.用过之后发现它启动快速,插件丰富,下载安装后几乎不用怎么配置就可以直接使用,而且还支持markd ...
随机推荐
- 函数isNaN() parseFloat() parseInt() Math对象
isNaN() 定义和用法 isNaN() 函数用于检查其参数是否是非数字值. isNaN(x) x 是特殊的非数字值 NaN(或者能被转换为这样的值) console.log(isNaN(NaN)) ...
- Android SD卡读写
package com.jredu.zuiyou.activity; import android.os.Bundle;import android.os.Environment;import and ...
- C#容器类,性能介绍
http://www.php.cn/csharp-article-354819.html 1 indexer []声明的变量必须是固定长度的,即长度是静态的:object[] objectArray ...
- antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...
- iOS开发必会的坐标系探究
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由落影发表于云+社区专栏 前言 app在渲染视图时,需要在坐标系中指定绘制区域. 这个概念看似乎简单,事实并非如此. When an a ...
- JavaWeb学习 (十五)————JSP指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
- 公众号第三方平台开发 教程六 代公众号使用JS SDK说明
公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...
- swiper下滑分页,减少swiper-slide项的时候会出现空白
修改子项后,先重置当前的页,调用 swiper.slideTo(0); 滚动到初始位置 再调用 swiper.update(); 更新一系列设置就可以了.
- openCV 调用摄像头
OpenCV调用摄像头 环境 python:python3.6 摄像头:网络摄像头 Python库:openCV # -*- coding: utf-8 -*- # @author leone # @ ...
- Docker 安装MySQL5.7(三)
Docker 安装MySQL5.7 1.搜索docker镜像(可以看到搜索的结果,这个结果是按照一定的星级评价规则排序的) docker search mysql 2.拉取docker的mysql镜像 ...