vs code 使用技巧整理


快捷鍵

  • Ctrl + Shift + F :在文件夾中搜索;
  • Ctrl + Shift + P:命令面板;
  • Ctrl + Shift + T:重新打開 關閉的編輯頁面;
  • Ctrl+Shift+PgUp/PgDown:將編輯器(當前tab)向左或向右移動
  • `Ctrl + ``:集成終端;
  • Ctrl + ,:設置界面;
  • Ctrl + F2:批量替換當前文件中所有匹配的文本;
  • Ctrl + Alt +向上箭頭:復制光標向上或者向上批量添加內容
  • Ctrl + Alt +右箭頭:將選項卡交換到不同的組
  • Ctrl + Backspace:刪除上一個單詞
  • Ctrl + T:通過匹配文本打開文件
  • Ctrl + B:顯示/隱藏側邊欄
  • Ctrl + P: 打開擴展管理器
  • Ctrl + Home&Ctrl + End:移至文件的開頭/結尾
  • Alt + 向下箭頭:向上/向下移動一行
  • Shift + Alt + 向下箭頭:重復的行;

其中命令面板常用命令:

  • Show running extensions:正在運行的插件
  • Startup Performance:啟動性能

windows右擊菜單配置

只需要替換vscode本地安裝路徑,保存為.reg文件點擊運行即可在右擊菜單中添加:

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
@="Open VSCode Here"
"Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
@="C:\\Program Files\\Microsoft VS Code\\Code.exe."

[HKEY_CLASSES_ROOT\Directory\shell\VSCode]
@="Open VSCode Here"
"Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe"

[HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
@="C:\\Program Files\\Microsoft VS Code\\Code.exe %1"

字體安裝

一般選擇等寬字體,比如:

  • Source Code Pro ,需要去github下載源碼,找到SourceCodeVariable-Roman.otf 文件下載安裝然后在vscode設置

設置Editor:Font Family 值為:Source Code Variable, 'Source Code Variable Italic'

190809-vscode-font-change.png

效果:

190809-vscode-font-change-pre.png

  • Menlo
  • Consolas : Consolas, 'Courier New', monospace
  • Monaco
  • Courier New

vscode必裝插件

atom one dark theme

是atom 的主題風格

vscode great icons

文件圖標,效果:

190809-vscode-great-icons.png

settings sync

這個是Visual Studio代碼設置同步插件,可以同步你的vs code 配置在任何地方使用,非常方便實用,github 地址https://github.com/shanalikhan/code-settings-sync

搜索settings sync插件安裝成功后,需要做兩件事:

  1. 在Github上創建 Github Token
  2. 創建Github Gist Id

首先進入Github的setting->Developer settings -> Personal access tokens頁面,點擊Generate New Token創建

190810-vscode-sync-02-create-tokenid.png

選中gist 保存即可生成Token(務必copy一份關閉后不能查看):

190810-vscode-sync-02-get-tokenid.png

然后點擊github頭像選擇Your gist菜單(要翻牆訪問),進入gist,創建gist file:

190810-vscode-sync-03-create-gist-file.png

創建成功后可以看到:

190810-vscode-sync-03-create-gist-file-ok.png

點擊vscode-setting-sync文件可以在url中獲取gist id

190810-vscode-sync-03-get-gistid.png

原先取名vscode-setting-sync,同步插件后自動改成cloudSettings

拿到token idgist id后,如果是第一次配置,快捷鍵Shift + Alt + D進入插件的主頁,選擇Edit conifgration:

190810-vscode-sync-04-home.png

如果不是第一次Ctrl+Shift+P打開命令面板,輸入Sync選擇Advanced Options再選擇打開設置即可進入:

token idgist id填入以下表單中:

190810-vscode-sync-04-set-token-gistid.png

快捷鍵操作

  • Shift + Alt + U 上傳配置
  • Shift + Alt + D 下載配置

下載時可以在vs code的output 窗口看見正在安裝插件:

190810-vscode-sync-05-download.png

在github gist上可以看見同步的配置,包括:插件,user setting,快捷鍵設置等都會上傳到gist:

190810-vscode-sync-05-up-cloudSettings.png

view in browser

瀏覽器打開網頁,安裝完右鍵可以看到view in browser菜單,如需設置默認瀏覽器可以在設置頁面搜素view in browser 可以配置默認打開的瀏覽器

190809-vscode-view-in-browser.png

prettier

格式化,使用標准風格,快捷鍵 alt+shift +F

beautify

美化vscode代碼

markdownlint

書寫md文件的預覽插件

190809-vscode-markdownlint.png

html snippets

html 快捷生成

markdown pdf

markdown 生成pdf插件

vscode調試net core

vscode調試vue

常見問題

vscode亂碼

打開 文件 --> 首選項 --> 設置 --> 搜索設置,輸入files找到選項

修改配置:

"files.autoGuessEncoding": false,

改為:

"files.autoGuessEncoding": true,

參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM