概要
こちらで紹介していた小技をさらに深掘っていきます。
小技一覧
| No | 小技手順 | 説明 |
|---|---|---|
| 1 | 折りたたむ ▼ コピー/移動/削除/コメントアウト |
ひとまとまりのものを編集できる |
| 2 | 単語を選択 ▼ '/{/[/(/etc… |
選択した単語を囲んでくれる(半角記号のみ) |
| 3 |
""/''/{}/()/[]等 |
1つ書けばもう1つ保管して真ん中に移動してくれる |
| 4 | フォルダ右クリック ▼ 統合ターミナルで開く押下 |
好きなフォルダでターミナルを開く cdでの移動簡略化 |
| 5 | 選択して右クリック | ターミナルの文言コピー/貼付け |
| 6 | エディタのタブ上でスクロール | 開いてるタブを横スクロールできる |
| 7 | 単語を選択 ▼ コマンドパレット表示 ▼ transformでケース選択 |
様々なケースに変換可能 |
| 8 | CodeSpellCheckerの エラーが出ている(青波線)単語選択 ▼ クイック修正で Add: "" to workspace settings選択または コマンドパレットで Add Words to Dictionaryを選択 |
・正しい単語をCodeSpellCheckerに登録する ・VSCode毎/フォルダ毎に設定可能 ※拡張機能 CodeSpellCheckerの機能 |
| 9 | コマンドパレット表示 ▼ Reload Window選択 |
ウィンドウの再読み込み |
| 10 | コードスニペット | よく使うコードパターンを登録して、コーディング時に登録コードを呼び出すと、呼び出した箇所に貼り付けてくれる機能 |
No.1 折りたたみの応用
手癖おすすめ度：⭐⭐⭐
開く/閉じる系のNo.6を応用すれば、様々な場面で活用できます。
例えば、入れ子になりすぎててどこが終了タグか分かりにくい時など、折りたためば一瞬でひとまとまりになるので、コピーも移動も削除もコメントアウトも容易にできます。
手癖にすれば開発効率上がること間違いなしですよ♪
No.2・3 記号囲み
手癖おすすめ度：⭐⭐⭐
この小技は初学者だと知らない人が結構います。
記号で単語や文を括りたい時、例えば'hoge'や(hoge)、{hoge}など、左から順に打ち込んだり、単語や文の左横と右横にいちいちカーソルを当てて記号を入力したりしがちです。
VSCodeは、セットの記号であれば始まりの記号を入力した時点で終わりの記号を入力してくれてかつ、記号の間にカーソルを当ててくれます。
また、記号で囲みたい部分を範囲選択して始まりの記号を入力すれば、勝手に終わりの記号を入力してくれます。
気づいていないとすごく損なので、今気づいた方がいらっしゃいましたらマストで手癖にしましょう！
筆者は手癖のせいで、VSCode以外でやってしまって手間になることが多いので、それには気をつけてくださいね笑
No.4 cd移動簡略化
手癖おすすめ度：⭐
マウスを使えばターミナルでのcd移動を簡略化できます。
cdでの移動が手癖になっている方には必要がないかもしれません。
ただ、あまりにも違う階層に移動したい場合は面倒くさいですよね。
開きたいフォルダを右クリックして統合ターミナルで開くを押下すれば開いてくれますよ！
No.5 ターミナルの文言コピー/貼付け
手癖おすすめ度：⭐
こちらもマウスを使っての小技です。
ターミナルでコピー＆ペーストしたい際、もちろんctrl+cとctrl+vは使えるのですが、マウスだと右クリックだけでどちらも行えるので、とても便利です。
No.6 エディタのタブスクロール
手癖おすすめ度：⭐
こちらもマウスを使っての小技です。
エディタを開きすぎている時、移動系のNo.9を使うのもいいですが、マウスでタブ上をスクロールしても見やすいですよ。
No.7 単語のケース変換
手癖おすすめ度：⭐⭐⭐
単語には様々なケースがあります。
- キャメルケース（camelCase）
- パスカルケース（アッパーキャメルケース）（PascalCase）
- スネークケース（camel_case）
- アッパースネークケース（UPPER_SNAKE_CASE）
- ケバブケース（kebab-case）
などなど・・・いちいち書き直すの面倒ですよね。
コマンドパレットを使えば簡単です！
初回は履歴に無いと思うので、transformで検索してくださいね！
No.8 CodeSpellChecker使用時の単語登録
手癖おすすめ度：⭐⭐
こちらは、CodeSpellCheckerという拡張機能を使っている方向けの小技です。
スペルミスには気づきたいけど、プロジェクト内の造語は許容したい時ありますよね。
そんなときもCodeSpellCheckerのエラーが出てたら、少しストレスではないですか？
単語登録をしておけば解決です！
設定ファイルは.vscode > settings.jsonに作成されるので、手入力でも問題ないですよ。
No.9 ウィンドウの再読み込み
手癖おすすめ度：⭐⭐
こちらはウィンドウを読み込みたい時、わざわざ閉じて開かなくてもコマンドでできるよというものです。
No.10 コードスニペット
手癖おすすめ度：⭐⭐⭐
コードスニペットとは、よく使うコードパターンを登録して、コーディング時に登録コードを呼び出すと、呼び出した箇所に貼り付けてくれる超便利効率UP機能です。
個人個人でカスタムもできますし、プロジェクト毎に共通のスニペットを作成することもできます。
記述する必要がありますが、覚えてしまえば簡単なのでぜひ使ってみてください！
例えば、以下のスニペットを定義します。
{
"print to console": {
"scope": "typescript,typescriptreact",
"prefix": "log",
"body": [
"console.log($1);",
"$2"
],
"description": "log output to console"
},
}
scope：スニペットを使えるファイルタイプ。
prefix：呼び出し時に入力するトリガー文字列。
body：展開されるコード本体。
description：サジェストに表示される説明文。
$n：カーソルの当たる順番。tabキーで移動できます。
※矢印などでカーソルを移動してしまうと認識できなくなるので注意です。
するとこうなります。
自分だけのコードスニペットを定義して、効率を上げまくりましょう！
おわりに
今回は小技について一覧よりさらに深掘って説明させていただきました。
他にもこんな使い方あるよ！便利だよ！などありましたらコメントいただけると幸いです。
Discussion