VS codeの初期設定とRuby on Railsの環境設定 環境構築

初期設定につまづくとかなり時間をロスするので、まとめることにしました
# VSCodeの初期設定
## VSCode(Visual Studio Code)をインストール
1. [VSCodeダウンロードページを開く](https://code.visualstudio.com/)
![スクリーンショット 2020-03-31 5.50.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/676793f7-9452-c1e2-879b-3cbe7ea9c825.png)
2. Download for Macをクリックして、ダウンロードを完了します

## VS Codeに拡張機能を追加

### 追加する拡張機能

- Japanese Language Pack for Visual Studio Code →日本語表記にします。

![スクリーンショット 2020-03-31 5.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/8c73f768-c17b-d02c-7ca6-fcc53d0aed33.png)

- Ruby→Rubyの構文をチェックし、間違った箇所を指摘。

![スクリーンショット 2020-03-31 5.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/fd67c67f-9584-e57f-2420-9d50dfb191df.png)

- HTML Snippets→HTMLタグ、CSSタグの入力を補完。

![スクリーンショット 2020-03-31 5.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/20853723-0cfe-22b6-d1e2-2d4a8d37c7e3.png)

- Better Haml

![スクリーンショット 2020-03-31 5.56.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/84b1f69f-8a93-ea81-c163-2ca13fec48a4.png)

- zenkaku→全角スペースを知らせてくれます。

![スクリーンショット 2020-03-31 5.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/2beb042d-1351-d776-a6f7-693b1da8c46b.png)

- vscode-icons →言語ごとにファイルのアイコンを変えてくれます。
- Docker 

![スクリーンショット 2020-03-31 5.56.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/4f03706b-be45-6068-3a9d-1618a953358f.png)



### 実際にインストールする
1. VS Codeを開く
![スクリーンショット 2020-03-31 5.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/bd35a811-2947-c087-674b-2bc26adc3681.png)
3. 拡張機能を追加するためのボタンを押す
[![Image from Gyazo](https://i.gyazo.com/1d88202018dc3d1e35c64c2b1f31e6a0.gif)](https://gyazo.com/1d88202018dc3d1e35c64c2b1f31e6a0)
3. 追加したい拡張機能を検索する

[![Image from Gyazo](https://i.gyazo.com/b3f0ac9b550deab8224ec37a50cabd4b.gif)](https://gyazo.com/b3f0ac9b550deab8224ec37a50cabd4b)
4. インストールする
[![Image from Gyazo](https://i.gyazo.com/a8dca4318de79346c7c491b1ff9d837f.gif)](https://gyazo.com/a8dca4318de79346c7c491b1ff9d837f)
5. 反映させるためにvs codeを再起動「command ＋　q」で終了し再度、起動する

## 自動保存する設定
記述したのに、保存できていないと泣くので、自動保存するように設定しましょう
1. vs codeの設定を開く

 [![Image from Gyazo](https://i.gyazo.com/ff4fcd6b238315adf934132a743298a1.gif)](https://gyazo.com/ff4fcd6b238315adf934132a743298a1)
2. ユーザー設定がひらけているか確認
![スクリーンショット 2020-03-31 6.20.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/78e36244-e704-fb6d-6415-f09c397d9b0e.png)
3. Files: Auto Save「onFocusCange」が選択されていれば完了

## 半角スペースの見分けがつくようにする
1. VSCodeのサイドバーより、「管理」→ 「設定」の順に選択。
2. 開いたページで「ユーザー設定」タブを開く。
3. Editor: Tab Sizeを２に設定。
Editor: Render Whitespaceで「all」を選択。

# Finderの設定
1.FInderを開く!
[スクリーンショット 2020-03-31 6.29.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/f1618649-6070-f9ac-9918-2415ff21ae99.png)
2.Finderを選択の上、画面左上の「Finder」をクリック
![スクリーンショット 2020-03-31 6.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/eea7f6ae-956f-5e4e-feb1-13bb27ce07c9.png)
3.環境設定をクリック
4.サイドバーに「owner」を追加
![スクリーンショット 2020-03-31 6.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/dac76212-3def-4db3-1ac4-b380b3c4464b.png)
5.Finderにownerの表示が出る
![スクリーンショット 2020-03-31 6.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/e31fabf0-0cc6-8e03-8288-be016bbde745.png)

# Ruby on Railsの開発環境を整える

```:ターミナル
#ホームディレクトリに戻す
$ cd
```


```:ターミナル
$ xcode-select --install
```

## Homebrewをインストール
```:ターミナル
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
途中でエンターキーを押して、進める必要があるので、押し忘れないでください。

インストールされたか確認
```:ターミナル
$ brew -v
Homebrew 1.8.0など表示される 
```

Homebrewのアップデート

```:ターミナル
$ brew update
```

### Homebrewの権限を変更

```:ターミナル
$ sudo chown -R `whoami`:admin /usr/local/bin
```

## Rubyをインストール

```:ターミナル
$ brew install rbenv ruby-build
```
rbenvをどこからも使用できるようにしよう

```:ターミナル
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
```
bash_profileの変更を反映

```:ターミナル
$ source ~/.bash_profile
```

readlineをinstall
ターミナルのirb上で日本語入力を可能にする設定を行うために、以下のコマンドでインストール

```:ターミナル
$ brew install readline
```
readlineをどこからも使用できるようにしよう

```:ターミナル
$ brew link readline --force
```
rbenvを利用してRubyをインストール

```:ターミナル
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.5.1
```
### 利用するRubyのバージョンを指定

```:ターミナル
$ rbenv global 2.5.1
```
rbenvを読み込んで変更を反映


```:ターミナル
$ rbenv rehash
```

Rubyのバージョンを確認

```:ターミナル
$ ruby -v
```
さきほど指定したバージョンになっていれば、OKです。

## MySQLを用意

```:ターミナル
$ brew install mysql@5.6
```

### MySQLの自動起動設定
MySQLは本来であればPC再起動のたびに起動し直す必要がありますが、面倒なので自動化

```:ターミナル
$ mkdir ~/Library/LaunchAgents 
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist 
```

どこからもmysqlを利用できるように設定

```:ターミナル
# mysqlのコマンドを実行できるようにする
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
# mysqlのコマンドが打てるか確認する
$ which mysql
# 以下のように表示されれば成功
/usr/local/opt/mysql@5.6/bin/mysql
```

## Railsを用意

### bundlerをインストール
Rubyの拡張機能（gem）を管理するためのbundler（バンドラー）をインストール

```:ターミナル
$ gem install bundler
```
### Railsをインストール

```:ターミナル
# インストール
$ gem install rails --version='5.2.3'

# 再読み込みして反映
$ rbenv rehash

# 成功しているかバージョン確認
$ rails -v
```

Appを保存するためのフォルダ（ディレクトリ）を作成する

```:ターミナル
#ホームディレクトリに移動
$ cd ~

#projectsディレクトリの作成
$ mkdir projects

$ cd ~/projects
```