※本記事で使用している環境
＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
この記事では、Visual Studio Code のインストール方法と初期設定方法について解説します。
参考にした書籍
Visual Studio Code とは
Visual Studio Code（以下、VS Code） は、HTMLやCSSの編集やプログラム開発、テキスト編集ができるテキストエディターです。
プログラマーが使用するイメージが強いですが、最近では原稿執筆を行うノンプログラマーにも使われています。
インストール方法
VS Code は、公式サイトにて無償で提供されています。
公式サイトにアクセスし、ダウンロードボタンを押しましょう。
1： 自分の使用デバイスに合った、ダウンロードリンクをクリックしましょう。
僕の場合は、インテルチップの MacBook Air を使用しているので赤で囲まれた部分になります。
M1やM2チップなど Apple Silicon を使用している方は、となりのリンクになります。
2： Finder アプリを開き、ダウンロード にあるVSCode-darwin.zipをクリックして Zip ファイルを解凍します。
３： Zip ファイルを解凍したら、アプリケーションが表示されますので、アプリケーションに移動させましょう。
公式サイトから、アプリをインストールした場合、警告表示がでます。
4： ここは、「開く」をクリックしましょう。
VS Code の日本語化
VS Code を日本語表示に変更するためには、拡張機能をつかいます。
拡張機能とは、名前の通り機能を拡張する場所です。
つまり、VS Code に新たな機能を追加することができます。
1： アクティビティバーにある拡張機能をクリックします。
2： 検索ボックスに「japanese」と検索し、VS Code を日本語表示にしてくれる拡張機能を探します。
3： 「Japanese Language Pack for Visual Studio Code」という拡張機能が表示されたら、インストールボタンをクリックします。
5： インストールしたら、「Change Language and Restart」をクリックして、アプリを再起動します。すると、日本語表示になります。
スペース記号と改行記号の表示
半角スペースの表示
説明画像8
1： アクティビティバーにある 管理 をクリックします。
2： 設定をクリックします。
3： 検索ボックスの中に、「Render Whitespace」と入力します。
4： エディター全体の設定をする場合は「ユーザー」を、作業ファイルの中のみの設定を行う場合は「ワークスペース」を選択します。
5： 表示方法を選択します。
| 設定値 | 説明 |
|---|---|
| none | 半角スペース記号を標示しません。 |
| boundary | 単語の間以外の半角スペース記号を表示します。単語間に2つ以上半角スペースが入った場合や行頭・行末に表示します。 |
| selection | テキストが選択されている場合のみ半角スペース記号を表示します。初期設定です |
| trailing | 末尾の半角スペース記号のみを表示します |
| all | 常に半角スペース記号を表示します |
このように、半角スペース記号（・）が表示されます。
全角スペースの表示
1： アクティビティバーの 拡張機能 をクリック
2： 検索ボックスに「zenkaku」と入力
3： zenkaku を選択
4： インストール をクリック
拡張機能が有効化された後に、全角スペースがグレーで表示されます。
表示が変わらない場合は、以下の手順で有効化します。
1: 以下のボタンを押して、コマンドパレットを開く
コマンドパレットの開き方
Mac command ＋ shift ＋ P
Win Ctrl ＋ Shift ＋ P
2: 以下のように入力
Enable Zenkaku
すると、拡張機能が有効化され、全角部分に色がつきます。
改行記号の表示
1： アクティビティバーの 拡張機能 をクリック
2： 検索ボックスに「code-eol」と入力
3： code-eol を選択
4： インストール をクリック
このように、改行されている部分が矢印記号で表示されます。
その他 便利な機能
画面が小さかったり大きかったりする場合、表示の倍率を変更することができます。
積極的に活用しましょう。
画面の拡大
1： 画面上部のメニューバーにある 表示 をクリック
2： 外観 をクリック
3： 拡大 をクリック
画面の拡大
Win Ctrl ＋ ；
Mac command ＋ shift ＋ ー
画面の縮小
1： 画面上部のメニューバーにある 表示 をクリック
2： 外観 をクリック
3： 縮小 をクリック
画面の縮小
Win Ctrl ＋ ー
Mac command ＋ ー
フォントの倍率を拡大
1: 以下のボタンを押して、コマンドパレットを開く
コマンドパレットの開き方
Mac command ＋ shift ＋ P
Win Ctrl ＋ Shift ＋ P
2: 以下のように入力
Increase Editor Font Size
エディターの右側でテキストを折り返す
1： 画面上部のメニューバーにある 表示 をクリック
2： 右側での折り返し をクリック
エディターの右側でテキストを折り返す
Win Alt ＋ Z
Mac option ＋ Z
これにて、VS Code のインストール方法と初期設定方法についての解説を終わります。
次は、ファイルとフォルダの基本操作についての解説を行います。
コメント