VSCodeの便利な設定やプラグインについてちょこっと説明してみる

2023年11月27日Windows関連,パソコン関連Windows,パソコン

前回はVisual Studio Code（以下、VSCode）のインストールやったので、次はVSCodeのプラグインの話をします。

VSCodeはMicrosoftが提供する無料の高機能テキストエディタで、JavaScript、TypeScriptやNode.jsなど色々サポートしてます。とりあえずコレ使っとけば失敗無いレベルで多機能。

そのVSCodeがサポートする形式のうち、JSON（JavaScript Object Notation）はJavaScriptのオブジェクト記法で記述されたデータのことですが、便利なんで異様なほど広く使用されてます。

今回は特にJSONファイルを扱うのにおすすめのVSCodeの拡張機能を説明したいと思います。

スポンサーリンク

VSCodeとは

繰り返しですが。

VSCodeとは、Microsoftが提供する無料の高機能テキストエディタです。なんにでも使われてます。というか多機能すぎるんです。

VSCodeの特徴

　VSCodeの特徴は主に以下が上げられます。というか特徴多すぎ。

  • 無料（無茶苦茶高ポイントだと思う）
  • 多機能（無茶苦茶高ポイントだと思う）
  • 情報が多い（無茶苦茶高ポイントだと思う）
  • 高速軽量なエディタ
  • 豊富な拡張機能が利用可能
  • 多機能なエディタでありながら、カスタマイズ性が高い
  • デバッグ機能が充実している
  • IntelliSense機能による自動補完が強力

VSCodeの拡張機能とは

拡張機能はVSCodeの機能をさらに拡張するための追加ツールです。VSCode使うなら特に必須と言える機能ですね。

拡張機能を使用することで開発効率を初めとした利便性が跳ね上がります。

この拡張機能は企業だけで無くコミュニティなどによって開発されており、非常に多くのものが存在します。

だからこういうまとめ記事が生まれる訳です。

VSCodeのおすすめ設定

VSCodeをより快適に使用する以下の設定を一応お伝えしときます。

setting.jsonの開き方と設定方法

VSCodeの設定を変更するには、設定画面使うかsetting.jsonファイルを直接編集します。

setting.jsonファイルはVSCodeのユーザー設定を保存するファイルで、エディターの動作や外観をカスタマイズすることができます。

setting.jsonファイルは以下の手順で開けます。

  1. メニューバーのファイルをクリックします。
  2. 表示されたメニューから基本設定を選択し、設定をクリックします。
  3. 右側に表示されたsettings.jsonのリンクをクリックします。

setting.jsonファイルを開いたら、直接記入することで任意の設定を追加したり変更できます。例えば、以下のような設定があります：

{
  "editor.tabSize": 2, // タブサイズを2に設定
  "editor.wordWrap": "on", // テキストを折り返す
  "files.autoSave": "onFocusChange" // ファイルがアクティブでなくなった時に自動保存
}

　設定の変更が完了したらCtrl + S（Windows）またはCommand + S（Mac）で保存siteください。

VSCodeプラグインの設定例

やっと本題。VSCodeには数多くのプラグインがあります。

個々のプラグインには固有の設定が含まれている場合がありますので、使用するプラグインごとに設定を行うことができます。

プラグインの設定例として、次のようなJSON関連のプラグインが挙げられます。

  • Paste JSON as Code：この拡張機能は、JSONファイルからソースコードを生成してくれます。設定は特に必要無いと思います。ありません。
  • JSON Parser：この拡張機能は、JSONファイルの内容を解析してくれます。これも設定は特に必要ありません。
  • JSON Viewer：この拡張機能は、JSONファイルを見やすくしてくれます。これも設定は特に必要なかったりします。

これらのプラグインはVSCodeの拡張機能メニューからインストールできます。

詳細な設定方法や他の便利な拡張機能は公式ドキュメントなどを参考にしてください。

