More than 1 year has passed since last update.

Web開発現場でよく使いそうなVSCodeの機能をまとめたみた

Posted at 2022-05-21

書籍Visual Studio Code完全入門より、Web開発現場で個人的によく使いそうな内容を
参考記事と紐づけながらまとめてみました。

参考

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 - インプレスブックス

全般

ステータスバーは押せて、以下の機能がある(一例)
- 指定行へ移動
- インデントの文字数を変更
- 文字コードや改行コードを変更する
- ブランチのチェックアウト
ファイルをシングルクリックするとプレビューモードで表示。ダブルクリックすると編集モードで開く。
- プレビューモードでファイルを開くと、次にファイルを開くと元のファイルが非表示になる。
- 設定 enablePreview ⇒ プレビューモードを外すことができる
Zen Modeでコーディングに作業に集中しやすくできる

参考

ファイル編集系統

Ctrl + D ⇒ 同じ単語を選択
Ctrl + Shift + L ⇒ 同じ単語をすべて選択
Ctrl + Alt + ↑ or ↓ ⇒ カーソルを拡張する
選択しながらAlt ⇒ 選択箇所を増やす
ファイルを 2 件選択 + 選択項目の比較 ⇒ ファイルの差分をとれる
検索ウインドウで表示された検索結果の右に表示される×を押すと、置換対象から外せる

参考

設定系統

Ctrl + P 押した後、>を入力でコマンドパレットが開く
設定 Editor: Line Numbers: エディタに表示される行番号の表示をカスタマイズできる
- 選択行からの相対の行数
- 10 行ごとに表示
設定 Files: Auto Save ⇒ 以下をトリガーにファイルを自動保存できるようにする
- 一定時間
- エディタからフォーカスアウト
- VSCode からフォーカスアウト
ワークスペースごとにカラーテーマを変えて、どのプロジェクトかを可視化できる

参考

フロントコーディング

Emmet を使って HTML や CSS のコーディングを楽にできる
- HTML
  - !を押して表示される候補を選択すると HTML のひな型が入力される
  - 要素名 + tab ⇒ 指定した要素名の DOM が入力される
    - divと入力し、tab を押下すると<div></div>が入力されるということ
  - セレクタ + tab ⇒ 指定したセレクタの DOM が入力される
    - p#hoge.fugaと入力し、tab キーを押下すると<p id="hoge" class="fuga"></p>が入力されるということ
    - 要素名を省略するとdivタグが入力される
  - セレクタ*{数字} + tab ⇒ 指定したセレクタの DOM が入力した数字分だけ入力される
    - li.hoge*3と入力し、tab キーを押下すると<li class="hoge"></li>が 3 件入力されるということ
- CSS
  - m{top}-{left}-{bottom}-{right} + tab ⇒ margin: {top}px {left}px {bottom}px {right}px;
    - m10-20-30-40と入力し、tab キーを押下するとmargin: 10px 20px 30px 40px;が入力されるということ
    - paddingも同様
  - displayやwidthなども簡単に入力できる
カラーピッカー
- CSS での色指定を簡単にできる。(明度・彩度など)
- 英語名からカラーコードへの変換もすぐにできる
- 例えば"color: green"のgreenの左側の色の四角を押すとカラーピッカーが表示できる
  - カラーピッカーの画面に英語名やカラーコードが表示されるので押下すると、表記方法を変換できる

参考

コーディング全般

.prettierignoreでフォーマットを「行わない」ファイルを指定できる
関数名の一部を入力すると補完される。キャメルケースの最初 1 文字目と、大文字の部分を打つと候補に出てくる。
- tsと打つと。toStringが候補に出てくる
- js ファイル内に、testHogeFugaという関数があり、thfと打つとtestHogeFugaが候補に出てくる
Ctrl + Shift + \ ⇒ ブラケット(括弧)の開始・終了にジャンプできる
設定 Editor: Suggest Selection 候補を学習に基づいて表示させる
ユーザースニペット ⇒ よく使うコードテンプレートを登録できる
ピーク ⇒ 関数の参照箇所や実装箇所を開くことができる
クイックフィックス
- 処理の関数化
- シンボルの名称変更 ⇒ 変数名や関数名の一括変更

参考

git 連携

拡張機能GitLensがあるとファイルの編集履歴などを見やすくできる
GitHub と連携できる
- レビューもコメント対応も VSCode で完結できる

参考

そのほか

Web 版 VSCode がある。インストール不要。
- GitHub 連携ができる。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up