点数
74点
感想
初めてVSCodeに触れる人向けの内容であり、VSCodeや他のIDEを使ったことがある人にとっては少々物足りない内容だった。
選択範囲の追加、行単位での移動・コピー、ブラケットに移動、は作業を効率化することができるので積極的に使うべきだと思う。
導入
日本語化
- 拡張機能Japanese Language Pack for Visual Studio Codeをインストール
- command+shift+Pでコマンドパレットを起動しconfigure display languageでjaを選択
setting.json
- 設定画面の内容はsetting.jsonに反映される。
- 設定画面の右上にある「設定（JSON）を開く」アイコンをクリックするとsetting.jsonを直接編集することができる。
Zenモード（編集に集中）
メニュー⇒表示⇒外観⇒Zen Mode
または
command+Kの後にZ
キーボードショートカット一覧
左下の歯車アイコン⇒キーボードショートカット
または
コマンドパレット⇒keyboard shortcut
ワークスペース
- ワークスペースを作成すると、複数のフォルダを開くことができる。
- メニュー⇒ファイル⇒フォルダーをワークスペースに追加、で新しいワークスペースを作成することができる。
- メニュー⇒ファイル⇒名前を付けてワークスペースを保存、で.code-workspaceという拡張子のファイルが生成される。
テキスト編集のテクニック
選択範囲の追加
- テキスト選択中にcommand+Dを押すたびに同じテキストが追加選択される。
- command+shift+Lで全て選択される。
- 検索・置換よりも少ない操作でテキストを変更できる。
行単位での移動・コピー
- option+↑↓
- 選択した行を移動することができる（テキスト未選択の場合は単一行）
- カット&ペーストよりも少ない操作で移動できる。
- shiftも押すとコピーになる。
ブラケットに移動
- command+shift+\で閉じカッコに移動することができる。
シンボルの名前変更
- 変数や関数の名前を変更するときは、F2（または右クリック⇒シンボルの名前変更）
Emmet
- HTMLやCSSの入力支援ツールで、VSCodeに標準搭載されている。
- p.hoge ⇒
<p class="hoge"></p> - .hoge ⇒
<div class="hoge"></div> - p.hoge>span.hgoe2 ⇒
<p class="hoge"><span class="hoge2"></span></p> - p+img ⇒
<p></p><img src="" alt=""> - ul>li*3 ⇒
<ul><li></li><li></li><li></li></ul>
Prettier
PrettierはJavaScript, TypeScript, JSON, CSS, HTML, Markdownなどに対応している。
Prettierの導入
- 拡張機能「Prettier – Code formatter」をインストール
- 設定の「Editor: Default Formatter」でPrettierを選択
- エディタでshift+Option+F
主な設定
- Prettier: printWidth: 折り返す文字数
- Prettier: semi: 末尾のセミコロン
- Prettier: singleQuote: 文字列をシングルクォートで囲む
- Editor: Format On Save: ファイル保存時に自動でフォーマット
※ .prettierrcを作成すると設定画面よりも優先される
※ .prettierignoreで除外ファイルを指定
その他の拡張機能
Live Server
- 簡易WEBサーバにより、HTML・CSSのプレビューを確認することができる。
- ファイルを更新するとライブリロードによりプレビューも更新される。
- 拡張機能「Live Server」をインストールし、エディタ右下の「Go Live」をクリックするとサーバが起動される。
CSS Peek
- CSS定義をミニウィンドウで表示したり、定義に移動したりすることができる。
- HTML上のクラスやIDを右クリック⇒ピーク（またはoption+F12）
- HTML上のクラスやIDを右クリック⇒定義へ移動（またはF12）
Auto Rename Tag
- 開始タグを変更すると終了タグを自動で変更してくれる。