開発環境をfish + vs codeにしてみた

## はじめに
開発にも慣れてきて、`ターミナル` + `bash` + `sublime`の環境だった開発環境を `iterm` + `fish` + `vscode`に変えてみて、色々な記事を参照したのでそのまとめ記事と自分で入れてみて便利だったものの紹介をしたいと思います。

## itermの導入
初めから入っているターミナルを使っていたのですが、画面の縦分割を楽にしたかったので、itermに乗り換えました。
適当に[ダウンロード](https://www.iterm2.com/)してインストール

## fish, fishermanの導入
こちらを参照して、導入しました。ありがとうございました。
https://dev.classmethod.jp/etc/fish-shell-life/
以前から、`peco` は使わせてもらっていたのでその導入まで書いてあるので是非、入れてみるといいと思います。

fishは環境変数の書き方が違いますので、下記のようにしてください。

```shell:bash_profile
export PATH=$PATH:/usr/local/bin
```
こんな感じで設定していたら、下記のように

```shell:config.fish
set -x PATH /usr/local/bin $PATH
```
と設定する

また、ruby環境の人については下記の記事を参考にしてもらうといいです。
https://qiita.com/honeniq/items/6b1362dd32b458ef441e

## VS codeの導入
ダウンロードはこちらから
https://code.visualstudio.com/

インストールができたら、起動してみます。
すると、日本語で下記のような画面が表示されていると思います。
<img width="1440" alt="スクリーンショット 2018-05-19 17.22.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/167171/a06e5c51-3f71-c43b-6332-de154f2d8304.png">
私の場合は、日本語表示だと使いにくい気がしたので、英語表示に設定します。
vscodeでは、コマンド操作が可能でその機能を使用して設定を行っていきます。
①`cmd` + `shift` + `P`を押すと、画面上部にコマンドパレットが表示されます。
②ここに `language` と打ち込みます。
<img width="634" alt="スクリーンショット 2018-05-19 17.29.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/167171/3e6331c2-746c-6eb9-a806-c1161c6c34ba.png">
③表示されているcommandの中から、 `Configure Language`を選択します。
④開いた設定ファイル(locale.json)のlocaleを `ja` →　'en'に変更する
⑤vscodeを再起動する

ここまでで、言語設定は完了です。

次に、今回、導入した `iterm` + `fish`からvscodeが開けるようにしましょう。
vscodeのdefaltではbashが指定されているので、そこをfishに変更します。
①コマンドパレット(settingと打ってください)から、もしくは `Cmd` + `,` で設定画面を開きます。
②下記のように変更します。

```shell:setting.json
// The path of the shell that the terminal uses on OS X.
  "terminal.integrated.shell.osx": "/usr/local/bin/fish",
```
③コマンドパレットから、`shell` と打ち、`Shell Command: install 'code' command in PATH` を選択
<img width="629" alt="スクリーンショット 2018-05-19 17.50.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/167171/6608e547-9c49-8bfb-6a41-005926ef7a53.png">
④端末を再起動して、`code`と入力してみてください。vscodeが起動するはずです。

## VS codeの設定
私の設定とインストール済みの拡張を晒しておきます。

```json:setting.json

{
    "terminal.external.osxExec": "iTerm.app",
    "terminal.integrated.shell.osx": "/opt/brew/bin/fish",
    "workbench.iconTheme": "vscode-icons",
    "files.insertFinalNewline": true,
    "editor.rulers": [80],
    "editor.tabSize": 2,
    "ruby.lint": {
        "rubocop": true,
        "ruby": true
    },
    "ruby.intellisense": "rubyLocate",
    "editor.renderWhitespace": "boundary",
    "workbench.editor.enablePreview": false,
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0
}
```

拡張機能
- Better Haml
- Color Highlight
- One Dark Pro
- Python
- Ruby
- Sass
- vscode-icons
- zenkaku

キーバインド

```json:keybindings.json
[
    {
        "key": "ctrl+cmd+up",
        "command": "editor.action.moveLinesUpAction",
        "when": "editorTextFocus"
    },
    {
         "key": "ctrl+cmd+down",
        "command": "editor.action.moveLinesDownAction",
        "when": "editorTextFocus"
    },
    {
        "key": "cmd+y",
        "command": "redo",
        "when": "editorTextFocus"
    }
]
```
上、２つは行のスワッピングになります。元々、sublimeを使用していたので、該当のキーバインドが上記の設定になっていたので設定を変えています。 `redo`に関してもよく使うのが上記の設定なので変更しました。

## まとめ
開発環境周りで色々と変更しましたが、今の所元には戻してないので大分使いやすいのかなと思います〜すぐに元に戻せますし、興味がある人はやってみてください〜
※fishの環境変数の設定については、注意してやってもらった方が良いかと思います。設定をミスっていて通っているべきはずのPATHが通っていないことがあったので。。。