Rails, Sublime Text3. 超超おすすめのカスタマイズ&プラグイン

こんにちわ

銀座で働く見習いRailsエンジニアのやまそうです。

 

Railsで開発をする時、皆さんはどんなエディタを使用していますか??

  • Sublime Text
  • Atom
  • Visual Studio

有名でよく使われているエディタはこんな感じですかね(実はこれしかしらない。。。)。

 

実際使用するエディタって何でもいいと思います。使用するエディタより大事なのは開発効率を上げるためにカスタマイズor拡張することですね。

ですけどですけど、先程挙げたようなエディタってインストールした段階ですとまぁ何も便利機能は無いわけです。なので大体の人は拡張とかして自分で使いやすようにします。

 

ちなみに私は会社IDEの一つであるRubyMineというのを使っていました。このRubyMineっていうのがまぁ最強ななわけです。(有料)

なにが最強かというとインストールした段階でありとあらゆる機能が揃っています。開発しやすいように最初からできてるわけです。

RubyMine公式↓

https://www.jetbrains.com/ruby/

 

しかし、私の開発のプロジェクトがなかなか大きいのですが、そのプロジェクトをRubyMineでプロジェクトを開くと動きがもっさりしてとても動作が遅い。コレは仕方ないかなと思います。いろんな機能が入ってるのでどうしても動作が重くなってしまうのです。

なのでコレでは逆に開発効率が悪くなってしまうと思って、sublimeに移行しました。もともとsublimeユーザーだったので簡単な気持ちで移行しましたが、RubyMineとの便利さの違いに驚愕。やっぱりこのままでは開発効率が落ちてしまうのでSublime Text大改造計画を立てました。

そしたらRubyMineと負けず劣らずの便利さを手に入れることができました笑

なのでそんなSublimeTextの拡張メニューを紹介したいなと思いますーー

 

プラグインの入れかた

どの記事でも紹介されていると思いますが、一応念の為こちらでも紹介しておきます。

1.「⌘ + Shift + P」を押します。

2.「package」と打ちます。そうするといくつか候補が出てくるので「install Package Control」を選択
※ 最初の一回だけです。一度やったら2度目移行は必要ないです。

3. 再び「⌘ + Shift + P」を押して、「package」と打ちます。いくつかの候補なかで「Package Control: Install Package」を選択

4. プラグイン名を入力して候補からプラグインを選択するだけでインストール出来ます。

 

プラグイン達

さっそくどんなプラグインを導入しているのか紹介します。

使用してるプラグイン

  • Alignment
  • AutoFileName
  • Better CoffeeScript
  • BracketHighlighter
  • Emmet
  • ERB Snippets
  • Git blame
  • Ruby Slim
  • Sublime Code Intel
  • SublimeLinter
  • SublimeLinter jshint
  • SublimeLinter ruby
  • Trailing Spaces

私が入れているプラグインが以上です。

一つひとつ紹介させていただきます。中にはいれたけど使ってないものもあるので、その時は「コレ使ってない!」っていいます。m(_ _)m

 

Alignment

変数とかを定義するときとか、ハッシュを定義するときに「=」だったり「=>」を使う時あると思います。Rubyに限らず。

ほんで「=」の位置を揃えると思います。

こんなかんじに

hoge        = "hoge"
hogehoge = "hogehoge"
fuga         = "fuga"

これをショートカットコマンド一発で揃えようと言うのがこのプラグインです。コマンドは「Ctrl+Alt+A」です。

実はあんまり使っていません笑

 

AutoFileName

これは便利ですね。おすすめ度星4くらいです!笑

名前から想像できそうですが、自動でファイルのパスを入力してくれるプラグインです。<img src=””>とか使うときにいちいちFinderなりドキュメントなりを開いてパスを調べるのめんどくさいですし、効率が悪いです。

このプラグインを入れておくことでsrc=””の中にカーソルを合わせると、今いるディレクトりから読み込めるファイルを候補で出してくれます。出てきた候補をEnterで選択すればファイル名が自動で入ります。

フォルダがある場合はEnterでフォルダを選択するとフォルダの中身をまた候補として出してくれます。中身を選択すれば自動でパスを入力してくれるという優れものです。

 

初心者にありがちな相対パスの間違いとかがなくなりますね。

 

Better CoffeeScript

これはCoffeeScript用のシンタックスハイライトしてくれるプラグインですね。

うちの開発はCoffeeを使用しているので入れました。使用しない方は必要ないので無視してください。

 

BracketHighlighter

これもなかなかおすすめ度が高いです。

SublimeTextはデフォルトの状態でもある程度シンタックスをしてくれますが、このプラグインは更にわかりやすくシンタックスしてくれます。

HTMLだったら開きタグにカーソルを合わせると閉じタグの位置が一発でわかるようにシンタックスしてくれたり。などなどとても便利。

いじくりたいコードを見つけやすくなります。

 

Emmet

これは複数のHTMLタグを一気に生成できるプラグインです。

例えば以下の様なHTMLを作るときに

<div id="hoge">
    <ul class="main-menu">
         <li class="menu">MENU1</li>
         <li class="menu">MENU2</li>
         <li class="menu">MENU3</li>
         <li class="menu">MENU4</li>
    < /ul>
</div>

以下のように書いてTabボタンを押すと同じものが生成されます。

