# 軟體配置
本文記錄幾個我個人慣用開發軟體的常用套件、指令等，下方指令皆為 Windows 版本

## Google Chrome專題
### 常用套件、插件－從 Chrome web store 下載
Type Sample：馬上知道瀏覽網頁文字字體及大小，可以直接以書籤形式使用
Dimensions：知道網頁中元素的距離
Pesticide for chrome：可了解原始網頁元素分布情況
wappalyzer：可以知道網站使用哪些語言框架，紅色符號才能用
JSONview：分析JSON檔結構
Vue.js Devtools：檢視Vue內容的console
windows resizer：自由設定瀏覽模式及大小

### Chrome 線上應用程式
web server for chrome：創造本地網頁伺服器，需要載入資料夾

本機伺服器－127.0.0.1

勾選下方Accessible on local network、also on Internet後關閉再開啟，可產生192.168.1.102供同路由器下(同網域)其他人讀取

### Chrome dev tool
可在這邊測試完CSS、JS再貼進編輯器

#### Element
主要看HTML、CSS，也可觀察元素上綁定的JS EventListener事件
右鍵breakon設定DOM事件斷點(到該事件執行前會暫停，用/source看)

#### Network
可選擇頻寬，分別顯示載入檔案數量及種類，最好都在 3 秒內完成載入
盡量少用自動播放動畫以維持效能

#### Console
可直接測試JS碼、協助除錯
　`console.dir`可見所有屬性方法，沒被所有瀏覽器支援
　`console.table`可用表格方式成內容
　`console.time(var)`、`console.timeEnd(var)`兩命令相加可知執行var所需時間

##### 錯誤類型
RHS Right-hand side右側變數取值 如`console.log(ad)`、`var man = ming`，執行時才出現錯誤

LHS Left-hand side左側變數賦值 如`var answer = 6` 出錯表示左邊沒辦法被賦值，編譯過程就會出錯
本機伺服器有錯誤不修正就會卡住該點，下面的程式都無法運行

#### Source
可觀察JS部屬到執行過程、EventListener事件、設定斷點(先不要執行該行)，即時修改並儲存

載入後要重新整理才能使用，不行就先暫停再重整

##### 右邊或下方工具列
Pause/resume script execution－F8 進到下一個斷點
Step over next function call－F10 依程式運作邏輯向下一步(不進函式)，不管斷點
Step into next function－F11 依運作邏輯向下一步(進函式)，不管斷點
Step out of current function－Shift + F11 依運作邏輯跳出現今函式，進入下個命令
Step－F9 依實際程式運作邏輯向下一步(進函式)不管斷點
最後藍色暫停鍵/pause on exceptions表示以錯誤時為斷點

Watch監測特定變數變化
Call stack、Scope觀察執行堆疊及作用域
xhr breakpoint 可以設定關鍵字、留空就是監視各種相關事件、也可用於查詢使用api

#### Performance
可先錄製動作後進行分析
FPS (每秒畫面禎數) 1 秒 50-60 較為流暢
下面 summary 可觀察 scripting(運行程式)、rendering(排版)、painting(繪製)

#### Memory
可於錄製後分析記憶體用量，function、log都會使用，如果資料沒人參考就會釋放

## VSCode專題
### 指令
開啟檔案－Ctrl + p
關閉檔案－Ctrl + w
關閉所有檔案－Ctrl + K Ctrl + w

#### 檢視：
開關 Sidebar(檔案總管列出檔案處)－Ctrl + b
Sidebar切到檔案總管－Ctrl+Shift+e
Sidebar切到延伸模組－Ctrl+Shift+x
　@builtin顯示內建延伸模組
開關 Panel底欄狀態列－Ctrl+j
主控台－Ctrl+~(ESC下方鍵)可叫出終端機
游標跳轉到頁頭－Ctrl + Home
游標跳轉到頁尾－Ctrl + End
展開區域代碼－Ctrl + Shift + ]
折疊區域代碼－Ctrl + Shift + [

切換編輯器－Ctrl+PageUp、Down

//#region ... //#endregion可創造自選摺疊範圍

#### 選取：
選取同字元－Ctrl+d每次向後選一個，其後可用Ctrl+左右在內容和tag間調整游標位置，
　Ctrl+Shift+l一次全選同字元

F2－選取並更改專案中特定函式、以及由此函式生的建構instance，例如下面book1

function Book1(title, author) {
  this.title = title;
  this.author = author;
}
new Book1("War of the Worlds", "H G Wells");

Alt+Shift+右－向右從tag增加選取內容(或相反)，依序為單字、用連字號-或_連接的字、一個變數、括號1、括號2、一行內的全命令、一行全命令連縮排、全選
Alt+Shift+Ctrl+方向鍵－一次一個字元的選取

壓住滑鼠中鍵拖曳－垂直選取特定範圍
Alt+Ctrl+上下、Alt+Click以增加游標數

#### 內容：
減少縮排－Shift+Tab
整理排版－Alt+Shift+f
開上方新行－Ctrl+Shift+Enter
開下方新行－Ctrl+Enter
同指令開新行複製貼上－Alt + Shift + 上下
　剪下貼上整行只要游標在同行上就可進行
特定行指令上下搬動－Alt+上下
刪除一整行－Ctrl+Shift+k

將某行改為註解－Ctrl+/
　塊區域註釋－Shift + Alt + A

加入資料型別檢查－檔案中加入 // @ts-check

切換語言－Ctrl+Shift+p開啟套件主控台→輸入display language

檢查各插件使用記憶體－Ctrl+Shift+p開啟套件主控台→輸入Developer: Open Process Explorer

#### VSCode設定專題
打開設定－Ctrl+, 設定模式有json文字跟GUI圖形兩種，又可分全域跟工作區兩種

全域在settings.json中設定以下命令可增加emmet縮寫支援

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html",
  "plaintext": "jade"
},
"emmet.triggerExpansionOnTab": true,

