vscode這篇就夠了

前言

本文檔用於記錄vscode的使用技巧，持續更新中

github: https://github.com/abc-club/f...

更多前端資源盡在 https://github.com/abc-club/f...

快捷鍵

搜索文本

搜索當前文件

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

參考文檔

https://juejin.im/post/5d34fd...