VSCode Tutorial, Quick Reference and Extensions

1111-11-11
OTH

使用技巧

  • 关注VS Code的更新文档
  • 关注扩展市场,活用扩展增加工作效率
  • 仔细查看官方文档
  • 记忆并使用快捷键(Ctrl-K Crtl+S查看快捷键列表)
  • VS Code对Git的支持非常好,配合插件开发体验极佳

插件

  • 美化
    • Material Theme: 高对比度主题
    • Background: 背景美化
  • 通用

  • Auto Rename Tag: 标签自动重命名
  • Auto Close Tag: 自动生成闭合标签
  • Prettier Formatter: 代码格式化插件。(F1输入form格式化代码。)
  • TODO Highlight: TODO高亮插件
  • VSCode Icons: 文件目录ico图标 
  • Deploy: 项目自动部署,文件同步。
  • Dash: 快速打开Zeal(Linux, Windows)或Dash(MacOs)的语言文档资料。(需要安装Zeal或者Dash。)
  • Path Intellisense: 文件路径感知扩展
  • Project Manager: 多项目管理
  • Bracket Pair Colorizer :括号呈现不同的颜色
  • Settings Sync: 同步多台电脑的设置(官方教程
  • Polacode: 将代码生成图片
  • Emacs Friendly Keymap: Emacs键位模拟器
  • Bookmark: 标记、寻找代码块
  • Todo Tree: 快速搜索、显示全局TODO

Writing

  • Latex: Boost LaTeX typesetting efficiency with preview, compile, autocomplete, colorize, and more.
  • Markdown PDF: This extension convert Markdown file to pdf, html, png or jpeg file.
  • vscode-pdf: 在VSC中显示pdf文件。

HTML

  • Color Highlight: 颜色预览
  • HTML CSS Support: 增加.html中css的代码补全,可以手动增加配置文件来增加外部css中的class补全。详情见插件说明。
  • Debugger for Chrome:方便js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,需要配置launch.json,详情见插件说明。
  • Color Picker: 可以直接在编辑器里打开色板,选择各种模式的颜色。

Git

  • Git History: 输入 git log有惊喜。
  • Git Lens: 加强 Vs Code 本身的

Python

  • Python (by Microsoft): 支持使用pylint分析代码,debug,IntelliSense,代码迁移,代码重构,单元测试,Python Snippets。(需要使用pip安装pylint)
  • Python Docstring: 快速生成docstring。
  • Better Comments: 生成更易读的注释。也可将注解分为:Alert, Query, TODO, Highlight四类。
  • Trailing Spaces: 将尾部的空格高亮显示,并且可以一键删除。

Javascript

  • Document This: 注释自动生成
    双击 Ctrl+Alt+D

基本操作

  1. 入门
  2. 自定义
  3. 扩展
  4. 文件/文件夹管理
  5. 编辑技巧
  6. 智能感应功能
  7. 代码片段
  8. Git集成
  9. 调试
  10. 任务运行

下文提及的快捷键可能与机器最新设置不符,请参考官方快捷键说明。

1.入门

打开命令面板

轻松找出VS Code所有可用命令。

  • Mac:cmd+shift+p or f1
  • Windows / Linux:ctrl+shift+p or f1

快捷键偏好设置

所有命令(及其快捷键)均显示在命令面板中。如果忘记了如何操作,可随时查看。

快速打开

快速打开文件,或运行命令(见下文)。快速打开的文件必须处在已打开的文件夹或者Workspace中。

Mac: cmd+p

Windows / Linux: ctrl+p

键入“?”获取帮助。

将命令复制粘贴到快速打开中

键入cmd+p ,然后粘贴想要运行的命令,浏览扩展(插件)市场时尤为适用。

命令行参数

  • Linux: Follow instructions here.
  • Windows: Follow instructions here.
  • Mac: see below.

Linux指南和Windows指南参考:code.visualstudio.com/d

Mac指南见下文:

打开命令面板(F1)→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# see help options
code --help

.vscode文件夹

工作区文件夹在 .vscode 中,比如任务运行是 tasks.json,检查漏洞是 launch.json

状态栏效果

  • 错误和警告
  • Mac: shift+cmd+m* Windows / Linux: ctrl+shift+m

快速跳转到错误和警告。

f8shift+f8,循环错误检查。

更新扩展

更新扩展提示会出现在左下角状态栏。

更改语言模式

  • Mac: cmd+k m
  • Windows / Linux: ctrl+k m ![](https://pic4.zhimg.com/v2-9a9d769b4babd4d960f85ed020addcf5_b.gif)

2. 个人设置

这一部分个人发挥的空间很大,完整信息请参考:code.visualstudio.com/d

设置编辑器

打开settings.json。

  • Mac: cmd+,
  • Windows / Linux: File -> Preferences -> User Settings

更改字体大小:”editor.fontSize”: 18

更改标签大小:”editor.tabSize”: 4

空格/标签:”editor.insertSpaces”: true

忽略文件/文件夹

清除编辑窗口中的文件/文件夹。

"files.exclude": {
"somefolder/": true,
"somefile": true
}

清除搜索结果中的文件/文件夹。

"search.exclude": {
"someFolder/": true,
"somefile": true
}

更多内容请参考:code.visualstudio.com/d

预览主题

JSON验证

"json.schemas": [
{
"fileMatch": [
"/bower.json"
],
"url": "http://json.schemastore.org/bower"
}
]

对于工作区中的模式:

"json.schemas": [
{
"fileMatch": [
"/foo.json"
],
"url": "./myschema.json"
}
]

自定义模式:

"json.schemas": [
{
"fileMatch": [
"/.myconfig"
],
"schema": {
"type": "object",
"properties": {
"name" : {
"type": "string",
"description": "The name of the entry"
}
}
}
},

更多内容请参考:code.visualstudio.com/d

3.扩展

贡献点

参考:code.visualstudio.com/d

  • 配置
  • 命令
  • 快捷键
  • 语言
  • 调试器
  • 语法
  • 主题
  • 代码片段
  • json验证

找到扩展

  1. 官方VS Code市场;
  2. 搜索产品(见下文);
  3. 浏览扩展推荐(见下文);
  4. 社区扩展产品,如awesome-vscode

安装扩展

Mac:cmd+shift+p

Windows / Linux:ctrl+shift+p

然后键入“ext install”。选择合适的扩展,再按回车键。

扩展推荐

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

键入“ext”→选择“Show Extension Recommendations”

卸载扩展

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

4.文件和文件夹管理

OS X布局

使用任务控制,将终端窗口和VS Code放在同一个屏幕上,就得到一个整合的终端啦!

自动保存

cmd+,打开settings.json

files.autoSave": "afterDelay"

开启侧边栏

  • Mac: cmd+b
  • Windows / Linux: ctrl+b

分割(Side by side)编辑

  • Mac: cmd+\ or cmd then click a file from the file browser.
  • Windows / Linux: ctrl+\* Linux: ctrl+2

编辑器切换

  • Mac: cmd+1, cmd+2, cmd+3
  • Windows / Linux: ctrl+1, ctrl+2, ctrl+3

切换到资源管理器窗口(explorer window)

  • Mac: cmd+shift+e
  • Windows / Linux: ctrl+shift+e

关闭当前文件夹

  • Linux: ctrl+k f

历史

ctrl+tab来浏览历史

向后浏览:

  • Mac: ctrl+-
  • Windows / Linux: alt+left

向前浏览:

  • Mac: ctrl+shift+up
  • Windows / Linux: alt+right

打开文件

  • Mac: cmd+e or cmd+p
  • Windows / Linux: ctrl+e or ctrl+p

文件关联

为无法精确检测的文件设置语言关联(即配置文件):

"file.associations": {
".eslintrc": "json"
}

5.编辑技巧

括号匹配

更多内容请参考:code.visualstudio.com/d

  • Mac: cmd+shift+\
  • Windows / Linux: ctrl+shift+\

多游标选择

更多内容请参考:code.visualstudio.com/d

  • Mac: opt+cmd+up or opt+cmd+down
  • Windows: ctrl+alt+up or ctrl+alt+down
  • Linux: alt+shift+up or alt+shift+down

为当前选择添加游标。

复制一行

  • Mac: opt+shift+up or opt+shift+down
  • Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up

缩小/扩大选择

更多内容请参考:code.visualstudio.com/d

  • Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right
  • Windows / Linux: shift+alt+left or shift+alt+right

n></figure>

符号查找

  • Mac: cmd+shift+o
  • Windows / Linux: ctrl+shift+o

定位特定的一行

  • Mac: ctrl+g or cmd+p , :* Windows / Linux: ctrl+g

撤销游标位置

  • Mac: cmd+u
  • Windows / Linux: ctrl+u

>

上下移动一行

  • Mac: opt+up or opt+down
  • Windows / Linux: alt+up or alt+down

修整行尾空格

  • Mac: cmd+shift+x
  • Windows / Linux: ctrl+shift+x

代码格式化

  • Mac: opt+shift+f
  • Windows / Linux: shift+alt+f

代码折叠

  • Mac: shift+cmd+[ and shift+cmd+]
  • Windows / Linux: ctrl+shift+[ and ctrl+shift+]

选择当前一行

  • Mac: cmd+i
  • Windows / Linux: ctrl+i

回到文件开端/末尾

  • Mac: cmd+up and cmd+down
  • Windows: ctrl+up and ctrl+down
  • Linux: ctrl+home and ctrl+end

打开README预览

在markdown文件中使用:

  • Mac: shift+cmd+v
  • Windows / Linux: ctrl+shift+v

分割(Side by Side)Markdown编辑和预览

在markdown文件中使用:

  • Linux: ctrl+k v

6.智能感应

试用ctrl+space来启动建议栏,这一条可以说是最有用的建议了。

可浏览可用的方法、参数以及简短文档等等。

预览(peek)

选择一个符号,键入alt+f12,或者使用快捷菜单。

转到定义

选择一个符号,键入f12,或者使用快捷菜单。

查找所有引用

选择一个符号,键入shift+f12,或者使用快捷菜单。

符号重命名

选择一个符号,键入f2,或者使用快捷菜单。

jsconfig.json

javascript 源文件根上配置 jsconfig.json,就可以使用 **ES6 **了。 ‵‵`json { “compilerOptions”: { “target”: “ES6”, “module”: “commonjs” }, “exclude”: [ “npm_modules” ] }


**.eslintrc.json**

安装[eslint extension](https://link.zhihu.com/?target=https%3A//marketplace.visualstudio.com/items%3FitemName%3Ddbaeumer.vscode-eslint)。按照个人喜好配置。具体说明参考:[<span class="invisible">http://</span><span class="visible">eslint.org/docs/user-gu</span><span class="invisible">ide/configuring</span><span class="ellipsis"></span>](https://link.zhihu.com/?target=http%3A//eslint.org/docs/user-guide/configuring)

以下是使用es6的配置。

```json
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "classes": true,
            "defaultParams": true
        }
    },
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-undef": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1
    }
}

