WEBプログラミング入門

VScodeの基本

基本知識

画面構成

  • アクティビティーバー(左端のアイコン)
  • サイドバー(アイコンの詳細Ctrl+Bで表示切替)
  • エディター(メイン部分)
  • パネル(ターミナルやコンソール部分)
  • ステータスバー(下端の各種ステータス表示部分)

用語

  • ワークスペース:開発プロジェクトごとの作業環境
  • 定義、参照:多くの言語ではマウスオーバーで定義のドキュメントが表示される。またシンボルの右クリックメニューからも移動できる。右クリックのFind All Referencesを選ぶと参照検索結果ビューが開きその定義を参照している箇所が一覧で表示される。
  • エクスプローラー:アウトラインビューにはソースコードのシンボルが階層構造で表示される。クリックすることでしてしたシンボルに移動。エディターとタブの間のパンくずリストでも確認できる。

よく使うショートカット

基本

F1コマンドパレット
windowsRcodeEnter通常起動
windowsRcode -nEnter新規で起動
windowsRcode .Enterホームディレクトリで起動
Ctrlターミナル表示・非表示
CtrlBサイドバー開閉
Ctrl1エディタにフォーカス
Ctrl\Settings.jsonを開く(自作ショートカット)
Ctrltabタブ切替
Ctrlalt+左右矢印複数ファイルエディタ分割→戻す←
CtrlWアクティブタブ閉じる
Ctrl\開いているファイルを左右分割
CtrlShiftEエクスプローラービュー表示
CtrlSpaceコード、スニペット補完候補表示
Alt←→元のファイルに←戻る、→やり直し
F12定義へ移動
AltF12定義を小窓に表示
Ctrl/ラインコメント
AltShiftAブロックコメント

カーソルの移動

CtrlHome,End行の先頭、末尾に移動(Shift押しながら範囲選択)
CtrlShiftEnter上に行追加
CtrlEnter下に行追加
CtrlShift\対応する括弧にカーソル移動
CtrlG行No指定した行Noに飛ぶ
CtrlHome最上部に飛ぶ
CtrlEnd最下部に飛ぶ

範囲選択

エディターの行部分ドラッグドラッグ範囲の行選択
CtrlL行選択(複数回クリックで行追加)
CtrlShift\対応する括弧にカーソル移動
AltShift単語、括弧などの囲み範囲選択←で範囲縮小
選択したい範囲の最初にカーソルをもってきて範囲の最後の位置でshift押しながらクリックカーソル位置からクリックした範囲全選択

コピー、貼り付け、移動等

行を選択してShiftAlt選択行をコピー
Alt↑↓選択行の移動(上下入れ替え)
何も選択せずにCtrlCカーソルがある行コピー
何も選択せずにCtrlXカーソルがある行切取
CtrlShiftK行削除
CtrlBackSpaceスペースで区切られた直前の単語削除

インデント、フォーマット

Tabカーソル位置のインデント追加
ShiftTabインデント削除
Ctrl]行頭にインデント追加
Ctrl[行頭のインデント削除
何も選択せずにCtrlCカーソルがある行コピー
ShiftAltFコード整形(フォーマット)
CtrlK,CtrlF選択範囲のフォーマット

折り畳み

CtrlKCtrl0インデントをすべて折りたたむ
CtrlKCtrlJインデントをすべて展開
CtrlShift[カーソルがある範囲折り畳み
CtrlShift]カーソルがある範囲展開み
CtrlK,Ctrl1~7数字のレベルで折り畳み

検索・置き換え

CtrlPファイル名クイック検索
CtrlTすべてのファイルのシンボルをあいまい検索
CtrlF検索
Aa大文字小文字区別
Abl単語の完全一致(前後スペース)
.*正規表現有効
三(右端の×の横)選択範囲に対して、検索、置き換えを実行
F3,ShiftF3 次、前の検索結果へ
CtrlH置き換え
AB保持する
b-cカーソル位置の単語のみ置き換え
ab-acすべて置き換え

マルチカーソル

マウスのホイールボタン押したままドラッグドラッグ範囲にマルチカーソル追加
Alt押したまま選択位置を複数クリッククリックごとにカーソル追加
AltShift+ドラッグ範囲ドラッグ範囲がマルチカーソルになる
マルチカーソル状態でHomeEnd行頭、行末がマルチカーソルになる
CtrlAlt↑↓カーソル位置の上下にマルチカーソル(戻せない)
CtrlAltShift↑↓短径選択を上下左右に広げる・縮小(戻せる)
CtrlF2選択した単語をすべて選択
CtrlShiftL選択した単語をすべて選択
CtrlD単語選択(複数回で同じ単語を順番に選択)
ShiftAltI選択範囲の末尾がマルチカーソル

bash_profileを作成

VScode上のbashエイリアスを設定

terminal
cd ~
//.bash_profileを作成
touch .bash_profile
code .bash_profile
editor
//エイリアス設定例↓
alias la="ls -la"
alias ll="ls -l"
terminal
//設定を反映
source .bash_profile

VSCodeのGitBashはインタラクティブシェルのため、起動時に.bash_profileを読み込まない。起動時に読み込むためには、ログインシェルとして開くための設定が必要。settings.jsonでオプション引数を設定する。

editor(settings.json)
//既定のシェルをbashにする
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
//-lオプションを設定してログインシェルとして開く
"terminal.integrated.shellArgs.windows": ["-l"],

拡張機能追加

  • Bracket Pair Coloriz:括弧の対応色付け
  • Highlight Matching Tag:HTMLタグハイライト
  • Color Highlight:カラーコードハイライト
  • Git History:コミット履歴
  • Indent-Rainbow:インデントに色付け
  • Japanese Language Pack:日本語化
  • Code Spell Checker:スペルチェック
  • JavaScript (ES6) code snippets:JSスニペット
  • JS & CSS Minifier(Minify):JS、CSSファイル軽量化
  • Live Server:自動リロード
  • PHP Debug:PHPデバッグ
  • PHP Extension Pack:PHPデバッグとIntelliSenseを含んだパック
  • PHP Intelephense:PHPコード補完
  • Prettier-Code formatter:コード整形
  • Remote - SSH:VSCodeからSSH接続
  • SFTP:VSCodeからSFTP接続
  • Visual Studio IntelliCode:入力支援
  • Zenkaku:全角可視化

設定ファイルの場所(環境移行は下記フォルダをコピー)

explorer
//setting.json・ユーザースニペット・キーボードショートカット
C:\Users\ユーザー名\AppData\Roaming\Code\User
//拡張機能
C:\Users\ユーザー名\.vscode

設定の優先順位:ユーザー<ワークスペース

ワークスペースで設定を上書きすると、ワークスペースに.vscodeディレクトリができる。ワークスペースの.vscode\settings.jsonはC:\Users\ユーザー名\AppData\Roaming\Code\User\settings.jsonより優先される。
.vscode\launch.jsonはデバッグ構成用のを押すと自動で作成される。

関連リンク