Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
37
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@gyu_outputs

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

初期設定につまづくとかなり時間をロスするので、まとめることにしました

VSCodeの初期設定

VSCode(Visual Studio Code)をインストール

  1. VSCodeダウンロードページを開く スクリーンショット 2020-03-31 5.50.34.png
  2. Download for Macをクリックして、ダウンロードを完了します

VS Codeに拡張機能を追加

追加する拡張機能

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

スクリーンショット 2020-03-31 5.56.45.png

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

スクリーンショット 2020-03-31 5.56.59.png

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

スクリーンショット 2020-03-31 5.56.37.png

  • Better Haml

スクリーンショット 2020-03-31 5.56.22.png

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

スクリーンショット 2020-03-31 5.57.16.png

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

スクリーンショット 2020-03-31 5.56.29.png

実際にインストールする

  1. VS Codeを開く スクリーンショット 2020-03-31 5.53.49.png
  2. 拡張機能を追加するためのボタンを押す Image from Gyazo
  3. 追加したい拡張機能を検索する

Image from Gyazo
4. インストールする
Image from Gyazo
5. 反映させるためにvs codeを再起動「command + q」で終了し再度、起動する

自動保存する設定

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

Image from Gyazo
2. ユーザー設定がひらけているか確認
スクリーンショット 2020-03-31 6.20.28.png
3. Files: Auto Save「onFocusCange」が選択されていれば完了

半角スペースの見分けがつくようにする

  1. VSCodeのサイドバーより、「管理」→ 「設定」の順に選択。
  2. 開いたページで「ユーザー設定」タブを開く。
  3. Editor: Tab Sizeを2に設定。 Editor: Render Whitespaceで「all」を選択。

Finderの設定

1.FInderを開く!
スクリーンショット 2020-03-31 6.29.45.png
2.Finderを選択の上、画面左上の「Finder」をクリック
スクリーンショット 2020-03-31 6.29.58.png
3.環境設定をクリック
4.サイドバーに「owner」を追加
スクリーンショット 2020-03-31 6.30.11.png
5.Finderにownerの表示が出る
スクリーンショット 2020-03-31 6.32.21.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
37
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
37
Help us understand the problem. What is going on with this article?