package.json

参考package.json文件中的智能感应功能。

安装typings应用

安装typings来引进.d.ts文件来激活javascript智能感应功能。

npm install typings --global

# Search for definitions.
typings search tape

# Find an available definition (by name).
typings search --name react

# Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`).
typings install react --ambient --save

install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

Emmet语法

Emmet语法支持

7.代码片段

创建自定义代码

File -> Preferences -> User Snippets,选择语言,创建代码片段。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "   render() {",
        "       return ($2);",
        "   }",
        "",
        "}"
    ]
},

更多内容请参考:code.visualstudio.com/d

8.Git集成

Git工作流的流畅集成。

Diffs

点击Git图标,选择要diff的文件。

分割(Side by side)

默认的是分割diff。 内联视图

点击下图所示的“more”选项来启动内联视图。

分支

通过状态栏可轻松切换分支。

Staging

  • Stage所有文件

一次选择多个文件,再点击加号按钮。

  • Stage选择

Stage文件一部分的方法是:使用箭头选择该文件,然后点击“more”按钮来stage“selected lines”。

撤销最近一次命令

查看Git输出

有时难免需要了解工具的运行状况。有了VS Code,查看正在运行的命令更简单,这对于Git学习或是解决源代码管理问题尤为有帮助。

Mac: shift+cmd+u

