【Mac】VSCodeの導入

記事概要

MacにVSCodeを導入する方法について、まとめる。

VSCodeとは

• 正式名称は、Visual Studio Code
• 無料で利用できるテキストエディタ

前提

• PCはMacを使用している

手順1(インストール)

1. 公式サイトにアクセスする
2. Download for macOSをクリックし、zipファイルをダウンロードする
3. zipファイルをダブルクリックする
4. Visual Studio Code.appをアプリケーションに移動させる
   
   • 必要に応じて、Dockに配置
   • 下記ポップアップが表示された場合、開くをクリック
     

手順2(拡張機能の導入)

1. 左側のアイコンメニューある、拡張機能アイコンをクリックする
2. 検索窓に拡張機能名を入力し、検索する
3. 拡張機能を選択し、インストールをクリックする
   • アンインストールと表示されれば、OK

Japanese Language Pack for Visual Studio Code

VSCodeを日本語表記にする

インストール後作業

1. アプリを再起動する

Ruby LSP

Rubyのコードのエラーチェックや自動補完などを行う

インストール後作業

なし

zenkaku

全角スペースを入力すると、グレー表示される

インストール後作業

1. command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開く
2. > Enable zenkakuと入力して選択する
3. VSCodeを終了する
4. finderでホームディレクトリを開く
5. command + shift + .で隠しディレクトリを表示する
6. .vscode＞extensions＞mosapride.zenkaku-0.0.3＞extension.jsを右クリックし、メニューを表示する
7. 「このアプリケーションを開く」から「テキストエディット」を選択する
8. 5行目の「var enabled = false;」を「var enabled = true;」に変更し、ファイルを保存する
9. command + shift + .で隠しディレクトリを非表示にする
10. VSCodeを起動し、全角スペースを入力するとグレーになることを確認する

Code Spell Checker

コードのスペルをチェックする

インストール後作業

なし

手順3(カスタマイズの実施)

Tab Size

tabキーを押した際に入力される半角スペースの数を指定する

1. 左側のアイコンメニューある、管理アイコンをクリックする
2. 設定をクリックする
3. Editor: Tab Size項目に2と入力する
   

Render Whitespace

半角スペースは「・」のように表示される

1. 左側のアイコンメニューある、管理アイコンをクリックする
2. 設定をクリックする
3. Editor: Render Whitespaceにallと入力する
   

オートセーブ

自動保存される

1. 左側のアイコンメニューある、管理アイコンをクリックする
2. 設定をクリックする
3. Files: Auto SaveでonFocusChangeを選択する