HTMLとCSSを書くMacユーザー向け Visual Studio Codeの効率的な設定と使い方

この記事の概要

HTMLとCSSを書くMacユーザーのためのVisual Studio Codeの使い方の記事です。

Visual Studio Codeは非常に多機能なため、単に「便利な使い方を記事にしました」だと際限なく書けてしまいます。
そのため、今回はタイトルにあるような属性の人に絞ってまとめました。

設定

command + , で設定画面を開き、変更できます。

細かい内容ですが、設定の有無によって操作のしやすさも大きく変わります。
初期設定のまま使わずに使いやすいようにカスタムしておきましょう。

Bracket Pair Colorization

検索窓にEditor › Bracket Pair Colorization: Enabledと入力して、出てきたオプションにチェックを入れます。

対応する括弧のペアの色が揃います。
入れ子になった括弧や、遠い位置にある括弧の対応関係が見やすくなります。

Editor: Drag And Drop

検索窓にEditor: Drag And Dropと入力して、出てきたオプションのチェックを外します。

選択した行をドラッグして移動できる機能がデフォルトで有効になっているのですが、事故の原因になりがちなので無効にしましょう。

Editor: Format On Paste, Format On Save, Format On Type

検索窓にEditor: Format On Paste, Editor: Format On Save, Editor: Format On Typeと入力して、出てきたオプションにそれぞれチェックを入れます。

ペースト、保存、入力をした後にコードが整形されます。

拡張機能のPrettierをインストールしていると、そのルールにあわせて整形されます。

Files: Insert Final Newline, Trim Final Newlines, Trim Trailing Whitespace

検索窓にFiles: Insert Final Newline, Files: Trim Final Newlines, Files: Trim Trailing Whitespaceと入力して、出てきたオプションにそれぞれチェックを入れます。

最終行の空白行や、行末の余分な空白を制御できます。

プロジェクトのPrettierの設定によっては、これらの設定がバッティングしてしまう可能性もあります。実際の挙動を見ながら設定してください。

拡張機能

shift + command + Xで設定画面を開き、インストールやアンインストールができます。

拡張機能は、入れるだけで表示が見やすくなるものも多いのです。
環境構築として最初に入れるのが良いです。

もちろん自分で操作しないといけない拡張機能もありますから、積極的に使う練習をしましょう。

Auto Rename Tag

開始タグを編集するだけで、自動で終了タグも編集できます。
階層の深いコードを触っているときは、対象を見失ったり間違えたりすることもあるので、拡張機能で自動化しましょう。

設定のEditor: Linked Editingでも同じことができるはずなのですが、あちらは上手く動かないことが多いように感じるので、拡張機能をお勧めしています。

CSS Peek

HTMLを触っているとき、CSSを開かなくてもクラスで定義されている内容が分かります。
定義されたファイルを探す手間が省けて時短に繋がります。

• 対象のCSSを開いてジャンプする
  • クラス名にカーソルを当てて F12 を押す
• HTML内にインラインで表示する
  • クラス名にカーソルを当てて option + F12 を押す
• 小さいウィンドウで表示する
  • command を押しながらホバー

ただし、コード量の多いリポジトリだと上手く動いてくれない場合があります。

Git Graph

CLIだけでGit操作を完結している場合コミットグラフがみづらいです。
拡張機能を入れることで見やすくなり、コミットごとの差分も確認しやすくなります。

GitLens

ある行にカーソルをあわせると、いつ誰がどんなコミットとして変更できたかを確認できます。
先ほどのGit Graphと被る機能も多いですが、変更差分をその場で確認するときはGitLensの方が見やすいでしょう。

HTML CSS Support

CSSファイルで定義された内容をもとに、HTML内で補完が効きます。
CSS Peekと同様に、毎回CSSファイルを開く手間が省けます。

htmltagwrap

テキストを選択した状態で option + W を押すと、HTMLタグで囲まれます。
デフォルトだとpタグで囲まれて、その状態から編集すれば他のタグにも変更できます。

markuplint

HTMLは構文に問題があっても問題なく表示できてしまうことが多いです。
一般的な構文のチェックに加え、アクセシビリティの観点でもチェックできます。