Windows / Linux: ctrl+shift+u

运行toggleOutput要下拉选择Git。

边槽指示器

查看编辑器中的diff设置。更多内容请参考:code.visualstudio.com/d

消除合并冲突

在合并时点击git图标,在diff view里做更改。

将VS Code设置为默认合并工具

`git config --global merge.tool code
`

9.调试

配置调试器

点击F1,选择“Debug: Open Launch.json”,再选择环境,随后产生一个launch.json文件。Node.js等环境可以直接运行,可能需要额外配置其他语言。更多内容请参考:code.visualstudio.com/d

断点和逐句通过

断点应在行数旁边。用调试插件向前浏览。

数据检查

检查变量在调试面板和控制台里。

10.任务运行

自动检测任务

按下f1,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:code.visualstudio.com/d

{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "install",
            "args": ["install"]
        },
        {
            "taskName": "build",
            "args": ["run", "build"]
        }
    ]
}

自动生成有时会出问题。参考上文的网址来了解正确操作方法。

在命令面板上运行任务

点击f1,运行命令“Run Task”,然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。

转自:https://zhuanlan.zhihu.com/p/34989844

快捷键列表

按 Press 功能 Function
Ctrl + Shift + P,F1 显示命令面板 Show Command Palette
Ctrl + P 快速打开 Quick Open
Ctrl + Shift + N 新窗口/实例 New window/instance
Ctrl + Shift + W 关闭窗口/实例 Close window/instance

