エンジニア、コーダーなら多くの人が使っているVSCode。せっかく素晴らしいツールですから、なるべく多くの機能を使って効率的に開発したいところ。
VSCodeのようなリッチテキストエディタを使うメリットの1つは、なんと言ってもショートカットキーですよね！でもショートカットキーが何個もあって覚えられない・・・
そこで今回はWeb制作で役立つショートカットに絞ってまとめました。フリーランスで8年フロントエンドエンジニアをしている僕も毎日のように使うものだけを厳選して集めましたのでぜひブックマークしておいてください！
option + 上下矢印 ｜ 行を入れ替える
コードを書いているとたまにHTML要素の順番を入れ替えたい時があります。コピペでも良いのですが、option + 上下矢印で行の入れ替えが出来ます。
あくまで行の入れ替えのため複数行の要素単位で入れ替えはできませんが、時々使います。
option + shift + 上下矢印 ｜ 行をコピーする
行をコピーしたいときももたまにあります。これもコピペでも良いのですがoption + shift + 上下矢印というショートカットで行えますので覚えておきましょう。
option + command + 上下矢印 もしくはoptionを押しながらクリック ｜ 複数行の同じ位置を選択する
複数行に対して同時に同じ変更をしたい時があります。例えばクラス名の変更です。一括置換で良い場合もありますが、全てを変更したいわけではない場合もあります。そういった時に使えます。
option + command + 上下矢印
行が連続していて、かつ同じ文字数の位置の場合はショートカットが速いです。
optionを押しながらクリック
行、もしくは文字数の位置が離れている場合はこちらを使いましょう。
option + command + f ｜ ファイル内検索 / 置換
ファイル内で文字列を検索、あるいは置換するためのボックスを開くことができます。
時々クラス名の一括置換をしたいケースなどがありますので、覚えておきましょう。
command + shift + h ｜ ファイル横断検索 / 置換
特定のファイルではなく、フォルダ全体に対して検索もしくは置換をしたい場合があります。ページ数が多いと必然的にファイル数も増えますからね。
そんな時にはこちらを使いましょう。複数のファイルを横断して検索ができます。
ダブルクリック ｜ 単語を選択する
特定の文字を選択するにはドラッグを使う方が多いのではないでしょうか。狙った部分をドラッグで選択するのは地味ながら面倒ですね。選択したいものが単語なら、ダブルクリックで素早く確実に選択できます。
トリプルクリック ｜ 行を選択する
通常のWebページなどでトリプルクリックすると段落を選択しますが、VSCode上では行の選択になるようです。
後からクォーテーションで囲む ｜ 選択してからcommand + 2 or 7
文字列として扱いたい部分を間違えてクォーテーションなしで記述してしまうことってありますよね。普通に追加しようとすると離れた場所にカーソルを持っていく必要がありますが、実は範囲選択をしてからであればその範囲を囲んでくれます（次のgifではダブルクリックで範囲選択をしています）。
もっと効率よくコーディングするための裏技を手にする
コーディングを爆速にするには、あといくつかのツールを使うだけです。知っているか知らないかでコーディング速度は10倍くらいの差が出てしまいます。
自分が1ページ作っている間にあの人は10ページ作っているかも・・・なんてことにならないようしっかりノウハウを持っておきましょう！爆速コーディングに必要なすべてをまとめた本を出していますのでぜひ以下のリンクからお買い求めください！
コメント