VSCode 覚え書き
自分用メモ
新しいPCに設定コピー
古いPCの以下のファイルをコピーして新しいPCに上書きする
C:\Users\ユーザー名\.vscode\
C:\Users\ユーザー名\AppData\Roaming\Code\User\
php + tab でphpタグ<?php ?>を自動入力
file > Preferences > Configure User Snippets
検索窓でhtml.jsonを検索して開く
//html.json
{
"php": {
"prefix": "php",
"body": [
"<?php $1 ?>"
],
"description": "php tag"
}
}
固定スクロール解除
//settings.json
{
...
"editor.stickyScroll.enabled": false
}
ショートカット
wrap選択 | Shift + Alt + → |
行コピー | Shift + Alt + ↓ |
行入れ替え | Alt + 上下キー |
Explorer の表示 | Ctrl + Shift + E |
再度 Bar の表示 | Ctrl + B |
ターミナル起動 | Ctrl + Shift + @ |
必須な拡張機能
選択範囲の拡大
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-36.png)
CSS
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-34.png)
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-35.png)
CSS & JavaScript
コード圧縮
![](https://illustswitch.com/blog/wp-content/uploads/2023/01/image-16.png)
デフォルトでは保存時に自動圧縮されない。
もともと圧縮ファイルがある場合は保存時に自動で圧縮※これが良いと思う。
![](https://illustswitch.com/blog/wp-content/uploads/2023/05/minify-exist.png)
保存時自動圧縮
![](https://illustswitch.com/blog/wp-content/uploads/2023/05/minify.png)
ブラウザ 自動リロード
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-40.png)
右下にアイコンが出てこない場合は、エクスプローラーのファイルを右クリック > 「Open with LIve Server」
WordPress開発
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-39.png)
その他便利なもの
HTMLとCSSのクラス名を行ったり来たり。右クリックで「Go to Definition」
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-41.png)
Emmet ライクに記述できる
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-45.png)
Explorer 見やすくなる
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-46.png)
無駄なスペースが入ってないか教えてくれる
スペース削除 F1 > Trailing Spaces: delete
![](https://illustswitch.com/blog/wp-content/uploads/2022/12/image-47.png)
PHP
PHP_CodeSniffer(phpcs)を導入する ※Windows環境
CSS
Sass(SCSS)& VSCode で Stylelint を使う