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

時間 2019-11-05

標籤 code 讓你效率插件編輯技巧简体版

原文原文鏈接

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

文章詳情可查閱個人博客：lishaoy.net ，歡迎你們訪問。vue

外觀

主題

這裏我分享兩款主題：react

Material Theme

效果如圖：git

An Old Hope Theme

效果如圖：github

圖標

Material Icon Theme 固然，這兩款主題的文件管理器（左側）的 icon 小圖標使用的是 Material Icon Theme

字體及其餘

其餘和外觀相關的設置以下：typescript

{
    "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" 。npm

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

"editor.fontFamily": "FiraCode-Medium" ：設置字體，這種字體會讓代碼看起來更形象生動，以下服務器

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

關於 FiraCode-Medium 字體更多效果可查閱 github.com/tonsky/Fira… 地址。

代碼管理

格式化

Beautify ：格式化的時候，給出格式化文本選項，以下

Prettier ：我的比較喜歡這個，看起來代碼更清晰，以下

固然，你們能夠自定義快捷鍵，也能夠按 ⌘ - ⇧ - P 來搜索相關命令

代碼檢查

ESLint ：檢查 js 語法規範，你可使用不一樣的規範，如 airbnb 、standard 、google。
TSLint ：檢查 typescript 語法規範。
Stylelint ：檢查 CSS/SCSS/Less 語法規範。
Markdownlint ：檢查 markdown 語法規範。

自動補全

如下插件點擊連接能夠查看gif動圖，詳細瞭解具體功能。

Emmet ：你們應該很熟悉這個插件了（很好用），VS Code 已經內置了，很到位。
Auto Close Tag ：自動閉合 html 等標籤（</...>）。
Auto Rename Tag ：修改 html 標籤時，自動修改閉合標籤。
Path Intellisense ：自動提示補全路徑。

代碼片斷

snippets ：搭建能夠本身安裝各類代碼片斷（vue、react、angular等），這裏就不列舉。

功能擴展

如下的功能擴展插件大部分都有gif動圖，可點擊連接瞭解詳細功能

Bracket Pair Colorizer ：讓代碼的各類括號呈現不一樣的顏色。
Code Runner ：能夠在編輯器裏直接運行代碼，查看結果。
Color Picker ：能夠直接在編輯器裏打開色板，選擇各類模式的顏色。
Document This ：能夠給函數、類等自動的加上詳細的註釋。
Git History ：方便的查看git版本管理的詳細信息。
Live Server ：能夠一鍵在本地啓動服務器。
Settings Sync ：重點介紹下這個插件，若是你有兩臺電腦（好比，家裏和公司）都使用 VS Code ，但是在公司或家裏對 VS Code 安裝了插件或者修改了配置，回到家或公司又要從新弄一次，這個插件就能解決問題，同步多臺電腦設置。