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

Blog链接:打造性感好用的VS Code编辑器

主命令框

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
  • 同时打开多个编辑器(查看多个文件)
  • 切出一个新的编辑器(最多 3 个) Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
  • 左中右 3 个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
  • 编辑器换位置, Ctrl+k然后按 Left或 Right

代码编辑

格式调整

对python文件进行代码格式化操作时,会提示安装autopep8

  • 代码格式化Shift+Alt+F,或 Ctrl+Shift+P 后输入 format code
  • 代码行缩进: Ctrl+[Ctrl+]

  • 在当前行下边插入一行 Ctrl+Enter
  • 在当前行上方插入一行 Ctrl+Shift+Enter

  • 上下移动一行: Alt+UpAlt+Down
  • 向上向下复制一行: Shift+Alt+UpShift+Alt+Down

光标相关

  • 移动到定义处F12
  • 定义处缩略图:只看一眼而不跳转过去:Alt+F12

  • 移动到文件结尾: Ctrl+End
  • 移动到文件开头: Ctrl+Home

下面两个功能和alt+↑/↓配合,很方便的移动代码块:

  • 选择从光标到行尾: Shift+End
  • 选择从行首到光标处: Shift+Home

这两个功能很爽,可以同时编辑一些变量名:

  • 多行编辑(列编辑):Ctrl+Alt+Down/Up或者Alt+Shift+鼠标左键
  • 同时选中所有匹配: Ctrl+Shift+L
  • Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行,后面自定义快键键中,设置与 Ctrl+Shift+K 互换了)

  • 回退上一个光标操作: Ctrl+U

  • 删除光标右侧的所有字: Ctrl+Delete

  • 扩展/缩小选取范围: Shift+Alt+Left 和 Shift+Alt+Right

  • 移动到后半个括号: Ctrl+Shift+]

重构代码

查看函数引用和批量休修改函数名,好用:

  • 重命名:比如要修改一个方法名,可以选中后按 F2,输入新的名字,回车,会发现所有的文件都修改了
  • 找到所有的引用: Shift+F12
  • 同时修改本文件中所有匹配的: Ctrl+F12
  • 跳转到下一个 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

VS Code 中文注释显示乱码怎么办?

https://www.zhihu.com/question/34415763/answer/60444047

将设置中的"files.autoGuessEncoding"项的值改为true即可。

我的配置

{
"workbench.iconTheme": "vscode-icons",
"files.autoSave": "onWindowChange",
// 设置保存时,自动将Python代码的一些空格给trim掉;
"files.trimTrailingWhitespace": true,
// 将一些编译后而不想在编辑器里看到的文件隐藏;
"files.exclude": {
".vs*": true,
"*.*~": true,
"*.pyc": true,
"*/*.pyc": true
},
"terminal.integrated.rendererType": "dom",
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"python.formatting.autopep8Args": [
"--max-line-length=100"
],
"editor.formatOnSave": true,
"python.linting.pylintEnabled": true,
"python.linting.pylintArgs": [
"--include-naming-hint=n",
"--disable=W0311",
"--disable=C0103",
"--disable=E1101"
],
"files.eol": "\n",
"editor.wordWrap": "on"
}

常用扩展

VS Code扩展商店:https://marketplace.visualstudio.com/vscode

主题

可以来主题商城选择:

切换主题的快捷键:ctrl+k,ctrl+t

  • One Dark Pro
  • Atom One Dark
  • FlatUI
  • Material Icon Theme: 图标主题
  • vscode-icons
  • VSCode Great Icons
  • Dracula Official:主题,推荐
  • bookmarksctrl+alt+l快速跳转,图标设置

开发扩展

  • AutoFileNmae:auto complete file name,自动补全文件的名字
  • code runner:ctrl+alt+n
  • Guides:显示代码对其辅助线
  • gitlens:显示代码每一行的最新修改人
  • Beautify:显示js/json/css美化,按F1
  • Prettier - Code formatter
  • Path Intellisense: 路径匹配
  • Auto Rename Tag:自动修改标签
  • Color Highlight:写csss时,颜色值会增加对应的颜色背景显示
  • Bookmarks:选中行,插入书签,ctrl+alt+l 书签跳转;
  • Vetur:VUE扩展
  • open in browser:alt+b选择浏览器预览文件
  • Rainbow Brackets:有颜色的显示括号匹配
  • Settings Sync: 同步配置

