見出し画像

サービス開発に役立ったVSCodeの拡張機能紹介 (バックエンド編)

ラキール公式｜株式会社ラキールのエンジニアたちによるTECH BLOG

はじめに

こんにちは。Visual Mosaic Team の新田です。
普段は、UI 操作を中心に画面部品を組み合わせて、ローコードで業務画面を構築する「LaKeel Visual Mosaic」という製品の開発を担当しています。

今回は社内のバックエンド開発者にアンケートを取り、実際の業務で役に立った Visual Studio Code ( 以下、VSCode ) の拡張機能をピックアップしました。特におすすめの機能を、コメント付きでご紹介したいと思います。

また、フロントエンド開発に役立つ拡張機能をまとめた記事も掲載しておりますので、こちらもぜひご覧ください！

Thunder Client

公式ページへのリンクはこちら

機能紹介

  • HTTPリクエストを送信して、レスポンスを表示します。

  • リクエスト履歴や環境変数の管理・エラーレポートの生成等も可能です。

コメント

  • Postmanと同様の機能を実現していて、しかも軽量！

  • APIの作成からテスト・デバッグまで、VSCodeだけで完結できるのは嬉しい！

Swagger Viewer

公式ページへのリンクはこちら

機能紹介

  • swaggerを読み込んで解析し、ビジュアライズしてくれます。

コメント

  • プレビュー機能のおかげで、swaggerを直感的に理解できる。そしてなによりかっこいい！

  • クラス名の重複などで別のリクエストやレスポンスとなっていないか、自動生成後の結果をOpenAPIの結果ベースで確認できるのは便利！

JSON to TS

公式ページへのリンクはこちら

機能紹介

  • JSONファイルからTypeScriptの型定義ファイルを自動生成します。

コメント

  • APIのレスポンスを型情報として定義する際の手間が省けて、開発効率が向上した！

  • 自動生成なので、型のミスマッチも防げる！

Rainbow CSV

公式ページへのリンクはこちら

機能紹介

  • CSVファイル内のデータを、カラーリングして表示することができます。

  • 行の折りたたみ・列の固定・カラムの自動認識も行ってくれます。

コメント

  • 色がつくと鮮やかで見やすい！

  • 毎回ファイルを開いたときに、左から何個目のカラムか数えていた過去の自分が馬鹿らしくなった。

  • CSVに対してSQLと似たような操作（抽出・更新等）を行えるのも便利！

Code Spell Checker

機能紹介

コメント

  • スペルの誤りは目で見ても気付かないことがあるので、チーム全体で入れておきたい。

  • 他の人が実装したコードを修正する際にスペルミスに気づいたとしても、新たに別の不具合が起きることが怖くて直しづらいので、必ず導入しておいて欲しい！

  • なにより恥ずかしい思いをしないために！

GitLens — Git supercharged

機能紹介

コメント

  • 対象のコードの実装者が分かりやすくなるので、チームでの開発に役立った。

  • 過去との差分比較もできるため、実装ミスを素早く見つけることが出来る！

  • コミット履歴が簡単に把握できるため、担当者や編集経緯が追いやすく疑問点があっても解決しやすい！

その他

これらに加えて、以下のような拡張機能も使われていました。
メジャーなものからマイナーなものまで揃い踏みです。ご参考までに。

  • ESLint：コードの静的解析を行い、問題のある箇所を検出します。

  • Docker：Dockerイメージを管理することが出来ます。

  • Draw.io Integration：テキストベースでフローチャートやUML図を書くことができ、変更履歴の確認や、検索・一括置換も可能です。

  • Git Stash：Gitのスタッシュを管理する機能を提供します。

  • Live Server：サーバーを起動し、開発中のWebアプリケーションをリアルタイムでプレビューできます。

  • Output Colorizer：.logファイルにシンタックスハイライトが適用されます。

  • PlantUML：テキストベースでUML図を書くことができ、変更履歴の確認や、検索・一括置換も可能です。(慣れればエクセルで書くよりも早くて便利、とのこと！)

  • Prettier - Code formatter：保存時などに自動でコードをフォーマットします。

  • Regex Previewer：文字列が任意の正規表現にマッチするかチェックしてくれます。

  • Search Editor: Apply Changes：検索エディタ上での変更を、ワークスペースのファイルに適用してくれます。

  • SQL Formatter：SQLクエリを整形してくれます。

  • Total Lines：ファイル全体の行数をカウントして表示します。

  • vscode-pets：可愛いペットをVSCodeのサイドバーに表示します。

  • YAML：.ymlファイルの作成をサポートします。

おわりに

今回は、私たちのバックエンド開発に役立った Visual Studio Code の拡張機能についてご紹介しました。GitLens — Git supercharged と Code Spell Checker を薦める声がとても多く、チームメンバー間でスムーズに連携を取ること、そしてスペルミスを防ぐことの大切さを、改めて実感しました。

VSCode Marketplace には、記事執筆時点で約45,000もの拡張機能が登録されています。自分のコーディングスタイルや、プロジェクトの仕様にマッチする機能を、ぜひ見つけてみてください。

私たちの会社では、冒頭にお伝えした「LaKeel Visual Mosaic」をはじめとする複数のアプリケーション開発基盤 ( LaKeel Engine ) を軸に、マイクロサービスを組み合わせてアプリケーションを構築する「LaKeel DX」というプロダクトを展開しています。ご興味のある方は下記リンクから製品ページをご覧いただけますと幸いです。

それでは、最後までご覧いただきありがとうございました。