Visual Studio Codeのダウンロード方法と現在利用している拡張機能を忘れないためにメモとして記事にします。
ダウンロード
上記のページからダウンロードします。
拡張機能の入れ方
- Visual Studio Codeを開きます。
- 上記の画像の①のマークを押します。
- 上記の画像の②の検索バーに拡張したい機能の名前を入れると検索できます。
- 上記の画像の③のところに「インストール」もしくは「アンインストール」とあるのでインストールできます。アンインストールとなっていれば既に機能を導入済みです。
日本語
apanese Language Pack for Visual Studio Codeというものです。
検索バーに入力してインストールしましょう。
日本語の表記に変更されます。
HTMLとCSSの入力保管機能
HTML Snippetsというものです。
この機能を入れることでHTMLやCSSの入力保管をしてくれるので作業効率が上がります。
Rubyの構文チェック
Rubyというものです。
私はRubyをよく使うので間違いがあった場合に指摘してくれます。
全角チェック
zenkakuというものです。
スペースの間違いでエラーや予期せぬ動きになってしまうことありますよね。
この拡張機能を入れておけば全角で入力してしまった場合、薄くグレーになるのでわかりやすくなります。
zenkakuはインストールだけでは使えないので下記の手順を踏みます。
-
command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開きます。 -
Enable zenkakuと入力して選択します。 -
command + Qの同時押しでVSCodeを終了します。 - finderでホームディレクトリを開くきます。
-
command + shift + .で隠しディレクトリを表示します。 -
.vscode → extensions → mosapride.zenkaku-0.0.3と移動します。 -
extension.jsを右クリックでメニューを表示します。 -
このアプリケーションを開くからテキストエディットを選択します。 -
var enabled = false;をvar enabled = true;に変更してcommand + Sで保存します。
スペルチェック
Code Spell Checkerというものです。
スペルミスの可能性がある場合教えてくれます。
設定をカスタマイズ
①拡張機能ではないですが、半角スペースのカスタマイズをした方が効率的なので変更します。この設定をすればtabキーを1回押したら半角スペース2つ分になるので、単純にキー1回分効率化できます。
上記の画像のように左下の歯車マークを押します。
上記の画像のように設定を押します。
上記の画像のようにEditor: Tab Sizeを２に設定し、Editor: Render Whitespaceでallを選択します。
②次にオートセーブ機能をつけます。通常はcommand + sで上書き保存できますが、オートセーブ機能をつけておけば、VSCode以外の画面に移動しただけで保存してくれます。
上記の画像のようにAuto SaveをonFocusChangeを選択します。
私が使っている機能は以上です。
順次追記していきます。