日本人の方が作っているのでドキュメントが日本語なのも心強いポイントです。

Prettier

コードの整形をするツールとして最も有名なものがPrettierです。
インデントの数やセミコロンの有無など、人間の目視では見逃してしまいかねない部分はツールに任せましょう。

プロジェクトの依存関係にPrettierを追加するか、マシン内でグローバルにPrettierを導入するか、どちらかがお勧めだそうです。
具体的なやり方はこの記事では触れませんが、インストールしておきましょう。

拡張機能をインストールした後、設定画面の検索窓にPrettierと入力して、セレクトからPrettier - Code formatterを選択します。

Stylelint

Prettierと似たようなツールで、CSSの書き方をチェックできます。
可能であれば整形まで含めてツールに頼りましょう。

こちらもPrettierと同様に、プロジェクトか自分のマシンにインストールしておきましょう。

Stylelintは設定するまでが少し大変なので、参考記事を載せておきます。

Trailing Spaces

半角スペースや全角スペース、タブなど空白文字を分かりやすく表示します。
設定のeditor.renderWhitespaceでも似たようなことはできますが、こちらの拡張機能の方がより分かりやすいです。

vscode-icons

エクスプローラーファイルやフォルダの先頭にアイコンがつきます。
それだけですが、ファイルの種類を見分けやすくなるので便利です。

他にもアイコンを変更する拡張機能は存在するので、お好みでどうぞ。

ショートカットキー

キーを叩いたときの挙動を文章と動画で載せています。

抜粋して紹介しているので、もっと知りたい方は以下をどうぞ。

行のコピー

command + C

カーソルのある行を1行まるまるコピーします。
テキストを選択しなくてもコピーができるので早いです。

行のカット

command + X

カーソルのある行を1行まるまるカットします。
カットとして使いたいとき以外にも、行の削除としても便利です。

行の削除にもショートカットがありますが、shift + command + Kで微妙に押しづらいため、カットでの代用を紹介しました。

行の移動

option + ↑ / option + ↓

カーソルのあっている行（選択している行）を、上キーなら上へ、下キーなら下へ移動します。
インデントも調整しながら移動できるため作業が早いです。

行のコピー

shift + option + ↑ / shift + option + ↓

カーソルのあっている行（選択している行）を、上キーなら上へ、下キーなら下へコピーします。

行を上/下に追加

command + return / shift + command + return

単なる改行ではなく、インデントを維持した状態で上/下に行を追加します。

行の先頭/最後へカーソルを移動

command + ← / command + →

コマンドパレットの表示

shift + command + P

コマンドパレットから色々なアクションを実行できます。
例えばEmmet: Wrap with Abbreviationと打ち込むと、選択中のテキストを任意のタグで囲めます。

クイックオープン

command + P

ファイル名を打ち込むと候補が表示され、returnで開くことができます。
名前を覚えていれば、エクスプローラーから開くよりも早いです。

対応する括弧へのジャンプ

shift + command + \

閉じ括弧にいるときに開き括弧にジャンプする、などに使えます。

カーソルの追加

option + クリック

カーソルを追加した後にテキストを入力したり削除したりすると、すべてのカーソルに反映されます。

---

option + command + ↑ / option + command + ↓

カーソルのあっている箇所から、上キーなら上へ、下キーなら下へカーソルを追加します。

どちらも、同じテキストを複数の箇所に追加したいときなどに便利です。

現在選択しているテキストと同じ内容を選択

shift + command + L

選択している内容で、ファイル内に同じテキストがあればすべて選択します。
一括で置換するときなどに使えます。

---

command + D

選択している内容と同じテキストを、ファイルの下に向かって1つずつ選択を増やしていきます。

---

command + G / shift + command + G

選択している内容と同じテキストのうち、次のものや前のものにジャンプします。

検索

command + F

ファイル内で文字の検索ができます。

置換

option + command + F

ファイル内で文字の置換ができます。
正規表現も使えます。

行へジャンプ

control + G

ショートカットキーを押した後、数値を入力するとその行にジャンプします。

