2015年2月9日 星期一

調整你的 Visual Studio - Part.1

這個題目很難定,因為每個人的 Visual Studio 開發環境不盡相同,我所建議的調整項目不見得適合每一個開發人員,有些大師使用著初始預設值設定的 Visual Studio 進行開發也一樣能夠寫出高深莫測的專案,但這是少數中的少數,並不是所有的開發人員都可以跟大師一樣,每個人完成安裝 Visual Studio 之後一定會做些環境設定調整、安裝熟悉以及慣用的套件,但還是有蠻多開發人員並沒有好好地將 Visual Studio 做調整與修改,反而浪費了有著地球上最強 IDE 稱號的 Visual Studio。

所以這邊提供我的 Visual Studio 環境設定項目,包含了曾經陸續發表的一些文章,例如 Visual Studio 套件、設定等,將這些調整給大家做為參考,這個主題應該會成為系列文章,畢竟安裝的套件以及修改的設定也不在少數。


配置

這一篇先從文字編輯器(Editor)開始來說明,下圖是我的 Visual Studio 的配置,有關文字編輯器內的配色、字型等設定,可以參考之前的文章:

Visual Studio 2013 佈景主題與 Code Style
Visual Studio - 使用 Twainsoft StudioStyler 快速更換 Style
換個好字型讓程式開發有效率

image

我跟一般人所慣用的配置有些不同,我習慣將方案總管與屬性等視窗給放在 Visual Studio 的左邊,而右邊則是放置 CodeMaid, Javascript Parser, Team Explorer 和測試總管等,然後主要的編輯區則是在中間,因為我的主要螢幕(筆電螢幕以及外接螢幕)都是 1920x1080 的解析度,所以這樣的配置是剛剛好的,但如果你所使用的螢幕解析度並不是 1920x1080 的話(例如 1600x900 或 1366x768 等),那麼我就會建議你將右邊的區塊就不要固定住,盡量讓文字編輯器的寬度加大。

CodeMaid
http://www.codemaid.net/
https://visualstudiogallery.msdn.microsoft.com/76293c4d-8c16-4f4a-aee6-21f83a571496

文字編輯器的範圍並不會放到最大,或是將左邊的方案總管或是右邊的 CodeMaid 給最小化,左邊的方案總管讓我可以找尋檔案以及知道我目前所編輯的檔案是位在哪一個專案裡(快速鍵:Shift+Alt+L),而右邊的 CodeMaid 則是當我在編輯後端程式時可以隨時看到目前類別的成員(欄位、屬性、建構式、方法等),最重要的是有顯示方法的複雜度。

文字編輯器放置在中間的用意是在於不要讓你的程式碼向右邊一直延伸,我們在閱讀程式的時候最好的瀏覽方式是在一定的寬度範圍內由上而下、從左到右,一旦看到程式碼延伸到文字編輯器的可視範圍之外,就必須中斷閱讀與思考然後使用滑鼠去拖曳水平橫軸的 Scroll bar,看完那一行之後才又把橫軸 Scroll bar 給拖曳到原來的位置之後才又繼續往下讀,這種程式寫作方式相當不好閱讀而且也不利於思考,這關係到開發人員的程式寫法與習慣。

我不建議使用 Visual Studio 環境設定所提供的「自動換行」功能,因為這只是解決程式碼向右延伸而不易閱讀的一種消極作為,因為實際上的程式碼還是那麼寬呀,而且自動折行所呈現的程式碼更讓人慘不忍睹,所以在撰寫程式的時候就習慣使用直接折行的方式,讓程式碼在閱讀時的視線是由上而下的,不需要讓視線左右擺動的幅度過大而造成程式的不可閱讀性。

勾選自動換行的顯示

image

自動換行

image

開發人員自行決定的直接折行

image

兩種方式比較下來,是否發現到自行折行的程式會有比較好的閱讀性,因為那是開發人員依據自己的程式以及思考、閱讀方式而決定如何折行的,而自動換行並不會這麼做,只是單純的將超出文字編輯器可視範圍的程式做換行顯示的處理而已,這種顯示的差異在 LINQ 的 Method Syntax 會更為明顯。

超出文字編輯器的可視範圍

image

自動換行

image

開發者自行折行

image

同樣的一行程式,由開發者自行決定折行顯示,程式的可讀性遠比自動換行甚至是往右延伸出可視範圍要來得好很多很多,所以這邊強烈的建議:

  • 調整好你的文字編輯器的寬度
  • 養成好習慣,盡量不要讓程式超出文字編輯器的可視範圍
  • 不要使用自動換行功能,由開發者自行決定程式如何折行

 

線條(Line)

