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

## 

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

### 参考

[Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 - インプレスブックス](https://book.impress.co.jp/books/1121101051)


## 全般

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


### 参考

-   [Visual Studio Code - ステータスバー | murashun.jp](https://murashun.jp/article/programming/visual-studio-code/status-bar.html)
-   [VSCode ファイルを新しいタブで開く プレビューモード OFF - しすろぐ](https://syslog.life/2021/02/08/vscode-visualstudiocode-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB-%E9%96%8B%E3%81%8F-%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%83%A2%E3%83%BC%E3%83%89-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92/)
-   [VSCode の Zen Mode で集中力をハックする](https://zenn.dev/ryuu/articles/what-zen-mode)


## ファイル編集系統

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

### 参考

-   [VSCode の選択の便利機能紹介](https://zenn.dev/suba/articles/074b12d4e9c0df)
-   [VS Code の便利なショートカットキー - Qiita](https://qiita.com/12345/items/64f4372fbca041e949d0)
-   [VSCode 内でテキスト比較（diff）する 3 つの方法 | HPcode（えいちぴーこーど）](https://haniwaman.com/vscode-diff/)
-   [Alt から始める Visual Studio Code のショートカットまとめ | 株式会社ビヨンド](https://beyondjapan.com/blog/2016/07/start-vscode-with-alt/)


## 設定系統

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

### 参考

-   [Visual Studio Code の設定「虎の巻」：IDE 編：特集：Visual Studio Code を使いこなそう！（3/3 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/1708/23/news026_3.html)
-   [VSCode | エディターの自動保存の設定](https://www.javadrive.jp/vscode/setting/index2.html)
-   [プロジェクトごとに VSCode の色とテーマを変えて気持ちを切り替える - Qiita](https://qiita.com/mottox2/items/a5813feeaf653ef3e2c3)


## フロントコーディング

-   `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`の左側の色の四角を押すとカラーピッカーが表示できる
        -   カラーピッカーの画面に英語名やカラーコードが表示されるので押下すると、表記方法を変換できる

### 参考

-   [Emmet とは？これだけ知っておけば OK！](https://zenn.dev/miz_dev/articles/6cac5f2e32398d)
-   [Emmet（エメット）で HTML と CSS を効率的にコーディングする – 東京のホームページ制作 / WEB 制作会社 BRISK](https://b-risk.jp/blog/2021/06/emmet/)
-   Emmet の[Cheat Sheet](https://docs.emmet.io/cheat-sheet/)
-   [【駆け出しエンジニア向け】VSCode をオススメする５つの理由｜ seiya@Laravel エンジニア｜ note](https://note.com/seiya_4590/n/n7cbeb806aa74) 「おまけ」の項目
-   [Visual Studio Code には、非常に便利なカラーピッカーが組み込まれています-MSPoweruser](https://mspoweruser.com/ja/visual-studio-code-now-really-useful-color-picker-built/)


## コーディング全般

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

### 参考

-   [Prettier の対象から一部ファイルを除外する - Qiita](https://qiita.com/sugasaki/items/0ccb272b03b5ef3aeb86)
-   [VS Code：対応する括弧（カッコ）にカーソルを移動する方法 | もためも](https://motamemo.com/vscode/vscode-tips/go-to-bracket/)
-   [vscode でのサジェストを使いやすくする](https://zenn.dev/hulk510/articles/vscode-suggest-more-useful)
-   [VS Code のユーザースニペット機能の使い方メモ - Qiita](https://qiita.com/12345/items/97ba616d530b4f692c97)
-   [【コーディングが爆速に！】ユーザースニペットとは？【Visual Studio Code】](https://zenn.dev/miz_dev/articles/157a7aaad0bdcf)
-   [Visual Studio Code を使う上で良くわかっていなかった(基本的な)用語とか - Qiita](https://qiita.com/satokaz/items/dd2f16fc953e7bdb6d2f#peek-%E3%83%94%E3%83%BC%E3%82%AF)


## git 連携

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

### 参考

-   [VS Code でソースコード管理：GitLens 拡張機能を使ってみよう：Visual Studio Code で快適 Python ライフ - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/2111/19/news034.html)
-   [【VS Code】git でできること | 底辺プログラマーの戯言](https://www.mathkuro.com/vs-code/about-vs-code-git/#toc2)
-   [Visual Studio Code の Git 関連プラグイン - Qiita](https://qiita.com/akiko-pusu/items/106c82e58523beee9c4a)
-   [私は VS Code で Github に Pull Request したいだけなんです。 - 技術的な何か。](https://level69.net/archives/26310)


## そのほか

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

### 参考

-   [「Visual Studio Code」がインストール不要に。Web ブラウザで動作 - PC Watch](https://pc.watch.impress.co.jp/docs/news/1360273.html)
-   [【特集】Visual Studio Code のブラウザ版は何ができて何ができないのか? - PC Watch](https://pc.watch.impress.co.jp/docs/topic/feature/1366363.html)
-   [【インストール不要】Web ブラウザ版 Visual Studio Code を試してみた | おとといからきたいも](https://invisiblepotato.com/vscodedev00/)