記事概要
MacにVSCodeを導入する方法について、まとめる。
VSCodeとは
- 正式名称は、Visual Studio Code
- 無料で利用できるテキストエディタ
前提
- PCはMacを使用している
手順1(インストール)
- 公式サイトにアクセスする
-
Download for macOSをクリックし、zipファイルをダウンロードする - zipファイルをダブルクリックする
-
Visual Studio Code.appをアプリケーションに移動させる
- 必要に応じて、Dockに配置
- 下記ポップアップが表示された場合、
開くをクリック
手順2(拡張機能の導入)
- 左側のアイコンメニューある、拡張機能アイコンをクリックする
- 検索窓に拡張機能名を入力し、検索する
- 拡張機能を選択し、
インストールをクリックする-
アンインストールと表示されれば、OK
-
Japanese Language Pack for Visual Studio Code
VSCodeを日本語表記にする
インストール後作業
- アプリを再起動する
zenkaku
全角スペースを入力すると、グレー表示される
インストール後作業
-
command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開く -
> Enable zenkakuと入力して選択する - VSCodeを終了する
- finderでホームディレクトリを開く
-
command + shift + .で隠しディレクトリを表示する - .vscode＞extensions＞mosapride.zenkaku-0.0.3＞extension.jsを右クリックし、メニューを表示する
- 「このアプリケーションを開く」から「テキストエディット」を選択する
- 5行目の「var enabled = false;」を「var enabled = true;」に変更し、ファイルを保存する
-
command + shift + .で隠しディレクトリを非表示にする - VSCodeを起動し、全角スペースを入力するとグレーになることを確認する
Code Spell Checker
コードのスペルをチェックする
インストール後作業
なし
Draw.io Integration
ER図を作成できる
インストール後作業
こちらを参照
Prettier
コードを自動的に整形する
インストール後作業
なし
Dev Container
Dockerコンテナを開発環境として使用する
インストール後作業
なし
使用例
- 開発環境の一貫性
Dev Containerを使用すると、同じオペレーティングシステム上で一貫した、容易に再現可能なツールチェーンで開発することができる。 これにより、開発環境の一貫性と再現性を保つことができる - 開発環境の切り替え
異なる、別々の開発環境を素早く切り替え、ローカルマシンに影響を与えることなく安全に更新を行うことができる。 これにより、複数のプロジェクトを効率的に管理することができる
MyCheatsheet for VS Code
自分だけのチートシートをエディター内で直接開くことができる
VSCodeやOSのショートカットキーをすぐに見られる状態にできるので、調べる手間を省ける
インストール後作業
なし
手順3(カスタマイズの実施)
Tab Size
tabキーを押した際に入力される半角スペースの数を指定する
- 左側のアイコンメニューある、管理アイコンをクリックする
- 設定をクリックする
- Editor: Tab Size項目に
2と入力する
Render Whitespace
半角スペースは「・」のように表示される
- 左側のアイコンメニューある、管理アイコンをクリックする
- 設定をクリックする
- Editor: Render Whitespaceに
allと入力する
オートセーブ
自動保存される
- 左側のアイコンメニューある、管理アイコンをクリックする
- 設定をクリックする
- Files: Auto Saveで
onFocusChangeを選択する
