はじめてのVS Code 超基本の動作まとめ

備忘録としてのメモになります。OSはMacBookでの動作になります。
# VSコードの設定変更
* [Code] - [基本設定] - [設定]もしくは、ショートカットキー`⌘,` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/69e79979-79ef-36aa-8dec-17c00a2dfd0c.png)
* Commonly Used よく使用する設定
　Auto Save - 自動保存
　Render Whitespace - 空白表示
　Word Wrap - 行の折り返し方法　etc
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/35762d21-3606-7723-4384-0efb0a72d440.png)
* `⌘q`でアプリを終了する。

# 画面の基本操作
* ウェルカム画面は、[ヘルプ]からいつでも呼び出せる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/46ebe72c-991d-8b8c-fb3f-ef32b1996be4.png)
* アクティビティーバーの表示非表示
[表示] - [外観] - [アクティビティ バーを表示する]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/6d42769f-c172-39c5-ff00-0da67fa0742f.png)
* サイドバーの表示非表示　`⌘b`
* 画面分割　タブを適当な位置に移動すれば、画面分割もできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/a4fe0705-0947-2bbb-7bfe-866bc7744b89.png)
* 拡張機能の設定と確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/e3ecb2b8-a6ba-3ff2-f047-bfcc5f8ead54.png)


# エディター操作
* `⌘c`コピー、`⌘x`ペースト 
テキスト選択せずに、カーソルだけ当てた状態で`⌘c` `⌘x`とすると、
行ごとコピー、カットできる。
* 新規ファイル作成
リンクの上にカーソルをホバーして、「リンク先を表示」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/b096bfbf-4313-40f6-daeb-40724713fb9d.png)
「ファイルを作成」をクリックすると、作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/a2504823-697a-068e-14f6-c74c01318862.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/265b69f8-dc08-c0e8-863b-201687a4a452.png)
* CSSのカラーピッカー　
色を指定すると、カラーピッカーが出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/87d8543d-e2ec-028a-00cb-f9a773c238f2.png)
* コメントアウト　`⌘/`
```css:style.css
/* コメントアウトは　⌘/ */
h1 {
  color: red;
}
/* h1.title {
  color: red;
}
h1 .title {
  color: red;
} */
```
* `option` `▲▼` 
カーソル位置にある行の移動ができる。
```html:index.html
/* item1をitem2の下に移動する */
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
/* option+▼ を1回実行 */
<ul>
  <li>item 2</li>
  <li>item 1</li>
  <li>item 3</li>
</ul>
```
* `shift` `option` `▲▼`
カーソル位置にある行の複製ができる。
```html:index.html
/* item3を下に2つ複製する */
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
/* shift+option+▼ を2回実行 */
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 3</li>
  <li>item 3</li>
</ul>
```
* 行末まで移動せずに改行を挿入する方法
`⌘enter` ・・・　下に改行挿入
`shift` `⌘enter` ・・・　上に改行挿入

### マルチカーソルについて
複数の箇所を同時に編集することができるマルチカーソルについて。
* `option` `左クリック`キー　・・・　マルチカーソルを手動で当てる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/a9bf2846-7ade-f15b-f9eb-93446ca5e1d7.png)
* `⌘d` ・・・　同じ単語にカーソルを当てる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/281294e8-eaab-5929-872f-a3187edb25cb.png)
* `⌘` `shift` `l` ・・・ 一括で同じ単語にカーソルを当てる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/c2aa17c8-65d0-e20e-276c-d3a930949a10.png)
* `⌘` `option` `▲▼` ・・・ 真上や真下にカーソルを当てる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/d6103579-5f0e-4c4c-7249-6a61942e6e14.png)

### 検索・置換について
* `⌘f` ・・・　ファイル内の検索、`⌘g`で次を検索、`shift` `⌘g`で前を検索
* `option` `⌘f` ・・・ ファイル内の置換
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/8727573f-a473-e91f-ad91-a77c5765aabc.png)
* フォルダ内検索と置換は、アクティビティーバーの🔎アイコンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/d708c9a2-c0a7-bdb2-1a87-65e68ca2de9a.png)


# Emmet記法
HTML CSSを簡単に書ける記号。VSコードに標準搭載されている。
（詳細は省くが基本的なものを一部抜粋）

:::note warn
設定確認
Emmetを使用するには、左下の歯車アイコン⚙をクリック→「Settings」（設定）→検索窓に「Trigger Expansion On Tab」と入力→チェックマークが入っていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/ccd018b7-dfa1-9533-56a2-34693e3b6ee6.png)
:::

* `!` ・・・ HTMLのテンプレートを呼び出す
```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```
* `ul>li*3` ・・・ 簡単なリストを作成できる。
```html:index.html
<body>
//ul>li*3
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</body>
```
* `link:css` ・・・ CSSのリンクを読み込むためのリンクタグ
```html:index.html
  //link:css
  <link rel="stylesheet" href="style.css">
```
* `script:scr` ・・・ javascriptのリンクタグ
```html:index.html
  //script:scr
  <script src=""></script>
```

# コマンドパレットの使い方
さまざまな機能や設定にアクセスすることができるコマンドパレットについて
* [表示] - [コマンドパレット]もしくは、ショートカットキー`Shift` `⌘P`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/22859b7f-3ea1-33c9-2e2d-c6940fa86b9b.png)
* カラーテーマの変更
コマンドパレットから`>theme`と入力する。配色設定の変更ができる。
カーソルキー`▲▼`で配色設定のプレビューが見れる。
![VSスクショ3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/4b4f50f5-6efe-3603-0636-8ac6688c52e1.gif)
* ショートカットキーの検索
`>sidebar`と入力すると、ショートカットキーが`⌘b`だと確認することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185869/d5b9e8c7-326f-be4a-742f-044cd0b9ed8c.png)