JSON編集に便利なVSCodeプラグイン

次にJSON編集をより便利にするためのプラグインについて。

リアルタイムでJSON編集

JSON編集時には、データの変更をリアルタイムに確認することが重要です。

それにはVSCodeのプラグイン「Live Server」が便利でした。

このプラグインは変更が保存されるたびにページが自動的にリロードするのでリアルタイムでの変更確認が可能です。

Live Serverのインストール方法は、VSCodeの拡張機能マーケットプレイスから「Live Server」を検索し、そのままインストールを行ってください。インストール後、右下に表示される「Go Live」ボタンをクリックすると、現在のHTMLファイルがローカルサーバーとして起動します。

JSONオブジェクトのキーをアルファベット順にソート

JSONファイルを編集する際、キーの順序が重要な場合があります。

そのような場合に便利なのが「Sort JSON object by key」プラグインです。

このプラグインは選択したJSONオブジェクトのキーをアルファベット順にソートできます。

キーのソートは、VSCodeの「コマンドパレット」を使用することで行います。コマンドパレットを開き、「sort json」を検索すると、ソートのコマンドが表示されます。

このコマンドを選択すると、キーがアルファベット順にソートされたJSONオブジェクトが表示されます。

このプラグインは、JSONデータの整理や見やすさを向上させるために非常に便利です。特に大きなJSONファイルを取り扱う場合には、キーの順序を整えることでデータの探しやすさや可読性が向上します。

VSCodeプラグインの共有とチーム開発

VSCodeをチームで利用する場合、設定ファイルの共有や開発環境の統一が重要です。

つぎはVSCodeの設定ファイルの共有方法とチームでの開発環境の統一についてごく一部を紹介してみます。

VSCodeの設定ファイルの共有方法

VSCodeの設定はsetteing.jsonファイルに保存されています。

この設定ファイルを共有するだけでチーム内での開発環境の統一が図れる優れものだったりします。

設定ファイルの共有方法はいくつかありますが、プロジェクト内に設定ファイルを格納して共有する方法が一般的です。具体的な手順は以下。

  1. プロジェクトのルートフォルダーに「.vscode」というフォルダーを作成します。
  2. 作成した「.vscode」フォルダーにsetteing.jsonファイルを作成します。
  3. setteing.jsonに共有したい設定を記述します。
  4. 設定ファイルをGitなどのバージョン管理システムで共有します。

これにより、チームメンバーはプロジェクトをクローンした際に、共有された設定ファイルをそのまま利用することができます。

設定ファイルの共有はsetting.jsonの他にextentions.jsonなども共有可能です。extentions.jsonを共有すればプラグインの管理やインストールを共有することも可能になります。

チームでのVSCode利用と開発環境の統一

チームでVSCodeを利用するなら開発環境の統一も重要です。

上で触れた話ですが、開発環境を統一するには以下のポイントに注意しましょう。

  • チーム全員が同一のエディター（VSCode）を使用すること
  • 設定ファイルや拡張機能の共有により、開発環境を統一すること
  • プラグインのバージョン管理を行うこと
  • 定期的なエディターのアップデートを行うこと

これらのポイントに気を付けることで、チーム全体の開発効率を向上させることができます。

まとめ

VSCodeのプラグインや共有設定について紹介してみました。

VSCodeは優れたテキストエディタであり、色々な言語が使えますがJSONの編集にも便利です。

特にリアルタイムで編集ができたり、キーをアルファベット順にソートしたりするプラグインは非常に便利でした。

VSCodeは豊富な拡張機能を提供していて本当に便利なんですが、様々なプラグインがありすぎてよく分からなくなってます。

Git操作を便利にする拡張機能やスペルミスチェックをしてくれる拡張機能など、開発効率を向上させるためのプラグインも多くあるのでまた触れてみたいと思います。

スポンサーリンク

2023年11月27日Windows関連,パソコン関連Windows,パソコン

Posted by たーさん