VS Code:讓你工作效率翻倍的23個插件和23個編輯技巧

VS Code

總結了一些平時常用且好用的 VS Code 的插件和編輯技巧分享出來。

文章詳情可查閱我的博客:https://lishaoy.net

外觀

主題

這里我分享兩款主題:

  1. Material Theme

效果如圖:

Material Theme
  1. An Old Hope Theme

效果如圖:

An Old Hope Theme

圖標

  1. Material Icon Theme 當然,這兩款主題的文件管理器(左側)的 icon 小圖標使用的是 Material Icon Theme

字體及其他

其他和外觀相關的設置如下:

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "workbench.activityBar.visible": false,
    "workbench.iconTheme": "eq-material-theme-icons-darker",
    "workbench.colorCustomizations": {},
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Darker",
        "accentPrevious": "Acid Lime"
    },
    "workbench.colorTheme": "Material Theme Darker",
    "material-icon-theme.angular.iconsEnabled": true,
    "material-icon-theme.folders.icons": "specific",
    "editor.lineHeight": 24,
    "editor.fontLigatures": true,
    "editor.fontFamily": "FiraCode-Medium"
}

特別注意的是 "editor.lineHeight": 24,"editor.fontFamily": "FiraCode-Medium"

"editor.lineHeight": 24, : 設置代碼的行間距,這里比默認的稍大些,就這一點小小的改變,讓代碼看起來清爽整潔。

"editor.fontFamily": "FiraCode-Medium" : 設置字體,這種字體會讓代碼看起來更形象生動,如下

no-shadow

紅色豎線左邊是使用了 FiraCode-Medium 字體的效果,紅色豎線右邊是沒有使用 FiraCode-Medium 字體的效果

關于 FiraCode-Medium 字體更多效果可查閱 https://github.com/tonsky/FiraCode 地址。

代碼管理

格式化

  1. Beautify :格式化的時候,給出格式化文本選項,如下
Beautify
  1. Prettier :個人比較喜歡這個,看起來代碼更清晰,如下
Prettier

當然,大家可以自定義快捷鍵,也可以按 ? - ? - P 來搜索相關命令

代碼檢查

  1. ESLint :檢查 js 語法規范,你可以使用不同的規范,如 airbnbstandardgoogle
  2. TSLint :檢查 typescript 語法規范。
  3. Stylelint :檢查 CSS/SCSS/Less 語法規范。
  4. Markdownlint :檢查 markdown 語法規范。

自動補全

以下插件點擊鏈接可以查看gif動圖,詳細了解具體功能。

  1. Emmet :大家應該很熟悉這個插件了(很好用),VS Code 已經內置了,很到位。
  2. Auto Close Tag :自動閉合 html 等標簽 (</...>)。
  3. Auto Rename Tag :修改 html 標簽時,自動修改閉合標簽。
  4. Path Intellisense :自動提示補全路徑。

代碼片段

  1. snippets :搭建可以自己安裝各種代碼片段(vue、react、angular等),這里就不列舉。

功能擴展

以下的功能擴展插件大部分都有gif動圖,可點擊鏈接了解詳細功能

  1. Bracket Pair Colorizer :讓代碼的各種括號呈現不同的顏色。
  2. Code Runner :可以在編輯器里直接運行代碼,查看結果。
  3. Color Picker :可以直接在編輯器里打開色板,選擇各種模式的顏色。
  4. Document This :可以給函數、類等自動的加上詳細的注釋。
  5. Git History :方便的查看git版本管理的詳細信息。
  6. Live Server :可以一鍵在本地啟動服務器。
  7. Settings Sync :重點介紹下這個插件,如果你有兩臺電腦(比如,家里和公司)都使用 VS Code ,可是在公司或家里對 VS Code 安裝了插件或者修改了配置,回到家或公司又要重新弄一次,這個插件就能解決問題,同步多臺電腦設置。

只需要把配置上傳到GitHub,在另一個地方下載配置即可,如下

Settings Sync
  1. gi :可以給 .gitignore 文件添加各種語言忽略文件配置。
  2. Polacode :可以把代碼生成圖片(有些地方發代碼結構會亂也沒有代碼高亮,這時候就可以生成圖片再發)。

編輯技巧

光標

  1. 把光標移到文件的首部活尾部
? - ↑ 或 ? - ↓
  1. 把光標移動到行的首部或者尾部
? - ← 或 ? - →
  1. 按單詞移動
? - ← 或 ? - →
  1. 按單詞大小寫分解移動光標
? - ? - ← 或 ? - ? - →

選擇

  1. 選擇行以上或以下全部內容
? - ? - ↑ 或 ? - ? - ↓
  1. 選擇到行首或行尾的內容
? - ? - ← 或 ? - ? - →
  1. 按字母或單詞選擇
  • ? - ← 、 ? - → 按字母選擇
  • ? - ? - ← 、 ? - ? - → 按單詞選擇
? - ← 、 ? - → 或 ? - ? - ← 、 ? - ? - →
  1. 伸縮選擇
? - ? - ? - ← 或 ? - ? - ? - →
  1. 選擇匹配單詞
? - D 或 ? - U

  1. 向上或向下移動行
? - ↑ 或 ? - ↓
  1. 復制或刪除行
? - ? - ↓ 或 ? - ? - K
  1. 多行合并成一行
? - J
  1. 縮進或伸縮行

![? - 或 ? - ]

  1. 在當前行之上或下插入行
? - ? 或 ? - ? - ?

多行

  1. 鼠標點擊,多行編輯

按 ? 選擇編輯點,按 ? 退出多行編輯

?
  1. 使用快捷鍵多行編輯
? - ? - ↓ 或 ? - ? - ↑
  1. 在所選擇的行的結尾插入編輯點
? - ? - I
  1. 選擇欄位

按 ? - ? 再選擇欄位

? - ?

高級

  1. 查看類或方法的定義
  • 按 ? 點擊,可以在新頁面查看
  • 按 ? - ? - ? 點擊,可以在新組查看
  • 按 ? - F12 點擊,可以在當前頁面查看
查看定義
  1. 折疊代碼
? - ? - ] 或 ? - ? - [
  1. 去掉選擇行的尾部空格
? - K 、 ? - X
  1. 定位到指定行號
? - G
  1. 在文件里查找類或方法
@

最后,如果記不住這些快捷鍵,可以按 ? - K 、 ? - S 搜索對應快捷鍵綁定

搜索快捷鍵
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。