天天看點

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

版權聲明:本文為部落客原創文章,未經部落客允許不得轉載。 https://blog.csdn.net/chinahuyong/article/details/46480995

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器  

  在 Build 2015 大會上,微軟除了釋出了 Microsoft Edge 浏覽器和新的 Windows 10 預覽版外,最大的驚喜莫過于宣布推出免費跨平台的 Visual Studio Code 編輯器了!

  Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器,支援文法高亮、智能代碼補全、自定義熱鍵、括号比對、代碼片段、代碼對比 Diff、GIT 等特性,并針對網頁開發和雲端應用開發做了優化。軟體跨平台支援 Win、Mac 以及 Linux,運作流暢,可謂是微軟的良心之作……

  相信很多程式員同學都沒想過有一天能在不用虛拟機的情況下直接在 Mac、Linux 上使用 VisualStudio 吧。當然,微軟稱 Visual Studio Code 并非完整版的 Visual Studio,它隻是一款輕量級的代碼編輯器,而不是一個重量級的完整 IDE (內建開發環境),它的競争對手将會是 Sublime Text、Atom、VIM、Notepad++ 等産品。

  當你開始閱讀這篇文章時,請先不要把Visual Studio Code和.net、Windows聯想到一起,因為VS Code是一個跨平台,支援30多種語言的開箱代碼編輯器。不管你是.Net、Java、PHP、Python、TypeScript、Objective-C...還是前端開發者,你都值得擁有。下面,讓我們來看一看Visual Studio Code 這個神器吧~

一、Visual Studio Code的下載下傳和安裝

  Visual Studio Code最新版下載下傳位址,

https://www.visualstudio.com/

,檔案不到60M,如圖:

  

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  下載下傳完成後,單擊下載下傳的exe檔案即可自動安裝,這兒需要注意的時,安裝時沒有指定安裝的路徑,有的童鞋安裝完後就不知道如何打開了,我的電腦是win7的,安裝的預設路徑為:

  C:\Users\%USERNAME%\AppData\Local\Code\app-0.3.0\Code.exe

二、Visual Studio Code簡介

   安裝完成後,我們看到的Visual Studio Code界面如下,當然不同的系統界面邊框略有不同,基本布局如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

下面我們來進行一些簡單的設定,下面就拿大家最關心的字型大小設定來說吧,其他的都類似,點選如圖菜單:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

我們會看到如下頁面,VS Code會打開兩個檔案:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  左邊的是預設設定,右邊的是使用者設定,其他的一些設定都可以在左邊的預設設定裡面找到,我們要修改什麼設定,拷貝到右邊的視窗中修改即可。例如,我們要修改字型大小,如圖修改就好了,注意這是個json檔案。 

  工具欄簡介

  1、資料總管

  下面來看一下右邊的工具欄,資料總管就不用多說了很簡單,隻是這裡有個功能值得注意一下,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  在檔案上面點選滑鼠右鍵,有個Copy Path,可以複制檔案的實體路徑。當然,你會想為什麼不是打開檔案位置啊,其實這個功能已經有了,就是Reveal in Explorer.記住啦,不要再無知的吐槽了~

其他的菜單,自己點點就知道了,比較簡單,我就不廢話了。

  2、搜尋

  下面來說說這個搜尋,為什麼要在這個地方加一個搜尋的工具欄呢?如果你熟悉Visual Studio的話,你會發現按快捷鍵Ctrl + F會出現一個搜尋框,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  細心的你也許會發現,當你按下Ctrl + Shit + F的時候,會激活這個工具欄的搜尋功能,沒錯,這個功能就是類似Visual Studio中的全局搜尋功能,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  看到了吧,這裡的搜尋結果,在1.html中和2.html中都搜尋出來了"部落格園"這個關鍵字。看到這裡,已經心動了吧~~

還有Ctrl + G鍵,輸入行号可以跳轉到指定的行! 

  3、Git版本控制

  這個功能,用過Git大家都清楚,Git的初始化必須在一個空的檔案夾裡面,是以要使用這個功能,也是要先有一個檔案夾的,下面我們來看看怎麼操作,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  是不是感覺很流弊,右鍵檔案夾都可以直接打開,打開後,我們繼續看,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  到了這裡,很明顯了,點選那個Initialize git repository按鈕,初始化Git倉庫。然後,我們建立一個檔案,名字為index.html,儲存到這個檔案夾下。接下來,注意啦,注意啦,我們要輸入以下内容,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  如果你還一行一行的敲,那就太low了,這裡先交給大家一個方法,在空白的文檔裡面輸入一個感歎号!,注意是英文的哦,然後,點選Tab鍵,看看發生了什麼,是不是duang的以下就出來了~~

  然後,我們按Ctrl + S儲存檔案,再來看Git這個工具欄的變化,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  我們看到了,changes裡面出現了index.html,然後,我們輸入commit message,點選上面的對勾送出,然後,我們會看到changes下面的檔案都消失了,并且右邊的1變成了0。

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  點選那個...按鈕,會彈出菜單,這裡有更多的Git的操作,我就不一一介紹了,相信使用過Git的都看的懂的! 

  4、調試

  這個功能簡單的說就是調試代碼,如果要使用的話還要進行一些配置,具體大家看官方文檔