下面介绍一下怎么设置同步:

ctrl+shift+p,输入sync,会看到相关选项,选择update/upload settings,然后会输入https://github.com/settings/tokens中设置的key。具体的用法,Settings Sync的扩展主页介绍的很详细了:https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

FAQ

如何设置中文界面

参考

打造性感好用的 VS Code 编辑器的更多相关文章

  1. VS Code 编辑器

    使用VS Code 编辑器有一段时间了,感觉非常好用,已经成为了我的第一选择了.现在需要学习了一下了. 1,更改编辑器的默认设置 文件 =>首选项 => 设置 或 ctrl + ,(逗号) ...

  2. “改造” VS Code 编辑器,一起写个插件吧!

    作者:HelloGitHub-小夏(首发于 HelloGitHub 公众号) 作为一个靠代码作为"生计"的开发者,bug 写的好不好,编辑器真的很重要!那么 Visual Stud ...

  3. 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  4. VS Code编辑器插件整理及配置设定

    语言包: Chinese -- VS Code的汉化包 格式化+代码补全: ESLint -- Integrates ESLint Vetur -- A vue tooling Prettier -- ...

  5. visual studio code 编辑器的配置及快捷键等, vscode, csc

    visual studio code (vsc) 对开发node.js,javascript,python,html,golang等比较友好,同时支持git浏览及分屏对比,运行速度快,所以是值得一用的 ...

  6. ubuntu14.04 LTS Visual Studio Code 编辑器推荐

    除了ubuntu geany (茶壶图标) 这个一直爱好的编辑器,发现一个新的编辑器“Visual Studio Code”,也是很好用,记录下 https://code.visualstudio.c ...

  7. 吐槽下微软的vs code编辑器

    缺点:不能同时打开多个文件夹(打开多个文件夹得先ctrl+shift+N窗口或者除非你的所有项目文件都在同一个文件夹目录下) 优点是支持用户设置以及提供很多插件 // 将设置放入此文件中以覆盖默认设置 ...

  8. vs code编辑器格式化react jsx插件

    vs code格式化jsx比较适合的插件是react-beautify: 格式化中遇到的问题是indent几格,这个问题的解决是你在space里设置几格这个插件就会自动格式化出几格.

  9. vs code编辑器

    1.vs code配置 { "editor.tabSize": 2, "workbench.startupEditor": "newUntitledF ...

随机推荐

  1. JS中常用的输出方式(五种)

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  2. 认识ZTree

    ZTree基本知识 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 一.最简单的树(标准的json数据): 1.set ...

  3. CSS选择符-----关系选择符

       包含选择符(E F)           选择所有被E元素包含的F元素 与 子选择符(E>F) 不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子... <! ...

  4. 【Redis学习之六】Redis数据类型:集合和有序集合

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-2.8.18 一.集合 Set无序的.去重的元素 ...

  5. 2.scrapy安装

    A.Anaconda如果已安装,那么可以通过 conda 命令安装 Scrapy,安装命令如下: conda install Scrapy   ============================ ...

  6. log4j日志输出使用_1

    转自https://www.cnblogs.com/sky230/p/5759831.html Log4j是帮助开发人员进行日志输出管理的API类库.它最重要的特点就可以配置文件灵活的设置日志信息的优 ...

  7. linux常用命令:rm 命令

    昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所 ...

  8. HashMap集合存储自定义类

    第一种情况,key为String,value为自定义类person类: 输出结果,key重复的被去掉了,key重复的那个value值之前的被最后一个覆盖了: 第二种情况,key为自定义类person类 ...

  9. Codeforces 937A - Olympiad

    A. Olympiad 题目链接:http://codeforces.com/problemset/problem/937/A time limit per test 1 second memory ...

  10. Python+OpenCV图像处理(十)—— 图像二值化

    简介:图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果的过程. 一.普通图像二值化 代码如下: import cv2 as cv import numpy ...