強大的 VS Code

weixin_33766168發表於2018-07-09

簡介

Build 2015 大會上,微軟除了釋出了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外,最大的驚喜莫過於宣佈推出免費跨平臺的 Visual Studio Code 編輯器了!

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級程式碼編輯器,支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義快捷鍵、括號匹配和顏色區分、程式碼片段、程式碼對比 Diff、GIT命令 等特性,支援外掛擴充套件,並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux,執行流暢,可謂是微軟的良心之作......

為什麼選擇VS Code工程開發

1

作為前端開發的我,之前的開發過程中一直用的是Atom這一款IDE,再配上了好看的主題外掛很nice,Atom的介面是真心好看,但是外掛裝多了你們真的不覺得卡嗎,VS CodeAtom更加的流暢,比webstorm更輕量級。一次偶然換的工作後,專案組要求統一IDE,讓我瞭解到了VS Code,這邊簡單介紹下VS Code日常開發的需求。

VS Code精選主題

主題外掛安裝流程

首先先簡單介紹些主題外掛的安裝流程:

第一步,點選擴充套件商店搜尋你要找的外掛名稱如Atom One Dark Theme,點選安裝;

第二部,安裝好了之後只是證明你本地的VS Code上面有這個外掛了,還需要將當前使用的主題外掛切換成你想要的才行;

①點選右下角的設定按鈕,進入命令皮膚;

②搜尋顏色主題關鍵字;

③點選想要的主題完成切換。

一個編輯器介面的好看與否,真心挺重要的,之前對atom一直戀戀不捨,完全就是因為它的主題介面太優雅了。下圖是筆者配置好的VS Code介面截圖,下面推薦幾款好看的主題:

VS Code 主題外掛列表(推薦)

1. One Dark Pro

One Dark Pro的主題介面效果如下(推薦指數5星) One Dark Pro

1

2. Atom One Dark Theme

Atom One Dark Theme的主題介面效果如下(推薦指數5星) Atom One Dark Theme

1

3. Eva Theme

Eva Theme的主題介面效果如下(推薦指數5星) Eva Theme

4. Material Palenight Theme

Material Palenight Theme的主題介面效果如下(推薦指數5星) Material Palenight Theme

更多Visual Studio Code 主題外掛請參考VS Code Downloads

VS Code精選外掛

VS Code所有的外掛都可以在VS Code Downloads外掛庫中找到,如下圖:

Auto Close Tag

Auto Close Tag:匹配標籤,關閉對應的標籤。對於HTML/XML很實用。

Auto Rename Tag

Auto Rename Tag:改變標籤的時候同時改動開閉合標籤;對於HTML/XML很實用。

HTML CSS Support

HTML CSS Support : 這個也是HTML必備外掛之一。

CSS Peek

CSS Peek : html和css中關聯css的跳轉

Code Runner

Code Runner : 程式碼編譯執行看結果,支援眾多語言

Git History

Git History : 檢視git分支提交日誌的外掛

Git History Diff

Git History Diff : 尋找每一個git分支上面提交過的節點,並可以對比差異性。

Path Autocomplete

Path Autocomplete : 路徑智慧補全外掛。

Path Intellisense

Path Intellisense : 路徑智慧提示外掛。

beautify

beautify :良好的擴充性,可以格式化JSON|JS|HTML|CSS|SCSS,比內建格式化好用;但是react工程的jsx檔案用beautify外掛格式化會亂掉,建議不要用

Prettier - Code formatter

Prettier - Code formatter : 程式碼格式化外掛,主要針對工程中的JavaScript / TypeScript / CSS

Prettier Now

Prettier Now : 支援語言比較全面的程式碼格式化外掛,主要是支援jsx /tsx ,還有sass / less等(問的react工程基本上就是用這2個Prettier外掛格式化程式碼)

Terminal

Terminal : vs code 內建的命令列外掛,也比較實用。

Bookmarks

Bookmarks : 這個外掛支援在檔案特定的行做標記,更好的提高開發效率。

Bracket Pair Colorizer

Bracket Pair Colorizer :很多括號的情況下,這個外掛可以做一個顏色的區分,程式碼一目瞭然。

1

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese (Simplified) Language Pack for Visual Studio Code : 適用於 VS Code 的中文(簡體)語言包。

filesize

filesize : 編輯器底部顯示當前檔案的大小。

Markdown Preview Enhanced

Markdown Preview Enhanced : 本地Markdown文件預覽外掛。

vscode-icons

vscode-icons : 一套vs code的圖示外掛。

npm

npm : 不多說npm。

open-in-browser

open-in-browser : 一鍵在瀏覽器中開啟

Live Server

Live Server :一鍵開啟本地服務。

Local History

