前言

本文档用于记录vscode的使用技巧，持续更新中

快捷键

搜索文本

搜索当前文件

Windows: Ctrl + F Mac: Command + F

搜索所有文件

Windows: Ctrl + Shift + F Mac: Command + Shift + F

打开关闭了的页面

Windows: Ctrl + Shift + T Mac: command + Shift + T

终端

打开关闭终端

Ctrl + `

终端+1

Ctrl + Shift + `

终端分屏

Mac: command + \

切换不同的项目

Mac: command+ `

切换选项卡

Windows: Ctrl + Alt +右箭头 Mac: Control + Option +右箭头

Windows: Ctrl + Alt +左箭头 Mac: Control + Option +左箭头

批量替换当前文件中所有匹配的文本

Windows: Ctrl + F2 Mac: command + F2

向上/向下移动一行

Windows: Alt + 向上箭头 Mac: option+ 向上箭头

复制光标向上或者向上批量添加内容

Windows: Ctrl + Alt +向上箭头 Mac: command + Option +向上箭头

插件

带星的为极力推荐的插件

* Auto Close Tag

* Auto Rename Tag

修改html标签时自动帮我们重命名

* Document This

注释js代码

* EditorConfig for VS Code

这个插件会用项目里的.editorconfig文件覆盖vscode的设置

* ESLint

eslint检查代码规范

* Git History

git历史

* GitLens — Git supercharged

每个文件每行都会显示修改信息，非常推荐

* npm Dependency Links

cmd/ctrl+click跳转到npmjs.com

* npm Intellisense

自动填写npm模块

* npm-import-package-version

显示npm包引入的版本号，支持js ts vue

* Path Intellisense

自动填写文件路径

* Prettier - Code formatter

美化

* Settings Sync

同步vscode设置，非常推荐

* TODO Highlight

* Vetur

使用vue就装上

* vscode-fileheader

快速生成文件头注释

* vscode-icons

文件根据不同后缀显示不同的图标

* vue

Auto Import - ES6, TS, JSX, TSX

自动引入依赖包

Beautify

美化代码

Bracket Pair Colorizer

Check Updates of NPM Packages

在后台检查npm包是否可以更新，并会提示你

ES7 React/Redux/GraphQL/React-Native snippets

filesize

显示文件大小

Full React/React Native/React Router/Redux/GraphQL/ES7/Testing/PropTypes snippets

Highlight Line

高亮选中的行

Highlight Matching Tag

高亮匹配的标签

HTML CSS Support

HTML SCSS Support

HTML Snippets

html tag wrapper

用div包裹选中的代码，ctrl+i

Image preview

在编辑器左侧显示图片缩略图

Live Server

起一个服务

npm

支持跑npm脚本

Npm Dependency

更新依赖包

open-in-browser

Partial Diff

对比不同

Rainbow Brackets

匹配括号

SVG Viewer

Toggle Quotes

TSLint

Turbo Console Log

快速的添加console

View In Browser

vscode-elm-jump

vscode-styled-jsx

WakaTime

记录你用vscode工作的时间，项目等

参考文档