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

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

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

# 介面

## 關閉上方懸浮程式碼


> `Editor > General > Sticky Lines`
> 或直接搜尋`sticky`


## git紀錄顯示


> `Editor > Inlay Hints`
> 或直接搜尋`inlay`


# 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` 註解內兩側留白
>
> 

## self closing tag 留白 - HTML

> `Editor > Code Style > HTML`
> 或者直接搜尋 `in empty tag`

ex: `<img src="" alt=""/>` => `<img src="" alt="" />`

`<br/>` ⇒ `<br />`


## 複製貼上時維持縮排格式不變，或是重新排版

> `Editor > General > Smart Keys > Reformat on paste`
> 或直接搜尋`paste`


可調整成`indent block`

## 檔案尾行換行

> 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` 即可

## 基本快捷

[**官方快捷鍵介紹**](https://www.jetbrains.com/help/idea/mastering-keyboard-shortcuts.html#choose-keymap)

#### 上一步(Undo) `Ctrl + Z`

#### 下一步(Redo) `Ctrl + Shift + Z`

#### 本地歷史儲存(Local History)
> `Undo`、`Redo` 有次數限制 (且無法自訂次數)
> 加上會占用龐大記憶體(Memory)
>
> 於是Webstorm有個替代方案是`Local History`，記錄檔案的各種異動
>
> 透過 `Shift + Shift` 搜尋 `Local History`可將檔案恢復成以前的樣子
>
> 
>
> `local history` 是儲存在硬碟(Disk)中
> 可透過搜尋 `local history` 修改歷史保留天數
>
> 

#### 程式碼補齊全(Code Completion) `Ctrl + Space`
> Win10會遇到與繁體中文、英文切換的快捷鍵相衝突
> 解法1: 按`Alt+Shift`將輸入法切換成Eng模式
> 解法2: 更改Webstorm快捷鍵
> 

#### 即刻儲存(Save) `Ctrl + S`

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

#### 搜尋程式碼 `Ctrl + F`

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

#### 多行註解 `Ctrl + Shift + /`
> Win10輸入法要切成`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` 檔案

可搜尋`Maximum number of results` 來調整搜尋結果筆數


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

## HTML排版 (與VScode同樣格式)
#### 程式碼排版 `Ctrl + Alt + L`

若要排版排的跟 VS code 一模一樣，排出來的版互不影響


注意是否有被其他config override設定


---

# 套件 (Plugins)

## TailWindCSS 順風CSS

### 預覽CSS


輸入class名稱輸入到一半、跳出提示的時候按下`Ctrl + Q`


點擊出現的三個點，開啟`Show Automatically During Completion`

## 使用 Prettier 來排版

> npm install --save-dev --save-exact prettier
> npm install --global prettier

在設定中搜尋`Prettier`，勾選要使用的版本


然後同時按下 `Ctrl、Alt、Shift、P` 就可以透過Prettier來排版囉

(mac: `shift、option、command、P`)

// TODO

關閉code vision

搜尋 Zen Html

在 Editor > Live Templates 底下

但調了沒作用，還不知道這是幹嘛的


## 不在IDE介面內的設定

貼入大檔案的.sql(100MB↑)時
遇到 `Content is too large (xx MB), limit is xx MB` 此錯誤

### Windows

要到 `C:\Program Files\JetBrains\WebStorm\bin\idea.properties` 進行調整

idea.max.intellisense.filesize
idea.max.content.load.filesize

不過不建議調整到太大，會非常的卡頓
調整10倍大之後貼上大檔案，電腦直接卡死
難怪不讓我們在介面中調整