工作區則先點工作區再開啟settings.json

#### VSCode自訂snippet專題
使用者設定→設定→使用者程式碼片段→新增全域程式碼片段
設定`"editor.snippetSuggestions": "top"`, 把自訂snippet放到建議列表前端
　　`"editor.TabCompletion": true`, Tab自動轉換不用等
`${1:預設已輸文字}、${2|one,two選項|}`為參數概念，可一次改變所在位置內容，可用Tab切換
$0表示游標最後位置，亦可用Tab到達

此prefix指令可設定多組呼叫關鍵字

"add Copyright notice": {
　"prefix": [ "header", "stub", "copyright"],
　"body": [...]
}

#### 搜尋：
在單檔中搜尋－Ctrl+f
搜尋專案資料夾內各檔案－Ctrl+Shift+f

在單檔中取代－Ctrl+h

搜尋取代時可用regex，萬用字元為(.+?)，被替代的字元依序為$1、$2
[abc] 字元集合(a、b或z)
[^abc] 負值字元集合 (任何字元, 除了abc)
^ 匹配字串的開始
$ 匹配字串的結束
\b 匹配單詞的開始或結束
{n} 重複n次
{n,} 重複n次或更多次
{n,m} 重複n到m次
{n,m}? 重複n到m次，但儘可能少重複
{n,}? 重複n次以上，但儘可能少重複

### 套件、插件
#### 已安裝
indent rainbow可用於辨別indent
Bracket pair colorizer增加大括號物件標示
git lens補充git功能
Code Spell checker檢查拼字
favorites製作檔案書籤
AutoFileName自動補完檔名
Auto Rename Tag多數情況下同時修改開頭跟結尾標籤，特別是對齊後的(但很慢...)
Path IntelliSense自動補完路徑
vetur標示vue物件及自動排版整個檔案
`<script lang="ts">`自行設定使用語言
"vetur.format.options.TabSize": 2,
"vetur.format.options.useTabs": false 可被格式化繼承，但會被.prettierrc和.eslintrc.js覆蓋

Prettier - Code formatter格式器、排版，安裝後記得設定editor.defaultFormatter

Preview on Web Server建立本地伺服器，用vscode會即時更新
　Ctrl+Shift+l可以瀏覽器開啟目前工作
Ctrl+Shift+v透過side panel開啟目前工作
Ctrl+Shift+r重啟伺服器，只能在command palette使用
Ctrl+Shift+s關閉伺服器，只能在command palette使用
Ctrl+Shift+u顯示UI頁面，可在UI頁面調整各種功能選項
不能用可以更換為ritwickdey.LiveServer

#### 未安裝
project manager製作專案書籤
Copy Relative Path按右鍵複製相對路徑
Regex Previewer預覽Regex
change-case轉換命名風格

#### 次要插件
polacode轉程式碼為圖片，選取程式碼後按Ctrl+Shift+p輸入pola即會輸出檔案
vscode-pdf用VSCODE讀PDF檔
excel viewer對檔案按右鍵開啟

#### 插件相關指令
cmd+Shift+p 輸入 config recommend ，會在專案下建立 .vscode/extensinos.json
把擴充工具ID放入可以透過@recommended推薦給團隊

#### 參考插件
Material Icon Theme - pkief.material-icon-theme
Material Theme - equinusocio.vsc-material-theme
Cobalt2 Theme Official - wesbos.theme-cobalt2
advanced-new-file - patbenatar.advanced-new-file
Markdown All in One - yzhang.markdown-all-in-one
jumpy - wmaurer.vscode-jumpy-CSS指令自動帶入各種prefix

## Sublime專題
Goto/Goto anything主要處理檔案路徑style.css :98表示第98行Ctrl+p
Goto/Goto Symbol .p表示特定selector @可總覽所有selector Ctrl+r

Edit/text/insert line before Ctrl+Shift+Enter
Edit/text/insert line after Ctrl+Enter

該行文字直接轉為註解 Ctrl+?
選取同字串 Ctrl+d

開啟套件主控台 Ctrl+Shift+p

### 套件及指令
HTML/CS/JS prettify----Ctrl+Shift+h程式碼自動對齊
colorpicker----Ctrl+Shift+c叫出調色盤
Color Highlight可在色碼、顏色名稱底下顯示該顏色
AutoFileName自動補完檔名

## Emmet專題
當右下角為html時，輸入!再按Tab會跑出html基本指令
輸入link:css再按Tab可帶入CSS檔案連結指令
輸入p*3等tag後再按Tab會長出三個<p></p>
輸入ul>li再按Tab會自動帶入<ul><li>>意為前包後 +意為接續
Tab#id Tab.class1.class2再按Tab可自動帶入屬性，如果沒打Tab部分則會自動帶入div
$可用於替代序列性數字、$$表示01-99、$@3表示從3開始、$@-3表示反向數字從3開始
表示長度時px不用打、p代表percent
lorem可自動輸入假字以供檢視樣式，lorem3表示只要三個字，lorem*3表示3倍的假文
tag[attri=XX]{文字內容}
包裝：選取文本後叫出主控台，再輸入div>ul>li*|t
沒*號表示用一行，剩下會被*填滿、|t可刪除1、1.序數