1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VScodeを初めて使うRailsエンジニアへ

Posted at

はじめに

エディタをVScodeに変更したRailsエンジニアのために、作業が捗るVScodeの設定をまとめてみました。
VScodeには非常に便利な拡張機能がありますが、意図しない設定まで入るブラックボックスなので、設定ファイルをカスタマイズしました。

実行環境

この記事は以下の動作環境で動作確認しています。

ruby (2.7.1)
rails (6.0.3)
Vscode
MacBook Pro

1. どうやってカスタマイズするの?

VScodeをインストール時に、メジャーな言語の設定ファイルを既に入っており、言語ごとの設定は専用のファイルで設定します。(Rubyの場合はruby.json)
言語に依存しない設定はsettings.jsonで設定します。

1-1. 設定ファイル(setting.json)の開き方

VScode上でCommand + ,と打つと設定画面が出てきます。
右上にいくつかアイコンがあり、設定を開く(JSON)とあるのでクリックするとsettings.jsonが開きます。

1-2. 設定ファイル(ruby.json)の開き方

VScode上でCommand + Shift + Pと打つとコマンドパレットが出てきます。
User snippetsで検索して出てきたConfigure User Snippetsを選択して、
次に出てきたウィンドウでrubyと検索して出てきたruby.jsonを選択すると設定が開きます。

2. 設定内容

2.1 拡張機能のRubyをインストール

カスタマイズと言いましたが、Rubyの拡張機能だけは入れてください🙏
VScodeの左側にある拡張機能のアイコンをクリックし、Rubyで検索して一番上にある拡張機能をインストールを押すだけでOKです。

2.2 pryと打つとbinding.pryと変換する

Railsで開発していると誰もが使用するbinding.pry(デバッグ)。ただ毎回これを全て打つのは面倒&タイポするので予測変換の設定をします。
設定方法は簡単で、ruby.jsonに下記を記載するだけです。

"prefix"の値が変換前の文字、"body"が予測変換したい文字です。
もし"prefix"の値を"pry"から"bin"に変更すると"bin"と打つとbinding.pry に変換されます。

settings.json
"Debug Console": {
  "prefix": "pry",
  "body": "binding.pry\n",
  "description": "A runtime developer console"
}

画像に alt 属性が指定されていません。ファイル名: binding_pry.gif

2.3 HTMLのタグを自動補完する

RailsでViewのコードを書くにはhtml.erbファイルを使用します。
などのタグを全て打ちたくないので、div + tabキー でタグを補完してくれるようにします。下記の設定を
settings.jsonに追加します。

settings.json
{
 "emmet.includeLanguages": {
    "erb": "html",
 },
}

2.4 関数の定義元へジャンプ

Commandを押しながら関数をクリック、定義元にジャンプできる非常に便利な設定です。
Command + Shift + P でコマンドパレットを開き、keyboardで出てくるkeybinding.jsonに下記を記載します。

keybinding.json
[
  {
    "key": "cmd+d",
    "command": "editor.action.goToDeclaration",
    "when": "editorTextFocus"
  }
]

2.5 ターミナルからVScodeを開く

Command + Shift + P でコマンドパレットを開き、shellで出てくる shell command:install 'code' command in PATH をクリック。
ターミナルでcode . と打つとカレントディレクトリのファイルを開くことができます。

2.6 末尾の改行と空白を自動で削除

末尾に改行がないものには改行を追加。末尾の不要な改行・空白は自動で削除する設定です。
Command ,で設定を開き、trimで検索して全ての項目にチェックをする。

画像に alt 属性が指定されていません。ファイル名: 末尾改行・空白-1024x430.png
おわりに
他にもいろいろな設定があるので、好みに合わせて、拡張機能を追加したり、settings.jsonに設定を追加したりしてみてください。

参考までに私のsettings.jsonを添付しておきます。
右端で折り返す、スクロールを止める、オートセーブ当たりも入れておいた方が快適になると思います。

setting.json
{
  "files.autoSave": "onFocusChange", //ファイルのオートセーブ
  "editor.formatOnSave": true,
  "editor.tabSize": 2, //1つのタブに相当するスペースの数
  "editor.detectIndentation": false,
  "emmet.variables": {},
  "emmet.triggerExpansionOnTab": true,
  "ruby.rubocop.onSave": false,
  "html.format.endWithNewline": true,
  "html.format.indentInnerHtml": true,
  "emmet.includeLanguages": {
    "erb": "html",
  },
  "window.zoomLevel": 0,
  "ruby.intellisense": "rubyLocate",
  "diffEditor.renderSideBySide": false, // Git の差分を行内に表示
  "editor.wordWrap": "on", // 右端で折り返す
  "editor.minimap.renderCharacters": false, // ミニマップを簡略化
  "editor.links": true, // リンクをクリック可能に
  "indentRainbow.colors": [
    "rgba(255,255,64,0.07)",
    "rgba(127,255,127,0.07)",
    "rgba(255,127,255,0.07)",
    "rgba(79,236,236,0.07)"
  ],
  "editor.scrollBeyondLastLine": false, //下限でスクロールをストップさせる
  "editor.formatOnPaste": true, // ペースト時に自動でフォーマット
  "breadcrumbs.enabled": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true, // ファイルの保存時に末尾を改行
  // Reactの設定
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
    // },
    "emmet.syntaxProfiles": {
      "html": {
        "attr_quotes": "single"
      },
      "jsx": {
        "self_closing_tag": true
      }
    }
  }
}



1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?