前菜
VSCodeでコードを書くとき、テキストを選択する必要がよくあります。例えば下図のように。
しかし、ほとんどの場合、私たちが選択したいのはクラス名全体です。下図のように。
実はこれにはVSCodeのトークン分割メカニズムが関係しています。VSCodeは-をテキストの区切りと見なします。
実は-だけでなく、他の文字もVSCodeでは区切り記号と見なされます。
そこで親切なことに、以下のような設定が用意されています。
{
// 以下はVSCodeが区切り記号と見なす文字です
// 設定でeditor.wordSeparatorsを検索してください
// 必要に応じて不要な区切り記号を削除できます
// たとえば@を削除すると、less変数やデコレータ（@xxx）を直接選択できます
"editor.wordSeparators": "`~#!@$%^&*()-=+[{]}\\|;:'\",<>/?."
}
私はWebStormの設定をすべて確認しましたが、同様の設定は見つかりませんでした。もしWebStormでこの設定方法をご存知の方がいらっしゃいましたら、コメントで教えてください。
もしこのような小さな設定がコード作成の効率と幸福感を向上させると感じたなら、ぜひこの先も読み進めてください。きっと期待を裏切りません>_<
VSCodeとのあまり美しくない出会い
私はJavaでプログラミングに入門し、最初に触れたエディタはEclipseでした。その後IntelliJ IDEAが人気を博し、初めてJetBrains社のエディタに触れました。IDEAを使い始めたとき、その違いに深く衝撃を受けました。エディタにもこれほどの差があるのかと。その後、偶然のきっかけでフロントエンドになり、同じくJetBrains社製の本格的なフロントエンドエディタWebStormに初めて触れました。IDEAに慣れていたため、ほぼシームレスに移行できました。
もともと数学に強い興味を持っており、子供の頃には算数オリンピックに参加し、アルゴリズム問題にも触れたことがありました。さらにJava開発の経験もあったため、TypeScriptの習得は早く、非常に興味を持ちました。この2つに長けていたおかげで、学歴が平凡で、コンピュータ関連の専門でもなかったにもかかわらず、jzやlaの面接官に認められ、同僚として働くことができました。
jzに入社したばかりの頃、会社は正規のJetBrains開発ツールを提供していました。しかし周りの同僚が無料のVSCodeを使っているのを見て、非常に驚きました。なぜWebStormを使わずにVSCodeを使うのか？有料の方が絶対に良いはずだと。そのため、チーム内でWebStormを使っていたのは私だけでした。その後、セキュリティ上の理由でチームに特定のプラグインをインストールする必要が生じましたが、最初はVSCode版しかなく、つまりVSCodeを使わざるを得ませんでした。使ってみましたが、まるで白紙のようで非常に違和感があり、使用を拒否し、メンターと大げんかしました。
今思うと、おそらく有料版を購入した時点で、すでに「CPU」（洗脳）されていたのでしょう。自分が無駄遣いをしたわけではないと自分に言い聞かせるために、自己催眠をかけていたのだと思います。ここでメンターに感謝しなければなりません。当時の私は頭がおかしかったと思いますが、それでも彼女は見捨てず、心理部門の同僚を紹介してカウンセリングを受けさせ、プラグイン開発グループの同僚にVSCodeの関連設定を説明してもらい、開発をより効率的にしてくれました。人生で出会った助けてくれた人々に感謝します――この世界は優しくはないけれど、本当に優しい人もいるのです^_^
前置きが長くなりましたが、本題に入ります。フロントエンド開発の分野はそれぞれ異なるため、分類して説明します。
共通
文字列内のファイルパスから対応ファイルに素早くジャンプ
一部の文字列内のファイルパスは、cmd+クリックでジャンプできます。例えば、ほとんどのインポート文は下図のようになります。
しかし、他の位置にある文字列内のファイルパスは、ほとんどの場合ジャンプできません。下図のように。
プラグインをインストールします。
https://marketplace.visualstudio.com/items?itemName=duXing.quick-go-to-selected-file-path
ファイルパスを含む文字列にカーソルを置き、cmd + e（Windowsはctrl + e）を押します。
すると最も一致するファイルの検索がポップアップします。私の使用経験では、最初の候補が常に最も一致します。
デフォルトの動作が合わない場合は、文字列を手動で選択すると、選択した文字列で正確に検索されます。
このショートカットキーが気に入らない場合は、自分で変更できます。
より迅速で明確なデバッグ出力
問題を調査するために何かを出力する必要があることがあります。ほとんどの場合、これはテンプレート操作です。
下図のように、出力したい変数をコピーし、カスタムコードスニペットを入力します。
"log打印": {
"prefix": "clog",
"body": ["console.log('[ $CLIPBOARD ] >', $CLIPBOARD)$0"],
"description": "log打印",
"scope": "typescript,typescriptreact,javascript,javascriptreact"
},
マクロ設定で1ステップで完了することもできます。
プラグインで実現することもできます。同様のプラグインは多数あります。
その一例を挙げます。興味があれば「console」というキーワードで検索してみてください。
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
ついでに、非常に便利なVSCodeコードスニペット生成ツールを紹介します。
https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode
例えば、よく使うコードスニペットやWebStormで便利だったスニペットを移行する場合。
明確なコードハイライト
コードを確認するときに対応ファイルを開く必要がなく、マウスホバーさえしなくても、そのコードがどのような型かわかります。
紫色の太字のプロパティを見れば読み取り専用だとわかります。
緑色の斜体を見れば列挙型だとわかります。紫色の斜体は列挙値です。
黄色の下線を見ればasyncで修飾されたメソッドだとわかり、awaitを付けて呼び出すべきかどうかを意識するようになります。ESLintなどでも検出できますが、それは一律にすべて警告します。実際には必ずしもawaitを付ける必要はありません。すべての警告が良いのでしょうか？役に立たない警告や誤った警告は、コードを書く気分を損なうだけです。それはある種の意味を表現するべきであり、変数やプロパティなどとは異なる、私の好きな他の色で表現すればよいのです。
より素早い機能へのアクセス
エクスプローラーやソース管理パネルの機能タブはドラッグまたは非表示にできます。
不要なタブを非表示にしてエクスプローラーをすっきりさせることができます。
また、よく使うGitLensのタブをドラッグして、Gitビューのスペースを広く、より明確にすることもできます。
フォルダ階層をより明確に
デフォルトでは、フォルダの中にフォルダが1つだけある場合、それらは結合して表示されます。
下図のように、styleの下にあるフォルダはpublicでしょうか？
いいえ、実際はcssです。このような統一されていない表示は少なくとも私には混乱を招きます。
以下の設定を変更すると、下図のように表示されます。
"explorer.compactFolders": false
素早く開いて、VSCodeの強力な機能を活用してプロジェクト外のファイルを編集
ツールをインストールして使用する際に、設定ファイルやhostsファイルなどを編集する必要があることがあります。そのような記事では、通常vimなどのコマンドを使用するよう指示されますが、正直なところ非常に使いづらく、見た目も不鮮明で編集も不便です。下図のように。
実はVSCodeにはcodeコマンドが用意されており、ファイルやフォルダを簡単に開くことができます。同じファイルを編集する場合も同様です。
ターミナルで選択したテキストを自動コピー
プロジェクトを起動するときにエラーが発生し、それを解決するためにネット検索する必要があることがあります。
その際、ターミナルに出力されたキーワードを検索する必要があるため、自動コピーを設定しておけば手動コピーの手間が省けます。
"terminal.integrated.copyOnSelection": true
ドラッグ＆ドロップによる選択内容の移動を禁止
テキストを選択した際に、誤ってコードを別の場所に移動してしまうことがあります。下図のように。
これは人によりますが、私はこの機能は必要なく、むしろ誤操作で混乱することがあるため、以下の設定を行います。
// falseに変更するとドラッグが禁止されます
"editor.dragAndDrop": false
コードヒントとジャンプ
package.json
一部のパッケージのバージョンは^で修飾されており、バージョンが完全に固定されていません。特定のマイナーバージョンに問題があり調査が必要な場合があります。
その場合、実際にインストールされているバージョンを確認する必要があります。
下図のように、現在インストールされているバージョン、最新バージョンを確認でき、詳細を直接見ることもできます。
間接的に依存しているパッケージはpackage.jsonに記載されていないことがあります。node_modulesに実際に存在するかどうかを確認するには、直接検索できます。lodashを例にとると、下図のようになります。
Vue
プロパティやメソッドのヒントとジャンプ
CSSクラス名のヒントとジャンプ
Vuexのジャンプ
ファイルパスのヒントとジャンプ
React
私は主にReactを使用していますが、VSCodeのReactサポートはVueよりも優れていると感じています。上記のVueで可能なことはReactでもすべて可能なので、繰り返しません。
ここではCSSの例を簡略に示します。
ついでに関連することを一つ。属性の値、たとえばclassNameが文字列なのかJSX式なのかについて、VSCodeはデフォルトで自動推論します。つまり、classNameはデフォルトで文字列と見なされます。
これにより問題が発生します。例えば、私のプロジェクトではCSS Modulesを使用しており、実際にはJSX式を入力する必要があります。むしろ、多くの属性値（classNameを含む）はJSX式を入力したいと考えるのが普通でしょう。以下の設定が可能です。
"javascript.preferences.jsxAttributeCompletionStyle": "braces",
"typescript.preferences.jsxAttributeCompletionStyle": "braces"
ところでWebStorm、大文字小文字すら認識できなくなったのか？これで正しく動作するのか？それで****ジャンプ？本当に**！
ここでWebStormの大きな欠点を挙げなければなりません。常に強引にヒントを出そうとし、まるで非常にインテリジェントであるかのように振る舞います。そのため、パフォーマンスを大きく消費し、カクつきやすいです。
VSCodeは正しくヒントを出すだけでなく、エラーに対しても明確な説明と解決策を提供します。
結び
WebStormを2年半以上使用してきた開発者として、VSCodeはわずか半月で、その強力なコードヒント、検索、コードジャンプによって、より効率的な開発を実現してくれました。大企業の社員が無料で使えるにもかかわらず、WebStormを顧みず、ほとんどがVSCodeを使っているのも納得です。
現在、昇進資料の準備中で少々忙しいです。また、設定が少々多いため、読者の皆様の負担にならないよう、機能の一部のみを抜粋しました。
読者の皆様で何か困っていることがあれば、コメントでお知らせください。一つ一つ解決します。私の能力を信じてください！昇進後は基本的にコードを書かなくなるため、その時点で記事を完成させ、VSCodeのテクニックについて特集を組む予定です。
言うまでもなく、工欲善其事、必先利其器（仕事をうまくやるには、まず道具を整えよ）。使いやすいエディタは開発効率と幸福感を大きく向上させます。何しろエディタと過ごす時間は、恋人と過ごす時間よりも長いのですから╮(╯▽╰)╭。
WebStormが一部の人にとっては非常に使いやすいかもしれませんが、私はVSCodeを宇宙級エディタと呼びたいと思います(#.#)。
もしかすると、プログラマの世界では、有料のものが必ずしも最高というわけではないのかもしれません！！！