# 個人開發環境設定 & 介面美化

## iterm2 環境設定

### 1. Install homebrew

> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

### 2.Install Oh My Zsh

> sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

### 3.Install powerlevel10K (介面美化)

>https://github.com/romkatv/powerlevel10k

>[安裝流程傳送門](https://hackmd.io/KqwVplxjRbWi-C-ZsSOklw)

### 4.Install Zsh-autosuggestions (自動填入)

>https://github.com/zsh-users/zsh-autosuggestions

Zsh-autosuggestions是一個小工具，可以記錄你曾經輸入過的指令，並提示在後面。

實際使用會類似下圖所示黃色的部分↓
<img width="646" alt="截圖 2020-11-05 20 26 59" src="https://user-images.githubusercontent.com/14950037/98241071-5c16e000-1fa5-11eb-8727-ca87f69214c1.png">

### 5.Install zsh-syntax-highlighting (指令Highlight)

>https://github.com/zsh-users/zsh-syntax-highlighting

zsh-syntax-highlighting是一個小工具，可以在指令錯誤時用顏色提醒你。

實際使用會如下圖顯示紅色高亮↓
<img width="649" alt="截圖 2020-11-05 20 31 36" src="https://user-images.githubusercontent.com/14950037/98241594-2292a480-1fa6-11eb-9af5-5e275de5d819.png">
修正錯誤後會回復原來正常顏色(這邊我少打了空白)↓
<img width="643" alt="截圖 2020-11-05 20 31 59" src="https://user-images.githubusercontent.com/14950037/98241736-58d02400-1fa6-11eb-8729-b6ade229b5cd.png">

### 6.Download iterm2 color themes (介面主題修改) --- Tomorrow Night Eighties

>https://iterm2colorschemes.com/

這個網頁提供了許多的配色設定，我自己是使用Tomorrow Night Eighties這個配色主題
但其實iterms本身就有一些主題可以更改配色
以下列出修改前跟修改後的配色差異↓ 我自己的修改沒有差異很大 只是變得稍微柔和一點的灰色
<img width="647" alt="截圖 2020-11-05 20 42 00" src="https://user-images.githubusercontent.com/14950037/98242705-d34d7380-1fa7-11eb-86d0-c3a1d5473ead.png">
<img width="651" alt="截圖 2020-11-05 20 43 06" src="https://user-images.githubusercontent.com/14950037/98242716-d6e0fa80-1fa7-11eb-89a3-f5d5040eb952.png">

### 7.Adjust ~/.zshrc(調整介面設定檔)

> open ~/.zshrc

<br>

## VSCODE 常用插件介紹
* Mithril Emmet ： 自動填入程式碼結構（open tag & close tag）
* open in browser ： 新增使用瀏覽器開始網頁快捷鍵
* Liver server ： 讓網頁在Live server上開啟
* Beautify ： 新增快捷鍵整理Code
* Ｍaterial Theme ： VSCODE介面主題
* Ｍaterial Icon Theme ： 檔案Icon 主題

## command line 常用指令整理

### `pwd` ： 顯示目前路徑
* Print Working Directory

### `ls` ：列出當前路徑下內容(檔案 & 資料夾)
* List

### `cd` ： 前往指定資料夾
* Change Directory
* 更多用法
* `cd ..` ：回上一層
* `cd ~` ：回根目錄

### `mkdir`： 創建資料夾
* MaKe DIRectory

### `rm` ： 刪除檔案
* Remove
* 更多用法
* `rm -r` ：刪除資料夾及內含檔案
* `rm -f` ：強制刪除(不會有訊息提示)(慎用)

### `mv` ： 移動檔案或改名
* Move
* 更多用法
* `move file folder` ：將`file` 移動至 `folder`
* `move file new_name` ：將`file`改名為`new_name`
### touch ： 創建檔案
* `touch index.html`：創建一個index.html檔案
### cat --- 顯示檔案內容

### code --- 開啟VSCODE (需先在VSCODE開支援)↓
> command + Shift +P --- enter Install 'code' command in PATH command.

### 下方為實際使用的Gif圖片供參考↓

先`pwd` 確認路徑，接著`ls` 列出資料夾，`cd coding`進入coding資料夾
使用`mkdir test`創建test資料夾，`cd test` 進入test資料夾，再利用`touch index.html`創建index.html檔案
使用`rm index.html`刪除剛剛創建的index.html檔案，`cd ..`回到上層coding資料夾，使用`rm -r test`刪除test資料夾