基础编辑 Basic editing

按 Press 功能 Function
Ctrl+X 剪切行(空选定) Cut line (empty selection)
Ctrl+C 复制行(空选定)Copy line (empty selection)
Alt+ ↑ / ↓ 向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑ 向上/向下复制行 Copy line up/down
Ctrl+Shift+K 删除行 Delete line
Ctrl+Enter 在下面插入行 Insert line below
Ctrl+Shift+Enter 在上面插入行 Insert line above
Ctrl+Shift+\ 跳到匹配的括号 Jump to matching bracket
Ctrl+] / [ 缩进/缩进行 Indent/outdent line
Home 转到行首 Go to beginning of line
End 转到行尾 Go to end of line
Ctrl+Home 转到文件开头 Go to beginning of file
Ctrl+End 转到文件末尾 Go to end of file
Ctrl+↑ / ↓ 向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[ 折叠(折叠)区域 Fold (collapse) region
Ctrl+Shift+] 展开(未折叠)区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[ 折叠(未折叠)所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+] 展开(未折叠)所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0 折叠(折叠)所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J 展开(未折叠)所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C 添加行注释 Add line comment
Ctrl+K Ctrl+U 删除行注释 Remove line comment
Ctrl+/ 切换行注释 Toggle line comment
Shift+Alt+A 切换块注释 Toggle block comment
Alt+Z 切换换行 Toggle word wrap

导航 Navigation

按 Press 功能 Function
Ctrl + T 显示所有符号 Show all Symbols
Ctrl + G 转到行… Go to Line…
Ctrl + P 转到文件… Go to File…
Ctrl + Shift + O 转到符号… Go to Symbol…
Ctrl + Shift + M 显示问题面板 Show Problems panel
F8 转到下一个错误或警告 Go to next error or warning
Shift + F8 转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab 导航编辑器组历史记录 Navigate editor group history
Alt + ←/→ 返回/前进 Go back / forward
Ctrl + M 切换选项卡移动焦点 Toggle Tab moves focus

搜索和替换 Search and replace

按 Press 功能 Function
Ctrl + F 查找 Find
Ctrl + H 替换 Replace
F3 / Shift + F3 查找下一个/上一个 Find next/previous
Alt + Enter 选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D 将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D 将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W 切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

多光标和选择 Multi-cursor and selection

按 Press 功能 Function
Alt +单击 插入光标 Insert cursor
Ctrl + Alt +↑/↓ 在上/下插入光标 Insert cursor above / below
Ctrl + U 撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I 在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I 选择当前行 Select current line
Ctrl + Shift + L 选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2 选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + → 展开选择 Expand selection
Shift + Alt + ← 缩小选择 Shrink selection
Shift + Alt + (拖动鼠标) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt +(箭头键) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown 列(框)选择页上/下 Column (box) selection page up/down

丰富的语言编辑 Rich languages editing

按 Press 功能 Function
Ctrl + 空格 触发建议 Trigger suggestion
Ctrl + Shift + Space 触发器参数提示 Trigger parameter hints
Tab Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F 格式化文档 Format document
Ctrl + K Ctrl + F 格式选定区域 Format selection
F12 转到定义 Go to Definition
Alt + F12 Peek定义 Peek Definition
Ctrl + K F12 打开定义到边 Open Definition to the side
Ctrl + . 快速解决 Quick Fix
Shift + F12 显示引用 Show References
F2 重命名符号 Rename Symbol
Ctrl + Shift + . /, 替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X 修剪尾随空格 Trim trailing whitespace
Ctrl + K M 更改文件语言 Change file language

编辑器管理 Editor management

按 Press 功能 Function
Ctrl+F4, Ctrl+W 关闭编辑器 Close editor
Ctrl+K F 关闭文件夹 Close folder
Ctrl+\ 拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3 聚焦到第1,第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→ 聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown 向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / → 移动活动编辑器组 Move active editor group

文件管理 File management

按 Press 功能 Function
Ctrl+N 新文件 New File
Ctrl+O 打开文件… Open File…
Ctrl+S 保存 Save
Ctrl+Shift+S 另存为… Save As…
Ctrl+K S 全部保存 Save All
Ctrl+F4 关闭 Close
Ctrl+K Ctrl+W 关闭所有 Close All
Ctrl+Shift+T 重新打开关闭的编辑器 Reopen closed editor
Ctrl+K 输入保持打开 Enter Keep Open
Ctrl+Tab 打开下一个 Open next
Ctrl+Shift+Tab 打开上一个 Open previous
Ctrl+K P 复制活动文件的路径 Copy path of active file
Ctrl+K R 显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O 显示新窗口/实例中的活动文件 Show active file in new window/instance

显示 Display

按 Press 功能 Function
F11 切换全屏 Toggle full screen
Shift+Alt+1 切换编辑器布局 Toggle editor layout
Ctrl+ = / - 放大/缩小 Zoom in/out
Ctrl+B 切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E 显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F 显示搜索 Show Search
Ctrl+Shift+G 显示Git Show Git
Ctrl+Shift+D 显示调试 Show Debug
Ctrl+Shift+X 显示扩展 Show Extensions
Ctrl+Shift+H 替换文件 Replace in files
Ctrl+Shift+J 切换搜索详细信息 Toggle Search details
Ctrl+Shift+C 打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U 显示输出面板 Show Output panel
Ctrl+Shift+V 切换Markdown预览 Toggle Markdown preview
Ctrl+K V 从旁边打开Markdown预览 Open Markdown preview to the side

调试 Debug

按 Press 功能 Function
F9 切换断点 Toggle breakpoint
F5 开始/继续 Start/Continue
Shift+F5 停止 Stop
F11 / Shift+F11 下一步/上一步 Step into/out
F10 跳过 Step over
Ctrl+K Ctrl+I 显示悬停 Show hover

集成终端 Integrated terminal

按 Press 功能 Function
Ctrl+` 显示集成终端 Show integrated terminal
Ctrl+Shift+` 创建新终端 Create new terminal
Ctrl+Shift+C 复制选定 Copy selection
Ctrl+Shift+V 粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓ 向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End 滚动到顶部/底部 Scroll to top/bottom

Comments

CONTENT