1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Rails開発時に導入したいVS Code拡張機能について

Posted at

概要

こんばんは。 Rails開発歴3年のWebエンジニアです。

Rails開発時に導入したいVS Codeの拡張機能をまとめました。
開発時の参考にしていただければと思います。

Line up

まずはRails開発をするのであれば導入しておきたい拡張機能をご紹介します。

Ruby LSP

  • Ruby専用のLanguage Server Protocolサポートで、コード補完やシンボルジャンプを可能にしてくれます

Rails

  • Railsプロジェクト向けに、コントローラやモデル間の移動・スニペット・補完などを実施してくれます

ruby-rubocop

  • コード規約に従っているかチェックしてくれます
  • ルールに違反している箇所があればハイライトしてくれます。

Ruby Solargraph

  • Rubyコード解析・型補完・ドキュメント表示を強化してくれます

GitLens

  • Git履歴やブレーム、変更箇所などをエディタ内で可視化し、Git操作を効率化してくれます

endwise

  • ifブロックなどのendを自動的に補完し、コード整形をサポートしてくれます

Rails Go to Spec

  • ModelやControllerで Ctrl + Shift + y をクリックすると、specを自動生成してくれる機能です
  • レールに沿ったディレクトリにファイルを自動生成してくれるので便利です
  • ただし、Request Specの自動生成には非対応

その他

以下はRails開発とは直接関連しませんが、
個人的にあったら便利と感じる拡張機能の一覧です。

MySQL

  • GUI上からMySQLにアクセスすることができる拡張機能
  • 実データを画面上から確認することができるので、開発効率がアップします

Japanese Language Pack for Visual Studio Code

  • VS CodeのUIを日本語化し、操作性を向上してくれます

Code Spell Checker

  • typo を検出してハイライトしてくれます
  • 英語力が弱い自分はお世話になっています(PRで指摘されると恥ずかしい...)

ESLint

  • JavaScript/TypeScript向けのコード規約チェックツールで、エラー箇所をハイライトして修正を促してくれます
  • ReactやVueを利用する場合は導入しておきたいです

Stylelint

  • CSS/SCSS向けのコードチェック・自動修正により、スタイルシートの品質向上を支援してくれます
  • スタイル修正を担当する場合は導入しておきたいです

HTML CSS Support

  • HTML内で記述したCSSクラスやIDをコード補完・プレビューし、フロントエンド開発を円滑化してくれます

Tabnine

  • AIで入力中コードの補足を生成してくれます

zenkaku

  • 全角スペースを可視化してくれます
  • コード上に不要なスペースが入ることを防いでくれるので便利です

GitHub Theme

  • GitHubと同様のテーマをVS Codeに適用してくれます
  • 見た目をカスタマイズできるのでテンションが上がります

まとめ

以上です。
参考になれば幸いです!

1
3
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
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?