※本記事で使用しているデバイス情報
＜パソコン＞
機種：MacBook Air 13″
OS：macOS Sonoma 14.3
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」をクリックして、アプリを再起動します。すると、日本語表示になります。
ファイルやフォルダの操作
ファイルを開く
1： 画面上部のメニューバーから ファイル をクリックします。
2： 次に、開く… をクリックします。
3： 開きたいファイルを選択します。
4： 開く を押したら、ファイルが開きます。
ファイルを保存する
ファイルの中身を変更すると、赤で囲まれた部分のように、●が表示されます。
このまま、ファイルを閉じてしまうと、変更内容が保存されませんので、保存してから終了するようにしましょう。
保存は、以下の手順で実行できます。
1： 上部のメニューバーから ファイル をクリックします。
2： 保存 をクリックします。
ファイルを保存する
Win Ctrl ＋ S
Mac command ＋ S
名前をつけて保存する
Win Ctrl ＋ Shift ＋ S
Mac command ＋ shift ＋ S
ファイルを閉じる
1： 画面上部のメニューバーから ファイル をクリックします。
2： エディターを閉じる をクリックするとエディターが終了します。
エディター（タブ）を閉じる
Win Ctrl ＋ W
Mac command ＋ W
作業用フォルダーを設定する
作業フォルダーを設定することで、作業が楽になります。
フォルダー内のファイルを簡単に開くことができます。
＜方法1 サイドバーから設定する＞
サイドバーにある フォルダーを開く をクリックすることで、開きたいフォルダーを選択できるようになります。
＜方法2 メニューバーから設定する＞
1： 画面上部のメニューバーにある ファイル をクリックします。
2：フォルダーを開く… をクリックすると、開きたいフォルダーを選択できるようになります。
フォルダーを開く
Win Ctrl ＋ K の次に Ctrl ＋ O
Mac command ＋ O
新規ファイルを作成する
新規ファイルを作成する方法はいくつかありますが、2つ紹介します。
＜方法1 メニューバーからから作成＞
1： 画面上部のメニューバーにある ファイル をクリックします。
2： 新しいテキストファイル または 新しいファイル… をクリックします。
新規ファイルの作成
Win Ctrl ＋ N
Mac command ＋ N
＜方法2 作業フォルダー内に作成＞
作業フォルダーを開いた状態で以下の操作を行ってください。
1： 新規ファイル作成マークをクリックします。
スペース記号と改行記号の表示
原稿編集を行うときは、スペースや改行をわかりやすく表示することが求められます。
半角スペースの表示
半角スペースの表示（1/2）
1： アクティビティバーにある 管理 をクリックします。
2： 設定をクリックします。
3： 検索ボックスの中に、「Render Whitespace」と入力します。
4： エディター全体の設定をする場合は「ユーザー」を、作業ファイルの中のみの設定を行う場合は「ワークスペース」を選択します。
5： 表示方法を選択します。
| 設定値 | 説明 |
|---|---|
| none | 半角スペース記号を標示しません。 |
| boundary | 単語の間以外の半角スペース記号を表示します。単語間に2つ以上半角スペースが入った場合や行頭・行末に表示します。 |
| selection | テキストが選択されている場合のみ半角スペース記号を表示します。初期設定です |
| trailing | 末尾の半角スペース記号のみを表示します |
| all | 常に半角スペース記号を表示します |
このように、半角スペース記号（・）が表示されます。
全角スペースの表示
1： アクティビティバーの 拡張機能 をクリック
2： 検索ボックスに「zenkaku」と入力
3： zenkaku を選択
4： インストール をクリック
拡張機能が有効化された後に、全角スペースがグレーで表示されます。
※表示が変わらない場合は、アプリを一旦終了し、再度起動しましょう。
改行記号の表示
1： アクティビティバーの 拡張機能 をクリック
2： 検索ボックスに「code-eol」と入力
3： code-eol を選択
4： インストール をクリック
このように、改行されている部分が矢印記号で表示されます。
その他 便利な機能
画面が小さかったり大きかったりする場合、表示の倍率を変更することができます。
積極的に活用しましょう。
画面の拡大
1： 画面上部のメニューバーにある 表示 をクリック
2： 外観 をクリック
3： 拡大 をクリック
画面の拡大
Win Ctrl ＋ ；
Mac command ＋ shift ＋ ー
画面の縮小
1： 画面上部のメニューバーにある 表示 をクリック
2： 外観 をクリック
3： 縮小 をクリック
画面の縮小
Win Ctrl ＋ ー
Mac command ＋ ー
エディターの右側でテキストを折り返す
1： 画面上部のメニューバーにある 表示 をクリック
2： 右側での折り返し をクリック
エディターの右側でテキストを折り返す
Win Alt ＋ Z
Mac option ＋ Z
コメント