div#hoge>ul.main-menu>li.menu*4

実はこれもあんま使ってないです笑

 

ERB Snippets

Rails開発者にはこ重宝されると思います。

Railsで開発する際に大体の人はテンプレートエンジンにERBを使っていると思います。Railsのデフォルトテンプレートエンジンですね。

HTMLファイルの中でRubyが使えるようになるテンプレートエンジンですが、Rubyの構文を使うのに「<% %>」、「<%= %>」を使います。

これをいちいち手で打つのはケッコウめんどくさいです。

このプラグインを使えば解決。

「er」と入力してそこでTabを押すと「<%%>」が生成されます!!
「<%=  %>」を出したかったら「pr」と入力してTabをおします。

ちなみにif + Tabなど他にもあるので使ってみてください。こいつはおすすめ度5ですね笑

 

Git blame

現場での開発複数人でチームを組んで開発をすることが多いです。そのときにバージョン管理ツールとしてGitを使用するのが今の時代でしょう。そのGitに関するプラグインです。

例えば自分の書き覚えなのないソースコードを発見したとします。でもソースが汚くて読むこともできない。誰かに聞こうにも誰が書いたかわからない。ってなときに使えます。

対象のコードにカーソルをあわせて「⌘ + ALT + B」を押します。

すると書いた人と書いた時間等のコミットが右側に出てきてくれます。チーム開発に重宝されます。

 

Ruby Slim

Railsのデフォルトテンプレートエンジンはerbですが、slimを使う場合はこちらのプラグインをインストールしますと、slim用のシンタックスハイライトをしてくれます。

 

Sublime Code Intel

こちらのプラグインはRubyでの開発に役に立つ機能が揃っています。

コードジャンプなどの機能が使えます。いきなり出てきたメソッドが何をしているのかを調べる時にメソッドの定義元を探しますが、ショートカットキー一発でその定義元へジャンプができたりとなにか便利な機能が揃っています。

開発効率が大幅にアップすること間違いなしです。

こちらに詳しいやり方が紹介されています。
https://qiita.com/tbpgr/items/08dca9a6c645794b3f3c

 

SublimeLinter(jshint/ruby)

SublimeLinterは文法をリアルタイムでチェックをしてくれるすぐれものです。sublime linter jshintやsublime linter rubyなどと組み合わせるとそれぞれの言語で文法をチェックしてくれます。

こちらも詳しく使い方を説明してくれている記事がありますので。
https://liginc.co.jp/web/js/73704

 

Trailing Spaces

無駄な半角スペースを思いっきりシンタックスしてくれるプラグインです。なんか地味な気がしますが私はとても重宝しています。

行末に何故か入ってしまった無駄な半角スペースって中々気づきにくいもので、Github等にpushして差分を見た時に初めて気づくという経験がありました。しかし、気づかずにpushしてプルリクを出してしまった時はもう遅し。レビュワーから怒られる始末が待っています。

そこで半角スペースが気づけるプラグインがないか調べた所発見したという経緯です。

しかも、このプラグインのシンタックスは半角スペースを消さずにはいられないぐらいシンタックスしてくれるので気づかないなんてことはない。

是非導入を。

 

Key Bindings

[
   // サイドバーのトグル
	 { "keys": ["ctrl+s"], "command": "toggle_side_bar" },
	 // 編集してるファイルのフォルダ表示
	 { "keys": ["ctrl+super+s"], "command": "reveal_in_side_bar"},
	 //フルパスコピー
	 { "keys": ["super+option+c"], "command": "copy_path" },
	 //フォルダリフレッシュ
	 { "keys": ["super+option+r"], "command": "refresh_folder_list"},
	 //リインデント
	 { "keys": ["super+option+o"], "command": "reindent"},
	 //コードの折りたたみ
	 { "keys": ["super+ctrl+left"], "command": "fold"},
	 { "keys": ["super+ctrl+right"], "command": "unfold"}  ,
	 { "keys": ["super+ctrl+f"], "command": "open_dir", "args": {"dir": "$file_path", "file": "$file_name"} },
   { "keys": ["super+b"], "command": "goto_definition" },

   // {
   //     "keys": ["command+s"], "command": "browser_refresh", "args": {
   //         "auto_save": true,         // 実行時に自動保存
   //         "delay": 0.0,              // 遅延時間
   //         "activate_browser": false, // ブラウザに切り替え
   //         "browser_name" : "all"     // ブラウザの指定
   //     }
   // }
]

 

使っているkey bindingをそのまま紹介いたします。

この中でも特に使うショートカットコマンドは以下です。

  • 「⌘ + option + u」← 選択した行を一括でインデント修正
  • 「⌘ + d」← 選択した箇所と一致した箇所を同時選択
  • 「⌘ + ctrl + f」← 開いているファイルをFinderで開く

以上の3つをよく使います。まだこれしか無いですが今後もショートカットを徐々に拡張していく予定です。

 

 

まとめ

いかがでしたでしょうか??

このくらいに量のプラグインでしたら動作がもっさりすることも無いですし、作業効率も大幅にアップすると思います。

こちらの記事を参考にみなさまの使いやすいテキストエディタ構築の力になれましたら幸いです。

最後まで読んでいただきありがとうございました。

 

参考サイト

label,

About the author

銀座の事業会社でエンジニアをやっております。 まだまだぺーぺーです。

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です