Local History個人感覺很有用 原生程式碼的一個儲存日誌,在沒有git,svn,或者很長時間沒有提交過程式碼的情況下,感覺挺實用,再也不怕程式碼回滾。

GitLens — Git supercharged

GitLens — Git supercharged : GitLens能增強Visual Studio程式碼中內建的Git功能。它幫助您通過Git blame註解和程式碼鏡頭直觀地顯示程式碼作者,無縫地導航和探索Git儲存庫,通過強大的比較命令獲得有價值的見解。

11

VS Code常用快捷鍵

VS Code的快捷鍵有很多,需要具體的請仔細參考 VS Code => 右下角設定按鈕 => 鍵盤快捷方式

1

我們也可以自定義快捷鍵,在keybindings.json裡面設定覆蓋即可

快捷鍵完全是個人操作習慣,這裡不多介紹,我常用的有這幾個:

開啟命令皮膚    cmd + shift + p / F1
開啟設定頁面    cmd + ,
刪除一行        cmd + E(自定義)
新增書籤        cmd + option + k
程式碼格式化      control + opiton + B
複製程式碼

VS Code git程式碼管理實戰

git現在是很常見的程式碼管理工具,VS Code 也有內建的git外掛,當然,要是你覺得不完美,可以安裝一些常用的git外掛等,簡單介紹下VS Code 下git的提交步驟。

這裡我以GitHub上面新建的一個倉庫為例,倉庫新建後預設分支是master,這裡我在GitHub上新建了2個遠端分支develop01develop02,當你在VS Code中點選切換到某一個遠端分支的時候,VS Code會自動給你建立一個和當前遠端分支對應的本地分支,如origin/develop02 對應develop02,如origin/master 對應master,如上圖所示。

現在我們在master分支上面提交程式碼,

  • 第一步,先暫存要提交的檔案
  • 第二步,填下提交日誌
  • 第三步,點選對勾按鈕完成提交

提交好了之後還需要拉取git遠端分支的程式碼才能推送。

  • 第四步,拉取遠端程式碼,解決衝突
  • 第五步,推送到遠端分支上

然後就沒有然後了,提交完成。

假如你因為工作需求的原因,需要在不同的分支上面提交不同的程式碼,那就涉及到分支的切換了。首先第一步,切換分支之前先提交程式碼,不然老是有報錯日誌,切換了分支後,本地的程式碼也會對應分支改變。

如上圖,master切換成develo01之後,master分支上剛提交的程式碼成了develo01上對應的程式碼。

你問我答

1.VS Code 怎麼更改預設的設定?

筆者使用的是mac,使用快捷鍵 Com + , 開啟使用者預設設定介面,左邊是預設設定,右邊是自定義設定,根據個人工作場景而定吧,就像我這邊就統一格式化程式碼縮排4格等,還可以設定忽略一些資料夾等。

{
    "explorer.confirmDelete": false,
    // 主題
    "workbench.iconTheme": "vscode-icons",
    // 小地圖
    "editor.minimap.enabled": true,
    // 主題風格One Dark Pro
    "workbench.colorTheme": "One Dark Pro",
    "window.zoomLevel": 1,
    "extensions.autoUpdate": false,
    // 字型大小
    "editor.fontSize": 13,
    "editor.snippetSuggestions": "top",
    "diffEditor.ignoreTrimWhitespace": true,
    // 設定格式化縮排4格
    "prettier.tabWidth": 4,
    "vetur.format.defaultFormatter.html": "prettier",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.historyExplorer.enabled": true,
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    //貼上自動格式化
    "editor.formatOnPaste": false,
    //儲存自動格式化
    "editor.formatOnSave": false,
    // 用來忽略工程開啟的資料夾
    "files.exclude": {
        "**/.vscode": true,
        "**/.DS_Store": true,
        "**/.history":true,
        "**/nbproject":true
    },
    // 用來忽略搜尋的資料夾
    "search.exclude": {
        "**/node_modules/**": true,
        "**/bower_components/**": true,
        "**/image/**": true,
        "**/*.xml": true,
        "**/.history/**":true,
        "**/nbproject/**":true,
        "**/vscode/**":true

    },
    // 建立和更新程式碼的頭部資訊作者
    "fileheader.Author": "Baldwin",
    "fileheader.LastModifiedBy": "Baldwin",
}
複製程式碼

2.假如我幾天沒有提交程式碼了(git),今天突然發現程式碼youbug,需要還原到昨天版本,VS Code能做到嗎?

能。參考上面的 VS Code外掛 Local History

基本上就介紹到這裡(有好的外掛或者主題歡迎留言,一定給update上去),希望對你使用VS Code有幫助,有問題歡迎留言,一定積極回覆





原文釋出時間為:2018年06月23日

作者:baldwin

本文來源:掘金 如需轉載請聯絡原作者

相關文章