開発環境の準備②：VSCodeのカスタマイズ

Loading

今回はVSCodeのカスタマイズを行っていきます。
JavaScriptの学習のために、最低限の基本設定と拡張機能を導入しましょう。

目次

VSCodeの設定

前回の記事でVSCodeをインストールしたかと思います。
デフォルトの状態でもプログラミングはできますが、学習しやすいようにカスタマイズしていきましょう。

実施するカスタマイズは以下のとおりです。

  • VSCodeの日本語化
  • LiveServerの導入
  • インデントサイズの変更とタブを上書きしない設定にする

日本語パックの導入

VSCodeはデフォルトでは英語表記になっていますので、まずはこれを日本語化していきましょう。

最初にVSCodeを起動してください。
そうしたら、以下の手順を実施してください。

  1. 起動した画面の左サイドバーに拡張機能のボタンがあるのでそちらを選択します（下図参照）
  2. 表示された検索窓に「Japanese」と入力します
  3. すると拡張機能の一覧が表示されますので、その中から「Japanese Language Pack for Visual Studio　Code」という名前の拡張機能を選択してください
  4. 右側のパネルに「Install」ボタンがあるので、そちらを押下します
日本語化パック導入
VSCodeの日本語化手順

ここまでできたら、一度VSCodeを再起動します。
再起動後の画面が日本語化していたら作業完了です。

Live Serverの導入

次に、「Live Server」を導入します。

HTMLやJavaScriptの実行結果を確認するためには、サーバーにファイルを配置する必要があります。
しかし、JavaScriptの学習のためにいちいちサーバーをレンタルするのはコストもかかりますし、効率もよくありません。
そのため、PC上で簡易的なサーバーの働きをしてくれるツールがあると便利です。
それが「Live Server」になります。

Live Serverの導入手順は日本語パックの導入とほとんど同じです。

  1. 左サイドバーの拡張機能のボタンを選択します
  2. 表示された検索窓に「Live Server」と入力します
  3. 拡張機能の一覧の中に「Live Server」という名前の拡張機能があるので、それを選択してください
  4. 右側のパネルに「インストール」ボタンがあるので、そちらを押下します
LiveServerの導入
Live Serverの導入手順

以上でLive Serverの導入は完了です。

基本設定の変更

次に、VSCodeの基本設定を変更していきます。
ここは正直好みが分かれるところですので、不要と思えばここの設定は省略して構いません。

インデントサイズの変更

まずは、インデントサイズの変更です。

プログラミングをするときに、コードを読みやすくするためにインデント（字下げ）を頻繁にします。
エディター上でタブ（Tabキー）を押せば簡単に字下げができます。
VSCodeの初期設定ではタブを押すとスペースが4つ挿入されるのですが、最近ではスペース2つにするのが主流ですので、それに合わせて設定を変更しましょう。

まず、「Ctrl + Shift + P」を押してください。
すると、「コマンドパレット」と呼ばれるコマンド一覧が表示されます。
この中から「基本設定：ワークスペース設定を開く」を選択してください。

次に、以下の手順を実行してください。

  1. 検索窓に「tab size」と入力します
  2. 表示された設定の中から「Editor: Tab Size」を探し、入力欄に「2」と入力してください
基本設定：タブサイズの変更
タブサイズの変更

これで、インデントサイズがスペース2つに変更されました（自動保存なので、入力した時点で設定は保存されます）。

タブの上書きを抑止する

次に、タブ（タブキーではなく、パネルの上部に表示されるタブの話です）の上書きを禁止する設定にします。

初期設定では、別のファイルを選択するとタブの内容が上書きされてしまいます。
これだと、別のファイルを開こうとした場合に新しいタブが追加されず不便です。
そのため、タブの内容を上書きする設定を変更したいと思います。

  1. 設定の検索窓に「enable preview」と入力してください
  2. 表示された設定の中から「Editor: Enable Preview」を探し出し、チェックを外してください
基本設定：タブ上書き禁止にする
タブの上書きを抑止する手順

これでタブの上書きが抑止されました。

コード配置フォルダの指定

最後に、JavaScript学習用のソースフォルダを作成しましょう。

今後の記事では「C:\workspace\javascript」というフォルダを利用していきますが、フォルダの場所、名前は好きに決めて構いません。

  1. VSCodeの上部メニューから「ファイル」→「フォルダを開く」を選択します
  2. 自分で決めたフォルダを指定してください

これで、作業用フォルダの指定は完了です。
以下、VSCode上でファイルやフォルダを追加するたび、指定したフォルダの下にそれらが作成されるようになります。

まとめ

以上で、開発環境の準備は整いました。

次回は、JavaScriptコードの実行方法について説明します。