# <font face='consolas'><font size=5 color=#000080><center>**Visual Studio Code使用心得**</center></font>

難度：★入門

## 安裝
* Google VS Code：

* 下載安裝檔。注意要下載正確的位元版本：

* 記住安裝檔存到哪裡：

* 下載好後即可點選安裝：

* 執行：

* 基本上都是「下一步」即可。

* 能不接受嗎？

* 設定VS Code安裝到哪裡。如果電腦有C:有D:，當然是裝在D:(common sense)。附圖因為是虛機(VM)，沒有D:，只好裝在C:。

* 下一步。

* 勾選「建立桌面捷徑」。其餘項目不必更改。

* 開始安裝。

* 安裝成功。

## 設定
* 檔案 -> 喜好設定 -> 設定：
* 請展開大項目：
* 點項預設值左的「筆」修改該項目：
* 這項放在「編輯器」：
* 建議修改這些設定：
* 選擇color theme：
* 選一個您最喜歡的配色，建議選深色背景者：

## 進入VS Code

除了點選圖示外，也可在console下輸入:
d:\Python><span id='r'>code</span>
進入VS Code。

## 新增組態

如果每次按<F5>或<Ctrl+F5>欲執行程式時，出現如下圖的選單，得點選Python才能跑下去的話：

只要新增一個組態，即可一勞永逸，讓那個惱人的選單以後不再出現：

不過選完「新增組態」後第一次按<F5>或<Ctrl+F5>，還是會跳出那個選單，請選Python：

選Python後，會跳出一個launch.json檔案，可以不必管這個檔案，直接關掉即可。

再按<F5>或<Ctrl+F5>應該就不會出現那個選單了。如果還是出現，可以先「開啟資料夾」(就是開啟.py檔所在的資料夾)，再新增組態：


依筆者經驗(VS Code v1.23.1)，這樣應該就萬無一失，保證可以刪除那個選單。

## 單步執行
單步執行是debug的利器。VS Code的程序是先按<F5>進入debug mode，然後再按<F11>即可單步執行。但如果您的VS Code按<F5>後無法進入debug mode，一按<F5>程式即自動跑完，依筆者目前測試結果，可用下列兩個方法解決：
* 先在程式開始執行的地方(import等不算，所以不一定是第1列)加入一個「中斷點」，方法是游標停在欲設中斷點處按<F9>，或用滑鼠點選行號左邊地方。如出現一個大紅點，那紅點就是中斷點(如下圖)。這時按<F5>即可進入偵錯模式，<F11>單步執行。設定監看變數也沒有問題了。
* 如果不想每次都得先製造中斷點才能單步執行，也可以在launch.json檔案上設定。請對照下圖：
以預設組態<span class='font115'>`Python: Current File`</span>^(1)^為例，請先點選齒輪^(2)^開啟launch.json([這篇筆記有介紹json](https://hackmd.io/s/r14d-nn3-))並修改內容^(3)^，要修改的是其object中key(name)為<span class='font115'>`"configurations"`</span>那個條目的value。<span class='font115'>`"configurations"`</span>是個array，array的每一個元素都是object，找出<span class='font115'>`"name": "Python: Current File"`</span>的object，通常就是<span class='font115'>`"configurations"`</span>的第1個元素。<font id='r'>看看有無<span class='font115'>`"stopOnEntry"`</span>這個key/name，有者修改，無者新增。將其value設定或修改為<span class='font115'>`true`</span></font>^(4)^(都小寫)後存檔。經過這個步驟，就算沒有設定中斷點，按<F5>都會進入debug mode，允許單步執行或監看變數。

筆者的習慣是不設定<span class='font115'>`"stopOnEntry": true`</span>。維持按<F5>和按<Ctrl+F5>效果相同，都不進入debug mode，真要單步執行時再手工設定斷點。好處是在不須單步執行(多半情形)下，按單鍵<F5>即可執行到底，比按<Ctrl+F5>方便。

如何取捨請自行依個人喜好決定。

## 一些好用的hot keys(待補...)

* Ctrl + /：
* 多列一起內縮或反內縮：
* Alt + ↑↓：
* F2：

:::success
<center>Happy VS Coding.</center>
:::

###### tags: `Visual Studio Code` `VS Code`

<style type="text/css">
body{
}
#r{
color: red;
font-weight: bold;
}
#c{
color: #DC143C;
font-weight: bold;
}
#cg{
color: #008248;
font-weight: bold;
font-size: 180%;
}
#mc{
color: #A63732;
font-weight: bold;
font-size: 180%;
}
#m{
color: #FF00FF;
font-weight: bold;
}
.r{
color: red;
font-weight: bold;
}
.titleLev1{
color: #000080;
font-family: 'consolas';
font-weight: bold;
font-size: 110%;
text-align: center;
}
.titleLev2{
color: #B22222;
}
.titleLev3{
color: #008080;
}
.titleLev4{
color: #C71585;
}
#b{
color: #00008B;
}
#dk{
color: #1E90FF;
}
.t{
color: #FF6347;
font-size: 110%;
font-weight: bold;
}
#dr{
color: #B22222;
}
.font500{
font-weight: bold;
font-size: 500%;
}
.font200{
font-weight: bold;
font-size: 200%;
}
.font150{
font-weight: bold;
font-size: 150%;
}
.font130{
font-weight: bold;
font-size: 130%;
}
.font125{
font-weight: bold;
font-size: 125%;
}
.font115{
//font-weight: bold;
font-size: 115%;
}
.font110{
font-size: 110%;
}
.font108{
font-size: 108%;
}
.font105{
font-size: 105%;
}
#cg120{
color: #008248;
font-weight: bold;
font-size: 120%;
}
.classA{
color: #66E141;
font-weight: bold;
font-size: 130%;
}
.classB{
color: #41C6E1;
font-weight: bold;
font-size: 130%;
}
.classC{
color: #E1B141;
font-weight: bold;
font-size: 130%;
}
.tableTitle{
color: #B22222;
font-weight: bold;
text-align: center;
}
.high{
color: blue;
font-weight: bold;
}

</style>