自分好みの開発環境を作って開発モチベをあげる

随時追記
細かいところはあとで書きます

## 対象者
- エディタはVSCodeがいいよ！とか言われたものの何もカスタムしないまま使ってる人
- ターミナルエミュレータはMac標準、なにも弄ってないですみたいな人
- 標準のbashのままみたいな人
- 言語ごとのExtentionは除外

## VSCode

### とりあえずターミナルからVSCodeを起動できるようにする
1. `cmd+shift+p`でメニュー開いて`Install 'code' command in PATH`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177957/37a9c918-0a43-2159-f028-eb4c93125f35.png)


### エディタ用フォント
合字設定はお好みで

- [FiraCode](https://github.com/tonsky/FiraCode)
- [Cascadia](https://github.com/microsoft/cascadia-code)

1. `cmd+,`でユーザー設定開く
2. 検索Boxに`font`入力してfilter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177957/c4902a6b-de1b-02aa-edfc-b3f4f0c9e02a.png)
3. フォントファミリーを設定(名前にスペース含むフォントは囲む)
4. フォントサイズはお好み
5. リガチャを有効にする場合は`font Ligatures`の下のsetting.jsonで編集をクリック
6. `"editor.fontLigatures": true`をJSONに追記する

### ターミナル用フォント
- [RictyDiminished Powerline](https://github.com/mzyy94/RictyDiminished-for-Powerline)
- Nerdfontsでpatch当てたりすると、やり過ぎ感はあるが楽しい
- https://eng-blog.iij.ad.jp/archives/421
- 標準はエディタと同じフォントになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177957/8ff7306f-9c9d-9c2c-318d-0b09bd32167f.png)


### カスタムテーマ
- 標準のままはイヤ！
- https://vscodethemes.com ここで流行のテーマ見れるから好きなの入れる
- 好きなのないなら自分でテーマ作ってみる
- http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai

### ファイルアイコン
- アイコンないとエクスプローラ見づらい
- https://marketplace.visualstudio.com/search?term=icon&target=VSCode&category=Themes&sortBy=Relevance 好きなの選ぶ
- だいたいメジャーどころ[Material icon theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme),[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

### Git関連
- Gitlogをエディタ上で表示したり、コミット探したり[eamodio.gitlens]
(https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- GitTreeを表示したり、操作する[git graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
- PullReqeustをVSCodeで完結[Github Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

### Docker開発の人向け
- dockerfile&docker-compose シンタックスハイライト、Linter、エクスプローラー[vscode-docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
- RemoteDevelopment sshやLocalコンテナ上にVSCodeの環境を接続
[vscode-remote-extensionpack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

### ファイル周り
- CSVシンタックスハイライト、Linter、SQLっぽいCRUD[rainbow-csv](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
- 設定ファイル系のシンタックス[DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
- Markdownかくなら[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

### その他
- WebAPIたたいたりする[RESTClient](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
- キーマップこれじゃなきゃダメって人は(vim,emacs...)[ここから](https://marketplace.visualstudio.com/search?term=keymap&target=VSCode&category=All categories&sortBy=Relevance)

## ターミナル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177957/417ba33e-3d64-6539-41b4-ea26589e76f4.png)

Macの人はiTerm2が多いのかな?私はOSにかかわらず同じTerminal使いたいので[hyper](https://hyper.is)を推す
インストール方法等は公式見て
Macの人なら`brew cask install hyper`一撃(要homebrew)

### とりあえずフォントファミリーとサイズを変更
1. `~/.hyper.js`をエディタで開く(vimでもVSCodeでもなんでもいい、VSCodeで開く場合`code ~/.hyper.js`で開ける)
2. config.fontSize,fontFamilyあたりを編集する
<img width="805" alt="スクリーンショット 2020-01-29 10.48.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177957/f9a6fe4b-d0b1-9fa0-c6d7-4b99296d6cf1.png">


### [extentions](https://hyper.is/plugins?newest)
`hyper i [extentions]`でインストール可能

- hyper-material-theme(テーマ)
- hyper-tab-icons-plus(タブのアイコンをプロセスごとに変更)
- hyper-search(標準出力の検索)
- hypercwd(別タブで開いたときに同じディレクトリで開く)
- hyper-opacity(背景透過)
- hyper-pane(パネル分割)

### shell
Macのデフォもzshになったことだし、bashのままの人はzsh使ってみよう
fishもいいけどPOSIX非互換でzshに戻った民です
1. 入ってなかったら`brew install zsh`と`which zsh >> /etc/shells`
2. `chsh -s [zshのpath]` でデフォshell変更
3. [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh)インストール`sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"`
4. 好きなプロンプトに変更orインストール([powerlevel10k](https://github.com/romkatv/powerlevel10k)これなんでもありで好き)
5. zshプラグインインストール
とりあえずこのあたり

- https://github.com/zsh-users/zsh-syntax-highlighting
- https://github.com/zsh-users/zsh-completions
- https://github.com/zsh-users/zaw