官网: 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+Up 或 Alt+Down
  • 向上向下复制一行: Shift+Alt+Up 或 Shift+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:主题,推荐
  • bookmarks:ctrl+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. aop编程之后置通知,环绕通知和异常通知

    ---恢复内容开始--- 此将实例将在上一讲前置通知的基础上进行配置,前置配置内容:http://www.cnblogs.com/lihuibin/p/7955947.html  具体流程如下: 1. ...

  2. Usefull Resources

    Sql Server Profiler 1. http://www.cnblogs.com/Fooo/archive/2013/02/19/2916789.html 2. http://5439255 ...

  3. 《大话设计模式》c++实现 原型模式

    意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 主要解决:在运行期建立和删除原型. 何时使用: 1.当一个系统应该独立于它的产品创建,构成和表示时. 2.当要实例化的类是在运行 ...

  4. 20155228 2016-2017-2 《Java程序设计》第10周学习总结

    20155228 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络 网络是能够波此通信的计算机的集合根据范}到的宽度,网络可以分为局域网和广域网.LAN ...

  5. flask 使用宏渲染表单(包含错误信息)

    在模板中渲染表单时,有大量的工作: 1.调用字段属性,获取<input>定义 2.调用对应的label属性,获取<label>定义 3.渲染错误消息 为了避免为每一个字段重复这 ...

  6. python迭代器以及生成器

    迭代器iter():节省内存 Iter()迭代器 每一次输出下一个值 >>> a=iter(range(10)) >>> a.next() 0 >>&g ...

  7. Linux基础命令---检查密码文件pwck

    pwck 检查用户密码文件“/etc/passwd”和“/etc/shadow”的完整性,将验证结果送到标砖输出.提示用户删除格式不正确或有其他不可更正错误的条目.检查以验证每个条目是否具有:正确的字 ...

  8. Poj3253 Fence Repair (优先队列)

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 67319   Accepted: 22142 De ...

  9. vue2+animate.css

    下载animate.css并引入项目, import './css/animate.css'使用: <template> <div class="box"> ...

  10. nfs共享文件搭建

    Linux NFS服务器的安装与配置详解 一.NFS服务简介  NFS是Network  File System(网络文件系统).主要功能是通过网络让不同的服务器之间可以共享文件或者目录.NFS客户端 ...