跳至主要內容

vscode操作备忘笔记

丁毅桂大约 8 分钟工具笔记vscode

vscode操作备忘笔记

面板

  1. 命令面板是vscode快捷键的主要交互界面，可以使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打开。

在命令面板中你可以输入命令进行搜索(中英文都可以)，然后执行。
命名面板中可以执行各种命令，包括编辑器自带的功能和插件提供的功能。
所以一定要记住它的快捷键Cmd+Shift+P

  1. 搜索面板CTRL+E、R、P 打开文件或切换工作目录

注释

  • 注释选中行 ctrl+/
  • 注释选中代码块 alt + shift + a

代码格式化

  • 对选中代码格式化 ？？？？？？？
  • 对整个文件格式化 ctrl + shift + f 苹果：Option+Shift+F

代码缩进

  • 对个文档进行缩进调节，使用Cmd+Shift+P打开命令面板，输入缩进,然后选择相应的命令
  • 对选中代码缩进调节：ctrl+] ctrl+[ 苹果：Cmd+] Cmd+[

一些小技巧

  • 调整选中代码的大小写 选中后在命令面板输入转化为大写或者转化为小写的中文或英文
  • 合并代码行，多行代码合并为一行，Cmd+J(win下未绑定
  • 对选中的代码行排序 调出命令面板，输入按升序排序或者按降序排序

光标操作

  • 基础
    1. 以单词为单位移动光标：windows中：CTRL+左右方向键
    2. 鼠标滚轮效果：windows中：CTRL+上下方向键
    3. 移动到行首 windows中：Home键 苹果中：Cmd+左方向键
    4. 移动到行尾 windows中：end键 苹果中：Cmd+右方向键
    5. 移动到文档的开头和末尾 windows中： Ctrl+Home/End 苹果中：Cmd+上下方向键
  • 进阶
    1. 回到上一个光标的位置，win Ctrl+U(mac：Cmd+U)
    2. 在不同的文件之间回到上一个光标的位置 win Ctrl+shift+U
  • 文本选择
    1. 在光标移动的时候多按一个shift键就可以选中文本
    2. 选中单词 Cmd+D
  • 删除
    1. 选中代码之后再按删除
    2. 删除当前行Ctrl+Shift+K Cmd+Shift+K
  • 代码移动
    1. 剪切移动Alt+上下 苹果：Option+上下方向键
    2. 复制移动Alt+shift+上下 苹果：Option+Shift+上下

多光标特性

使用鼠标：按住Option(win Alt),然后用鼠标点，鼠标点在哪里哪里就会出现一个光标
注意：有的mac电脑上是按住Cmd，然后用鼠标点才可以

选中单词

Cmd+D (win Ctrl+D) 第一次按下时，它会选中光标附近的单词；第二次按下时，它会找到这个单词第二次出现的位置，创建一个新的光标，并且选中它。(注：cmd-k cmd-d 跳过当前的选择)

在每行末尾添加光标

首先你要选中多行代码，然后按Alt+Shift+i(苹果：Option+Shift+i),这样做的结果是：每一行后面都会多出来一个光标 Option+Shift+i

撤销多光标

使用Esc 或鼠标点击一下

快速打开文件

Cmd+P （win Ctrl+P）输入你要打开的文件名,回车打开

这里有个小技巧，选中你要打开的文件后，按Cmd+Enter,就会在一个新的编辑器窗口打开

在tab不同的文件间切换

Windows：？？？ 苹果：cmd+shift+[]

行跳转

假如浏览器报了个错，错误在53行，如何快速跳转到53行
Ctrl+g 输入行号

文件行跳转

如果你想跳转到某个文件的某一行，你只需要先按下 “Cmd + P”，输入文件名，然后在这之后加上 “:”和指定行号即可。

符号跳转

符号可以是文件名、函数名，可以是css的类名
Cmd+Shift+O(win Ctrl+Shift+o) 输入你要跳转的符号，回车进行跳转

win下输入Ctrl+T，可以在不同文件的符号间进行搜索跳转

定义(definition)和实现(implementation)处

f12跳到函数的定义处
Cmd+f12(win Ctrl+f12)跳转到函数的实现处

引用跳转

很多时候，除了要知道一个函数或者类的定义和实现以外，你可能还希望知道它们被谁引用了，以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面，然后按下 Shift + F12，VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里，你选中某个引用，VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

代码重构

当我们想修改一个函数或者变量的名字时候，我们只需把光标放到函数或者变量名上，然后按下 F2，这样这个函数或者变量出现的地方就都会被修改。

一些插件

  1. 万能语言运行环境 （Code Runner）：

如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言。
支持的语言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。

  1. 快速注释（ Document This）：优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，而且注释也应该有一套标准的注释方法，特别对于 JavaScript 这种语言。Document This 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。Document This目前仅支持JavaScript和TypeScript。

  2. CSS 类名智能提示（HTML CSS Support）：它会提示一些类名供你选择。

  3. 代码拼写检查（Code Spell Checker）：此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。如果单词有错下面就会出现波浪线。

  4. 备忘插件（TODO Highlight）：在很多的其他代码编辑器中都有 TODO 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 TODO 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，TODO 就变得更加有用，因为有时候 TODO 可能有几十个，帮助你标注那些功能需要继续实现或优化。

  5. 自动重命名标签（Auto Rename Tag）：这个插件对你的标签修改起来一个很大的作用，当你修改起始标签的时候，结束标签也会随着起始标签的修改而修改

  6. html模板（HTML Boilerplate）：就是一个很标准html5的模板插件，兼容新老版浏览器。

  7. 代码格式化（Prettier - Code formatter）

  8. 颜色提示（Color Info）

  9. 自动闭合标签（Auto Close Tag）：安装了这个插件后，如果你的起始标签不小心删除的结束标签，只要打 </ 就会自动补全，根据就近原则，一次只能补全一个标签。

预定义变量列表

  • ${workspaceFolder} -在 VS Code 中打开的文件夹的路径
  • ${workspaceFolderBasename} -在 VS Code 中打开的文件夹名称，不带任何斜杠（/）
  • ${file} -当前打开的文件
  • ${relativeFile} -当前相对于打开的文件 workspaceFolder
  • ${relativeFileDirname} -当前打开文件的目录名，相对于 workspaceFolder
  • ${fileBasename} -当前打开的文件的基本名称
  • ${fileBasenameNoExtension} -当前打开的文件的基本名称，没有文件扩展名
  • ${fileDirname} -当前打开的文件的目录名
  • ${fileExtname} -当前打开的文件的扩展名
  • ${cwd} -启动时任务运行器的当前工作目录
  • ${lineNumber} -活动文件中当前选择的行号
  • ${selectedText} -活动文件中的当前选定文本
  • ${execPath} -正在运行的 VS Code 可执行文件的路径
  • ${defaultBuildTask} -默认构建任务的名称

预定义变量的例子

vscode 的当前状态

描述路径
当前打开工作区的路径。/home/your-username/your-project
当前编辑器打开的文件路径。/home/your-username/your-project/folder/file.ext

预定义变量值列表

变量值
${workspaceFolder}/home/your-username/your-project
${workspaceFolderBasename}your-project
${file}/home/your-username/your-project/folder/file.ext
${relativeFile}folder/file.ext
${relativeFileDirname}folder
${fileBasename}file.ext
${fileBasenameNoExtension}file
${fileDirname}/home/your-username/your-project/folder
${fileExtname}.ext
${lineNumber}光标的行号
${selectedText}在代码编辑器中选择的文本
${execPath}Code.exe 的位置
贡献者: YiguiDing
MIT Licensed | Copyright © 2019-present Yigui-Ding