vscode备忘

前言

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

参考文档

juejin.im/post/5d34fd…

快捷键

搜索文本

搜索当前文件

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 Import - ES6, TS, JSX, TSX

自动引入依赖包

* Auto Rename Tag

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

Beautify

美化代码

Bracket Pair Colorizer

Check Updates of NPM Packages

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

* Document This

注释js代码

* EditorConfig for VS Code

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

ES7 React/Redux/GraphQL/React-Native snippets

* ESLint

eslint检查代码规范

filesize

显示文件大小

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

* Git History

git历史

* GitLens — Git supercharged

每一个文件每行都会显示修改信息，很是推荐

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

更新依赖包

* npm Dependency Links

cmd/ctrl+click跳转到npmjs.com

* npm Intellisense

自动填写npm模块

* npm-import-package-version

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

open-in-browser

Partial Diff

对比不一样

* Path Intellisense

自动填写文件路径

* Prettier - Code formatter

美化

Rainbow Brackets

匹配括号

* Settings Sync

同步vscode设置，很是推荐

SVG Viewer

* TODO Highlight

Toggle Quotes

TSLint

Turbo Console Log

快速的添加console

* Vetur

使用vue就装上

View In Browser

vscode-elm-jump

* vscode-fileheader

快速生成文件头注释

* vscode-icons

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

vscode-styled-jsx

* vue

WakaTime

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