Windows 10上整合Vs code的Oh-my-zsh

2018/10更新:

Windows 10新版本,已無需啓動Linux子系統,另外下面新增字體、主題安裝與Nodejs版本提升。

前言

看到線上讀書會的有一個講者用的Terminal[1],發現原來Terminal有那麼方便的功能,讓我立馬生火XD 花了一點時間研究怎麼安裝,踩了一下雷並在這邊分享心得。說到踩雷,我發現關於Oh-my-zsh繁體中文的心得分享資源,非常的少啊,於是激起我想要寫這篇文章的動力。

流程

啟動Linux子系統 -> 安裝Zsh -> Oh-my-zsh安裝與設定 -> Vs code整合設定 ->結束!

啟動Linux子系統

如果你沒有進行秋季創作者更新(Fall Creators Update)的話,請你跟著我的做法:

設定 -> 更新與安全性 -> 開發人員專用 -> 點擊“開發人員模式”

開啟CMD或者Powershell,輸入OptionalFeatures.exe,跳出來的目錄下選擇“適用於Linux的Windows子系統(搶先版(Beta))”,並重啟電腦。電腦重啟後,打開CMD或者Powershell,輸入bash就能開始安裝Linux子系統。

2018/10 月更新:

目前更新到最新版本的windows後,不需要這樣特地開啓,只要到Microsoft Store搜尋『Ubuntu』下載安裝,下載後開啓按照他的指示安裝就行了。

安裝Zsh

在安裝Zsh之前,要在Bash環境下設定:

安裝 cURL
sudo apt-get install curl

安裝 git
sudo apt-add-repository ppa:git-core/ppa
sudo apt-get update
sudo apt-get install git

最後安裝 Zsh
sudo apt-get install zsh

安裝完畢之後,你可以先在bash裡面先試試看輸入zsh,如果他變成比較短的開頭,代表你成功安裝zsh!

Oh-my-zsh安裝與設定

這邊提醒大家,

一切的改動請在Terminal完成!![2]
一切的改動請在Terminal完成!!
一切的改動請在Terminal完成!!

千萬不要在其他的Windows編輯器像是Sublime Notepad Vscode等來編輯bashrc、zshrc等文檔
做錯的話就要前功盡棄了!

安裝Oh-my-zsh
curl -L https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh | bash

複製設定檔,通常在安裝zsh之後,需要我們自行設置~/.zshrc,這邊為了防止出錯,直接先套用Oh-my-zsh的預設模板檔案:
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

目前來說,你的Oh-my-zsh已經成功安裝了!如果要啟動他,你要先打開Powershell -> bash -> zsh,但是這樣還是不夠方便,下面將預設開啟bash將會直接打開zsh:

在Bash Terminal輸入
nano ~/.bashrc

在Terminal將會跳出.bashrc的編輯畫面,在第一段與第二段的#號段落之間,輸入:
bash -c zsh

建議直接手打,減少前功盡棄的機會。範本參考鏈接

再次提醒,上面的段落,
不要用Vscode、Sublime Notepad等編輯器編輯!!
不要用Vscode、Sublime Notepad等編輯器編輯!!
不要用Vscode、Sublime Notepad等編輯器編輯!!

可選的設定

主題字型

因為Oh-my-zsh的主題大部分都用Powerline字型,所以我會推薦大家安裝,這邊的環境不需要用bash,一般的powershell或者cmd就好了,目錄在隨便一個都可以(照指示安裝後會刪除檔案)

git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
./install.sh
cd ..
rm -rf fonts

2018/10 月更新:

目前我會選擇我想要的字體,下載ttf檔案,直接用window安裝。
設置字體:開啓Ubuntu -> 點擊左上角Icon -> Properties -> Font -> 安裝好的檔案。
如果找不到的話請嘗試重啓和重裝。

Random主題

除此之外我也會讓zsh的主題random,在Bash環境下:

nano ~/.zshrc

如果有成功把Oh-my-zsh的設定模板複製,就能看到文檔中會有ZSH_THEME,把他改成
ZSH_THEME="random"
再按Ctrl+X,按保存

如果有一天random到你喜歡的主題,可以輸入這個指令查看:
print $RANDOM_THEME
到時候就能自己固定你喜歡的主題

2018/10 月更新:

目前會固定使用bullet-train,配合的字型爲Menlo for Powerline,推薦大家使用,大家可以試試看XD

安裝插件

和上面一樣,在Bash環境下:

nano ~/.zshrc

一直按向下鍵,找到沒有#號的plugins,理論上一開始括號裡面會有git,你可以參考我的設定:
plugins=(git wd autojump zsh-syntax-highlighting zsh-autosuggestions)

Vs code整合設定

到了這邊,其實你就能好好使用Oh-my-zsh了,但是我習慣在Vs code上使用Terminal,因此另外加上設置:

Vs code -> 檔案 -> 喜好設定 -> 設定

就會開出你原本的設定Json檔,在右邊的下面加上

"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
"terminal.integrated.shellArgs.windows": ["-c", "zsh"]
"terminal.integrated.fontFamily": "Anonymous Pro for Powerline",

如果你用的是Vs code 64bit版本,請改成

"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
"terminal.integrated.shellArgs.windows": ["-c", "zsh"]
"terminal.integrated.fontFamily": "Anonymous Pro for Powerline",

記得要在前面加上逗號哦!不過後來我發現字體還是有點怪怪的,便移除了最後一行fontFamily的設定
之後在你的文件下,按Ctrl+`就能開啟你文件目錄下的Terminal了!

安裝npm

之前在Windows下安裝的npm是無法被Linux的Bash抓到,因此要另外在Bash安裝npm:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g npm
npm --version

並在~/.zshrc第一段的#號段落下,加上這些:
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games

障礙排除

如果你遇到Input/output error,個人的建議是,你把Ubuntu刪除再重新安裝問題參考鏈接參考鏈接

參考連結:

  1. https://youtu.be/rsaqfyDLzQM?t=1m13s
  2. https://blogs.msdn.microsoft.com/commandline/2016/11/17/do-not-change-linux-files-using-windows-apps-and-tools/
  3. https://gist.github.com/evdokimovm/67e4fcd938af98528aa108574626e522#file-bashrc-L5
  4. http://www.jianshu.com/p/fe244b1c7737
  5. https://github.com/robbyrussell/oh-my-zsh/issues/5725
  6. https://www.jazz321254.com/visual-studio-code-zsh/
  7. https://www.zhihu.com/question/49284484
  8. https://winsmarts.com/run-oh-my-zsh-as-integrated-shell-in-vscode-on-windows-7d69f72bafa3
  9. https://evdokimovm.github.io/windows/zsh/shell/syntax/highlighting/ohmyzsh/hyper/terminal/2017/02/24/how-to-install-zsh-and-oh-my-zsh-on-windows-10.html
  10. https://github.com/robbyrussell/oh-my-zsh#manual-installation
  11. http://icarus4.logdown.com/posts/177661-from-bash-to-zsh-setup-tips
  12. https://github.com/Microsoft/WSL/issues/904
  13. https://blog.miniasp.com/post/2018/06/15/My-Windows-Subsystem-for-Linux-WSL-Setup-2018.aspx