Visual Studio Code の最初の設定、基本の操作

はじめに

VSCodeをインストールした後、最初の最初にこれをやって、これを覚えておけばいいんじゃないか？　を書いています。 他にも色々あるとは思ってますが、内容は結構絞っています。

拡張機能

左下の積まれたダンボールみたいなアイコンからアクセスできます。

例として、私が最初に入れてみたもののみを記載しています。

• Japanese Language Pack for VS Code
  • 日本語化。
• Prettier - Code formatter
  • コードの整形ツール
    • Ctrl+, で設定画面を開き、ワークスペースで「Editor : Format On Save」にチェックを入れておくとSave時にフォーマッターがかかります。
• Markdown All in One
  • Markdown ファイルの編集をするのに便利。どの言語で開発するにせよ、 README.md を書いたりすることが多いと思います。html や css であればデフォルトで補完が働きますが、 Markdown はないので入れておくと良いでしょう。

設定

Ctrl+, で設定画面を開きます。左下のギアアイコンから「設定」でも同じです。

ユーザーとワークスペース

ユーザーは利用しているPC単位で行うものです。フォントの変更やテーマなど、個人の好みで設定すものもです。

• VSCodeを使う限りは適用されます
• 他人と共有しない設定に使います。

ワークスペースは開いているフォルダ（左側のエクスプローラに表示されているフォルダ）単位で行う設定です。こちらで設定した内容は、そのフォルダ内の .vscode/settings.json に保存されます。このファイルをGitやSVNにコミットし、チームメンバーと共有するのに向いています。

例として、以下のような設定を加えます。

• User
  • Editor: Render Whitespace : エディターで空白文字を表示するかどうかを制御します。
    • all（兎に角半角スペースが分かるように表示させる）
  • Editor: Render Control Characters : エディターで制御文字を表示するかどうかを制御します。
    • true
• Workspace
  • Editor: Format On Save : ファイルを保存するときにフォーマットします。フォーマッタが有効でなければなりません。ファイルの遅延保存やエディターを閉じることは許可されていません。
    • true（チームメンバーにコードフォーマットを矯正させる）

コマンドパレット

Ctrl+Shift+p で表示されます。

通常であればメニューや設定やサイドバーなどから使う機能が、ここからアクセスできます。 例えば、 theme や minimap や sidebar や replace などなど、やりたいことのキーワードを入れてみます。そうすると大抵のことができます。

ショートカットキー

別の記事にまとめました。

multimineral-tech.com

その他操作

ファイルのインクリメンタルサーチ

サイドバーのドキュメントアイコンからワークスペースをクリックすると、ファイル名の検索ができます。 Ctrl+Shift+e と同じです。

プロジェクト内のキーワード検索

サイドバーの虫眼鏡アイコンより、プロジェクト内のファイルを横断してキーワード検索ができます。 Ctrl+Shift+f と同じです。

ファイル編集操作

ファイルリンクとファイルリンクからのファイル作成

<script src="js/main.js"></script>

のように記述し、 js/main.js を Ctrl+クリック します。すると main.js ファイルに切り替わります。もし、このファイルが無かったらファイルを作るかどうかダイアログが表示されます。ここからファイルを作ることができます。

Emmetの利用

html ファイルを編集するときに使える機能です。 div#page>div.logo+ul#navigation>li*5>a と書いてEnterを押すと以下のコードが挿入されます。

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Emmetというテキストエディタ用のプラグインなのですが、VSCodeには標準で搭載されています。

css 編集中、ホバーでセレクタの内容確認

a.button {
    text-align: center;
}
a .button {
    text-align: center;
}

a.button にホバーすると <a class="button"> と表示されます。 a .button にホバーすると <a> … <element class="button"> と表示されます。

ホバーでヒントが表示されるのは css に限った機能ではありません。他の言語でも試してみると良いでしょう。（が、 css のこの機能は特に便利でいいかと思います。）