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工做的時間，項目等