不要因為你的螢幕是寬螢幕或是高解析度就把程式碼一直往右邊延伸,這並不是一個好習慣,人的可視範圍是有限的,除非是一個人開發專案就可以讓你肆無忌憚的去寫寬度無限長的程式,不然你就要考慮團隊的每個開發人員,盡量讓你的程式碼保持「可閱讀性」,除了讓程式的內容具有可閱讀性之外,程式碼的寬度限定也必須包含在內,我的建議是寬度最好是在 100 columns,而程式碼不要超過 120 columns,這裡我會使用 Guidelines 功能直接在文字編輯器的 100 column 位置加上一條紅線以做為識別。

image

image

Editor Guidelines
https://visualstudiogallery.msdn.microsoft.com/da227a0b-0e31-4a11-8f6b-3a149cf2e459

另外我也要在文字編輯器裡看出每個判斷式、方法、類別的結構性,而且可以馬上知道目前的編輯範圍是在哪一個結構裡,但又不希望線條的顏色太過於搶眼,如下:

image

這邊我所安裝的套件為:Indent Guide

https://visualstudiogallery.msdn.microsoft.com/e792686d-542b-474a-8c55-630980e72c30

Ident Guide 可以讓我們選擇是否顯示 Indent Guides,

image

以下為不顯示 Indent Guide 的樣子,

image

在「工具 > 選項」裡還可以做設定項目的調整,

SNAGHTMLd5a63c9

你也可以使用 Page Width Markers 來取代 Editor Guideline 的功能,

SNAGHTMLd5f352f

 

文字編輯器的環境設定

這邊我強烈建議(甚至要強制硬性規定)必須要把所有語言的行號顯示給勾選起來

image

一定要在文字編輯器顯示行號,雖然可以使用快速鍵「Ctrl + G」去跳至指定的程式行號,但是文字編輯器顯示行號的用意在於可以讓你知道目前程式編輯的所在位置,另一方面也可以讓我們知道目前的程式有多少行,也可以藉由行號的顯示讓我們可以看出每一個方法大約用了多少行

image

另外我習慣使用的定位點大小為「4」,每一次的縮排就是四格空白,

image

然後我會將「檢視空白區」給開啟,然後再到「環境>字型和色彩」設定裡的「可見的空白區」顏色做個調整,讓顏色不會太過於突兀,讓我可以知道每一個縮排都有保持一定的空白,

image

image

image

保持程式碼的格式整齊是需要隨時保持的,我在編寫完一段程式後會習慣性的先使用快速鍵「Ctrl +K, Ctrl + D」做格式化文件的處理,最後才會儲存檔案,

image

 

索引標籤和視窗的環境設定

一般預設的狀況下,當我們點選方案總管裡的某一個檔案時,Visual Studio 就會去預覽所選取的檔案,雖然說是一個方便讓我們去看檔案的程式內容,但老實說這還蠻煩人的,所以我都會把這個功能給關掉。

image

再來就是當我們開啟了一堆檔案時,有些檔案希望是固定住的,最好是把這些固定的頁纖給放在一個位置裡,讓我們可以馬上看到,在「固定的索引標籤」項目裡就可以把第一個與第二個項目給勾選起來,

image

這麼一來被我們設為固定的頁籤(Tab)就會集中在個別資料列裡,

image

 

Productivity Power Tools

https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace

這是一定要裝的(不要跟我說你沒有裝,還沒有安裝的朋友就快去裝吧),這個套件有什麼功能呢?直接去看上面的連結內容,或是直接看以下連結裡的影片說明就能夠大致瞭解。

Productivity Power Tools for Visual Studio 2013 | Visual Studio 2013 Launch | Channel 9

image

 


還有很多可以寫,只不過這篇文章的內容已經有點長了,所以下次再繼續說。

 

相關連結

Visual Studio 2013 佈景主題與 Code Style

Visual Studio - 使用 Twainsoft StudioStyler 快速更換 Style

換個好字型讓程式開發有效率

CodeMaid
http://www.codemaid.net/
https://visualstudiogallery.msdn.microsoft.com/76293c4d-8c16-4f4a-aee6-21f83a571496

Indent Guide
https://visualstudiogallery.msdn.microsoft.com/e792686d-542b-474a-8c55-630980e72c30

Productivity Power Tools
https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace
Productivity Power Tools for Visual Studio 2013 | Visual Studio 2013 Launch | Channel 9

 

以上

5 則留言:

  1. 感謝,收藏了 XD

    回覆刪除
  2. 之前線條功能都是用coderush xpress,但是後來要收費了...

    免費版目前還是可以安裝在2012上...但是還是Editor Guidelines比較好看一些

    回覆刪除
  3. 請問一下,程式碼上面有一列是三個並排的下拉選單,可選類別、屬性、方法的那個,
    怎麼讓他出現呢?
    我不知怎麼弄不見了。
    謝謝各位。

    回覆刪除
    回覆
    1. Tools > Text Editor > All Languages > General > Settings - Navigation Bar

      刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。