開いているファイルを閉じる

command + W

閉じてしまったファイルを再度開く

shift + command + T

エディタを分割する

command + \

左側はHTML、右側はCSS、などのレイアウトにする際に早いです。

エディタを移動する

option + command + → / option + command + ←

分割したエディタを移動できます。

プロジェクト全域を検索する

shift + command + F

ファイル内だけでなく、プロジェクト全域から検索ができます。

ターミナルを開く / 閉じる

control + `

Emmet

Emmetとは、HTMLとCSSの入力補助をしてくれる仕組みです。
Visual Studio Codeにはデフォルトで入っているので、導入は不要です。

抜粋して紹介しています。
もっと知りたい方はこちらをどうぞ。

HTML

タグを入力する

divと入力した後にtabを押すと以下のコードになります。

<div></div>

クラス付きのタグを入力する

div.some-classと入力した後にtabを押すと以下のコードになります。

<div class="some-class"></div>

中にテキストの入ったタグを入力する

p{テキスト}と入力した後にtabを押すと以下のコードになります。

<p>テキスト</p>

入れ子のタグを入力する

ol>liと入力した後にtabを押すと以下のコードになります。
入れ子は複数階層指定できます。

<ol>
  <li></li>
</ol>

複数の入れ子のタグを入力する

ol>li*3と入力した後にtabを押すと以下のコードになります。

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

組み合わせて入力する

ol.list>li.list-item{item$}*3と入力した後にtabを押すと以下のコードになります。

<ol class="list">
  <li class="list-item">item1</li>
  <li class="list-item">item2</li>
  <li class="list-item">item3</li>
</ol>

CSS

displayを指定する

ショートハンド	展開内容
db	display: block;
di	display: inline;
dib	display: inline-block;
df	display: flex;
dg	display: grid;
dn	display: none;

幅や高さを指定する

以下の表のwをhに置き換えればwidthがheightになります。

ショートハンド	展開内容
w100	wifth: 100px;
w100p	wifth: 100%;
w100e	wifth: 100em;
w100r	wifth: 100rem;

余白を指定する

以下の表のmをpに置き換えればmarginがpaddingになります。

ショートハンド	展開内容
m10	margin: 10px;
m10-20	margin: 10px 20px;
m10-20-30	margin: 10px 20px 30px;
m10-20-30-40	margin: 10px 20px 30px 40px;
m10p	margin: 10%;
m10e	margin: 10em;
m10r	margin: 10rem;
mt10	margin-top: 10px;
mr10	margin-right: 10px;
mb10	margin-bottom: 10px;
ml10	margin-left: 10px;

その他プロパティ色々

ショートハンド	展開内容
bd	border
bg	background
bgc	background-color
c	color
fz	font-size
fw	font-weight
mah	max-height
maw	max-width
mih	min-height
miw	min-width

番外編：不要な拡張機能

昔は活躍していたけど、現在は標準機能として搭載されているものなどです。
紹介されている記事を見かけることもあると思いますが、導入しなくて大丈夫です。

Auto Close Tag

開始タグを打ち込んだ時点で終了タグも生成できる拡張機能です。

標準の機能で実現できるため不要です。

Bracket Pair Colorizer 2

対応する括弧のペアの色が揃う拡張機能です。

設定のBracket Pair Colorizationを有効にすればほぼ同じ機能を使えるため、不要です。

Japanese Language Pack for Visual Studio Code

Visual Studio Codeを日本語化できる拡張機能です。

日本語化すること自体は問題ありませんが、日頃から英語での表記に慣れておいた方が良いです。
英語で検索した方が結果が多いのと、リリースノートなども英語で書かれているため推奨しません。

zenkaku

全角スペースにハイライトがつく拡張機能です。

設定のEditor › Unicode Highlightで、デフォルトで全角スペースにはハイライトがつくため不要です。

最後に

こういう、地味な設定のオンオフやショートカットの習熟度が、なんだかんだ仕事の速さを左右すると思っています。
スピーディーにコードを書くためにも、ツールの設定を見直したり、ショートカットが手に馴染むまで練習してみましょう！

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！