勉強備忘録：ドットインストールVisualStudioCode入門
VisualStudioCodeとは？
Microsoftが開発している無料エディタ。以下、VSCode。
VSCodeを使う際に覚えておきたいこと（Windows）
1.htmlファイル作成時
・要素を入力すれば、タブは補完してくれる。
・Emmet（HTMLとcssを簡単に書ける記法）が使える。以下、例。
!を入力しEnterキーを押すと
<!DOCTYPE html>
<html lang="en"> ※日本語"ja"に変更
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>langは、デフォルトが英語を示す"en"と設定されるため、日本語のページを作成する場合"ja"に変更。英語と日本語では、文章のルールが異なるため、ブラウザに言語を認識させる必要がある。
ul>li*3を入力してEnterキーを押すと
<ul>
<li></li>
<li></li>
<li></li>
</ul>その他ファイル読み込みもEmmetが使える。
link：を入力してEnter→css読みこみのlinkタグ
script:srcを入力してEnter →Javascript読み込みのscriptタグ
2.cssファイル作成時
・色は、カラーピッカーから選択可能
・セレクターにマウスホバーをすると、セレクターの要素を
例示してくれる。
３．javascriptファイル作成時
・省略形でも補完してくれる。querySelecterの場合、
queselと入力しても補完可能。
４．言語共通
４－１．主にショートカット
・行のどこかにカーソルをおき、Ctr+C、Ctr+Xで行ごとコピー＆ペースト（範囲の選択は不要）
・ファイル名にマウスホバーで、ファイルへ移動、ない場合は作成可能。
・範囲を選択してCtr+/でファイル種別に応じて、コメントアウト
・Alt+矢印キーで、行ごと移動
（複数行選択すれば選択した行ごと移動可能）
・Alt+Shift+矢印キーで、行ごと複製
（複数行選択すれば選択した行ごと複製可能）
・Ctr+Enterキーで、次の行を挿入（カーソルが行間でもよい）
・Ctr+Shift+Enterで、前の行を挿入（カーソルが行間でもよい）
４－２．マルチカーソル
・Alt+Clickで、複数個所にカーソルをおける
・単語を選択+Ctr+Dで、二つの同じ単語を選択できる
・単語を選択+Ctr+Shift+Lで、ファイル内の全部の同じ単語を選択できる
・Ctr+Alt+矢印で、カーソルを垂直方向に増やす
４－３．検索・置換
・Ctr+Fでファイル内検索、F3で、次の検索結果に移動
・Ctr+hでファイル内での置換
・ファイル全体の検索は、Activitybarの検索メニュー
単語ごとの検索、正規表現、大文字小文字検索など詳細検索も可能
5．その他
・Ctr+bで、ActivityBarの表示非表示
・タブ表示でなく、分割表示も可能
・RictyDiminished→プログラミング用フォント
・コマンドパレット（Ctr＋Shift＋ｐ）で設定変更可能
・AutoSave設定→afterDelay(編集後、自動更新)
・tabsize設定→2(デフォルト４だと横に長くなる)
・RenderWhiteSpace設定→空白を・で表示
・Wordwrap設定→折り返し設定
受講した感想
エディタを使いこなせると、開発の生産性は間違いなく上がると思うので、
動画で体系的に学ぶことができてよかった。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？