宇宙最強vscode教程(基礎篇)

本文主要介紹vscode在工做中經常使用的快捷鍵及插件,目標在於提升工做效率

本文的快捷鍵是基於mac的,windows下的快捷鍵放在括號裏 Cmd+Shift+P(win Ctrl+Shift+P)css

[TOC]html

零、快速入門

有經驗的能夠跳過 快速入門或者大體瀏覽一遍

1. 命令面板

命令面板是vscode快捷鍵的主要交互界面,可使用 f1或者 Cmd+Shift+P(win Ctrl+Shift+P)打開。

在命令面板中你能夠輸入命令進行搜索(中英文均可以),而後執行。vue

命名面板中能夠執行各類命令,包括編輯器自帶的功能和插件提供的功能。shell

因此必定要記住它的快捷鍵Cmd+Shift+Pwindows

image-20190120143658078

2. 界面介紹

剛上手使用vscode時,建議要先把它當作一個文件編輯器(能夠打字而後保存),等到有了必定經驗再去熟悉那些快捷鍵

先來熟悉一下界面及快捷命令(不用記)瀏覽器

3. 在命令行中使用vscode

若是你是 Windows用戶,安裝並重啓系統後,你就能夠在命令行中使用 code 或者 code-insiders了,若是你但願馬上而不是等待重啓後使用,能夠將 VS Code 的安裝目錄添加到系統環境變量 PATH編輯器

若是你是mac用戶,安裝後打開命名面板Cmd+Shift+P,搜索shell命令,點擊在PAth中安裝code命令,而後重啓終端就ok了ide

image-20190120144757840

最基礎的使用就是使用code命令打開文件或文件夾函數

code 文件夾地址,vscode 就會在新窗口中打開該文件夾測試

若是你但願在已經打開的窗口打開文件,可使用-r參數

vscode命令還有其餘功能,好比文件比較,打開文件跳轉到指定的行和列,若有須要自行百度:bowing_woman:

注意:

在繼續看文章以前記住記住打開命令面板的快捷鍵Cmd+shift+P(win下是Ctrl+shift+p)

1、代碼編輯

windows下的快捷鍵放在括號裏

光標的移動

基礎

  1. 移動到行首 Cmd+左方向鍵 (win Home)
  2. 移動到行尾 Cmd+右方向鍵 (win End)
  3. 移動到文檔的開頭和末尾 Cmd+上下方向鍵 (win Ctrl+Home/End)
  4. 在花括號{}左邊右邊之間跳轉 Cmd+Shift+ (win Ctrl+Shift+)

進階

  1. 回到上一個光標的位置,Cmd+U(win Ctrl+U) 很是有用,有時候vue文件,你改了html,須要去下面改js,改完js又須要回去,這時候Cmd+U直接回
  2. 在不一樣的文件之間回到上一個光標的位置 Control+- (win 沒測試,不知道),你改了a文件,改了b文件以後想回到a文件繼續編輯,mac使用controls+-

文本選擇

  1. 你只須要多按一個shift鍵就能夠在光標移動的時候選中文本
  2. 選中單詞 Cmd+D 下面要講的多光標也會講到Cmd+D
  3. 對於代碼塊的選擇沒有快捷鍵,可使用cmd+shift+p打開命令面板,輸入選擇括號全部內容,待會說下如何添加快捷鍵

1

刪除

  1. 你能夠選中了代碼以後再刪除,再按Backpack(是backpack嗎)或者delete刪除,可是那樣作太low了
  2. 因此,最Geek的刪除方式是Cmd+Shift+K (win Ctrl+Shift+K),想刪多少刪多少,當前你可使用ctrl+x剪切,效果同樣的

2

代碼移動

  • Option+上下方向鍵(win Alt+上下)

3

  • 代碼移動的同時按住shift就能夠實現代碼複製 Option+Shift+上下3

添加註釋

註釋有兩種形式,單行註釋和塊註釋(在js中,單行註釋//,塊註釋/**/)

  • 單行註釋 Cmd+/ (win Ctrl +/)
  • 塊註釋 Option+Shift+A

注意:不一樣語言使用的註釋不一樣

2、代碼格式

代碼格式化

  • 對整個文檔進行格式化:Option+Shift+F (win Alt+Shift+F),vscode會根據你使用的語言,使用不一樣的插件進行格式化,記得要下載相應格式化的插件
  • 對選中代碼進行格式化: Cmd+K Cmk+F win(Ctrl+K Ctrl+F)

代碼縮進

  • 真個文檔進行縮進調節,使用Cmd+Shift+P打開命令面板,輸入縮進,而後選擇相應的命令
  • 選中代碼縮進調節:Cmd+] Cmd+[ 分別是減少和增長縮進(win 下不知道,自行百度)

3、一些小技巧

  • 調整字符的大小寫,選中,而後在命令面板輸入轉化爲大寫或者轉化爲小寫

  • 合併代碼行,多行代碼合併爲一行,Cmd+J(win下未綁定)

  • 行排序,將代碼行按照字母順序進行排序,無快捷鍵,調出命令面板,輸入按升序排序或者按降序排序

4、多光標特性

使用鼠標:

按住Option(win Alt),而後用鼠標點,鼠標點在哪里哪里就會出現一個光標

注意:有的mac電腦上是按住Cmd,而後用鼠標點才能夠

快捷命令

  1. Cmd+D (win Ctrl+D) 第一次按下時,它會選中光標附近的單詞;第二次按下時,它會找到這個單詞第二次出現的位置,建立一個新的光標,而且選中它。(注:cmd-k cmd-d 跳過當前的選擇)

  2. Option+Shift+i (win Alt+Shift+i) 首先你要選中多行代碼,而後按Option+Shift+i,這樣作的結果是:每一行後面都會多出來一個光標

撤銷多光標

  • 使用Esc 撤銷多光標
  • 鼠標點一下撤銷

5、快速跳轉(文件、行、符號)

快速打開文件

Cmd+P (win Ctrl+P)輸入你要打開的文件名,回車打開

這裏有個小技巧,選中你要打開的文件後,按Cmd+Enter,就會在一個新的編輯器窗口打開(窗口管理,見下文)

在tab不一樣的文件間切換,cmd+shift+[]

行跳轉

加入瀏覽器報了個錯,錯誤在53行,如何快速跳轉到53行

Ctrl+g 輸入行號

若是你想跳轉到某個文件的某一行,你只須要先按下 「Cmd + P」,輸入文件名,而後在這以後加上 「:」和指定行號便可。

符號跳轉

符號能夠是文件名、函數名,能夠是css的類名

Cmd+Shift+O(win Ctrl+Shift+o) 輸入你要跳轉的符號,回車進行跳轉

win下輸入Ctrl+T,能夠在不一樣文件的符號間進行搜索跳轉

定義(definition)和實現(implementation)處

f12跳到函數的定義處

Cmd+f12(win Ctrl+f12)跳轉到函數的實現處

引用跳轉

不少時候,除了要知道一個函數或者類的定義和實現之外,你可能還但願知道它們被誰引用了,以及在哪裏被引用了。這時你只須要將光標移動到函數或者類上面,而後按下 Shift + F12,VS Code 就會打開一個引用列表和一個內嵌的編輯器。在這個引用列表裏,你選中某個引用,VS Code 就會把這個引用附近的代碼展現在這個內嵌的編輯器裏。

6、代碼重構

當咱們想修改一個函數或者變量的名字時候,咱們只需把光標放到函數或者變量名上,而後按下 F2,這樣這個函數或者變量出現的地方就都會被修改。

相關文章
相關標籤/搜索