Day21 【牙起來】 Angular常用設定、快捷鍵 - Webstorm IDE

花一天的篇幅來提及Webstorm IDE的程式碼風格 與 快捷熱鍵

帶大家避開一些 團隊合作時程式碼風格不同 的坑
以及開發常用熱鍵，掌握這些技巧可以大幅提升開發速度

IDE外觀(Appearance)

程式碼字體(Code Font)

Editor > Font
或直接搜尋font

更換Terminal預設Shell

如果macOS要更換成zsh的話

Tools > Terminal > Application Settings
或直接搜尋terminal

終端機字體(Terminal Font)

Editor > Color Scheme > Console Font
或直接搜尋console font

指令歷史保留大小(Terminal History)

Editor > General > Console
或直接搜尋commands history size

程式碼風格(Code Style)

Typescript 與 Javascript區塊的設定介面非常相像
可參照以下的設定方式，自行再調整Javascript介面設定

大括號兩側空白 - Typescript

Editor > Code Style > Typescript > Spaces

• Object literal braces 物件旁大括號
• ES6 import/export braces import 時大括號

import時換行 - Typescript

Editor > Code Style > Typescript > Wrapping and Braces > ES6 import/export

預設為 Chop down if long
建議調成 Do not wrap

• Do not wrap: 不換行
• Wrap if long: 太長再換
• Chop down if long: 能換盡量換
• Wrap always: 遇到逗號要換

預設使用單引號 - Typescript

Editor > Code Style > Typescript > Punctuation
或直接搜尋single quote

• single always 總是使用單引號/雙引號
• double in new code 新代碼使用單引號/雙引號

參數對齊 - Typescript

Editor > Code Style > Typescript > Wrapping and Braces
或直接搜尋Align when multiline

• Function declaration parameters 函式參數對齊
• Function declaration arguments 函式引數對齊
• Chained method calls 連鎖方法呼叫對齊
• for() statement for迴圈敘述對齊

註解comment方式 - HTML

Editor > Code Style > HTML > Code Generation

• Line comment at first column 行註解位置從第一欄開始
• Block comment at first column 區塊註解位置從第一欄開始
• Add spaces around block comments 註解內兩側留白

檔案尾行換行

Webstorm預設會在儲存時將檔案尾行留一行空白
Editor > General >Ensure every saved file ends with a line break
或直接搜尋 end with line break

程式碼太長折行

Editor > Code Style > General > Hard wrap at
或直接搜尋Hard wrap

可調整當超出幾個字元時自動換行

這邊調整是全域的
可個別再到 HTML、Javascript、Typescript 底下針對語言調整

專案範圍設定

排除搜尋的檔案與資料夾

可將檔案或資料夾排出搜尋(ex: 尋找宣告或引用、程式碼搜尋)
右鍵 > Mark Directory as > Excluded

若不慎動到重要設定無法復原，可刪除專案內 .idea 資料夾來回到預設

快捷鍵、熱鍵(hotkey)

• 游標指的是 滑鼠游標
• 光標指的是 鍵盤閃爍游標

以下快捷鍵以 Windows 為主
macOS 把文章中的 Ctrl 更換為 Command 即可

基本快捷

上一步(Undo) Ctrl + Z

下一步(Redo) Ctrl + Shift + Z

本地歷史儲存(Local History)

Undo、Redo 有次數限制 (且無法自訂次數)
加上會占用龐大記憶體(Memory)

於是Webstorm有個替代方案是Local History，記錄檔案的各種異動

透過 Shift + Shift 搜尋 Local History可將檔案恢復成以前的樣子

local history 是儲存在硬碟(Disk)中
可透過搜尋 local history 修改歷史保留天數

即刻儲存(Save) Ctrl + S

IDE會偵測變更自動儲存，但並非隨時隨地
有時候會過一下才儲存、或者遇到卡住的情況
可以手動儲存，立即儲存變更來加快速度

搜尋程式碼 Ctrl + F

單行註解、取消註解(Comment) Ctrl + /

多行註解 Ctrl + Shift + /

輸入法要切成Eng模式

中文輸入法只能按數字鍵區塊的/

導覽 追蹤程式碼(Navigate、Trace Code)

尋找宣告或引用 Ctrl + 左鍵、Ctrl + B

導到宣告或引用的地方按 Ctrl + 左鍵
或者讓光標停留在關鍵字上按 Ctrl + B

上一個光標位置 ctrl + alt + ←

下一個光標位置 ctrl + alt + →

尋找檔案

在專案中尋找檔案 Shift + Shift

搜尋任意檔案名稱

最近開啟過的檔案(Recent File) Ctrl + E

選擇要開啟哪個檔案

找出檔案在專案的位置 alt + F1

按1 Project View

程式碼搜尋、取代

在專案中尋找程式碼 Ctrl + Shift + F

可使用 File mask 依照檔案名稱來限制搜索範圍

• 問號?代表 1個 任意字元
• 星號*代表 0~多個 任意字元

ex:
*.html、store*、sto??.component.html
皆可以搜尋的到 store.component.html 檔案

在專案中取代程式碼 Ctrl + Shift + R

排版

程式碼排版 Ctrl + Alt + L

官方介紹-快捷鍵