Debugging

,我就不再細說了,大家有興趣就自己去研究吧~~

 三、Visual Studio Code上手體驗

  VS Code支援多種語言,我們先來看一下官方的說明:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  這裡大概說的是對CSS, HTML, JavaScript, JSON, Less, Sass幾種語言有智能提示,其他的語言都是文法高亮和重構。就是說你寫C#、Java等一些代碼都是沒有智能提示的,但是都會有文法高亮。這些代碼檢視,大家可以打開一些相關的代碼檔案看看,我就不一一示範了。 

  1、檔案類型

  下面我們來看看VS Code編寫代碼是否順手,點選菜單建立檔案或者使用快捷鍵Ctrl + N,這個時候會建立一個Untiled-1的檔案,預設為文本檔案,不高亮和提示任何代碼,這個時候我們可以通過儲存檔案來改變檔案類型,或者直接告訴Vs Code檔案類型,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  點選Plain Text,然後在彈出的輸入框輸入你想要的語言就好了。或者我們使用快捷鍵,Ctrl + Shift + P,打開指令輸入框,輸入language,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  選擇第一個Change Language Mode,也可以打開這個語言選擇框。

  這裡首先要說的是VS Code對html的支援,當然Vs Code對html支援是非常好的,上面我們已經看到了,輸入一個感歎号,然後按下tab鍵就一下子完成了html5文檔的基本結構。其實,這是VS Code裡面添加了Emmet snippet expansion,官方文檔位址http://docs.emmet.io/cheat-sheet/,我們大概來看一下:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  看到了吧,第一個就是我們上面使用的,同理如果我們輸入<a>标簽,我們隻要輸入a,然後按tab鍵就可以了。這裡就不再多說了,就留給大家去好好探索了~

  另外,VS Code也支援Html5和AngularJs的智能提示,可以說是前端神器啊~~哈哈,目前我知道的也隻有VS2015支援AngularJS的智能提示了。 

  2、檔案編碼

  檔案編碼當然是很重要的,有時候我們要檢視和修改檔案編碼,在介紹VS Code的時候,已經告訴大家,在哪裡顯示檔案的編碼了,下面我們來說一下如何修改檔案編碼,還是Ctrl + Shift + P打開指令面闆,輸入encoding,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  選擇以後,會出現如下選項:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  我們可以根據需要選擇,這裡我們選擇儲存的編碼格式,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  3、MarkDown

  還有一個比較讓人喜歡的一點就是VS Code也支援markdown的書寫和預覽,下面我們看一下:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  如果要預覽的話,要先儲存檔案,然後按下快捷鍵Ctrl + Shift + V,就可以預覽了。如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

   4、檔案的切換

   當我們編寫多個文檔時,經常需要在多個檔案直接切換,用滑鼠點選來切換是一個很奢侈的做法,我們通常都喜歡用快捷鍵。在Vs Code中,我們可以用Ctrl + Tab鍵來快速的切換檔案,如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  按住Ctrl鍵不要松,不斷的按下Tab鍵來切換選擇檔案。當然,這隻适用于比較少的檔案時,檔案多了,這樣就不好用了。

  檔案多的時候,我們可以使用Ctrl + p快捷鍵,打開和上面一樣的輸入框,不過這個時候我們可以輸入内容來搜尋檔案,然後選擇打開。如圖:

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  5、支援打開一個檔案夾

   當我們編輯一個項目中的檔案時,同時打開一個檔案夾可是非常爽的功能,其他很多文本編輯器都不具備這樣的特色。

微軟良心之作——Visual Studio Code 開源免費跨平台代碼編輯器

  看到這裡,現在感覺VS Code怎麼樣呢?當然,這隻是VS Code的一小部分功能,還有更多的等待大家去發現!等到正式版出來的時候,估計會更加的好~~   

四、總結

   由于篇幅的關系,關于VS Code就先介紹到這裡了,下面來簡單的總結一下Vs Code的有點:

  1、支援30多種常用語言的文法高亮,并對html、js、css、Angular等很好的文法支援,并且還支援MarkDown的預覽!

  2、體積小,功能強大,當然性能也是很好的,打開超大型的文本檔案也不會卡死,大家可以和其他的一些文本編輯器對比一下。

  3、支援指令操作(Ctrl + Shift + P)和滑鼠操作,還有大量的快捷鍵,可以适應各種開發者的操作習慣。

    4、支援Git版本控制器,可以完成建立分支、解決沖突、送出修改等操作;

  5、強大的搜尋功能,并且支援多檔案搜尋;

  6、最大的有點,當然是跨平台、免費;

  微軟這近段時間來不斷開放的姿态,越來越讓我們看到微軟的情懷和未來。有人說 VSC 的推出又多了一個買 Mac 的理由了,不過其實細想,随着 .Net 的開源,加上免費的 VS Code 鋪路,反而是能讓一大批開發高手重新回到微軟的大環境中,不得不說微軟這次又下了一手好棋啊。

繼續閱讀