パワーユーザー向けのVSCodeのヒントとコツ

公開: 2022-03-11

Visual Studioのパワーユーザーになりたいのはなぜですか？

パワーユーザーになることは、先を行くもう1つの方法です。開発者は、ゲームのトップを維持する方法や、常に新しいことを学び、スキルを磨き続ける方法についてよく話します。雇用主はスキルセットを広げることに専念する才能を好む傾向があるため、これはよくある面接の質問です。 IDEとコンピューターを習得することは、専門能力開発への最良の投資の1つである可能性があります。

開発者は常に自分の仕事をより良くする新しいブログを探しています。使用しているIDEが何であれ、おそらくブログがあります。購読してください。

もう1つの理由は、単に時間を節約できることです。ワークフローの改善に時間を費やすと、生産性が向上したり、楽しむ時間が増えたりするため、成果を上げることができます。今日は、Visual StudioとVSCodeを詳しく見て、パワーユーザーになるまでスキルを向上させる方法について説明します。

VSCodeパワーユーザーになるにはどうすればよいですか？

通常のユーザーとパワーユーザーの違いは次のとおりです。

IDEに関する深い知識： VSCodeには優れたドキュメントがあります。読んでください！
カスタマイズ：パワーユーザーは、特定のニーズに合わせてワークフローを調整します。
退屈で反復的なすべてのタスクを自動化します。
ワークフローを継続的に改善し、IDEの進化を追跡します。

この記事では、私がこれらのポイントのそれぞれにどのように対処したかを自分で説明し、自分でそれを行うための知識を身に付けるつもりです。私がしていることは、少なくとも完全にではなく、必ずしもあなたのために働くとは限りません。人々はさまざまな環境やプロジェクトで作業しますが（私にとっては、主にWindows上のReact.jsとTypeScriptで作業しています）、全体的なアプローチはすべての人に有効です。

Jestを使用したテスト

私は一度に1つのテストを作成します。つまり、一度に1つのテストを実行する方法が必要です。ただし、ネイティブ正規表現ソリューションは非常に不格好です。だから私はジェストランナーを使っています。この便利な拡張機能を使用すると、個々のスイートまたはテストを実行またはデバッグできます。

以下のビデオは、テスト名を右クリックし、コンテキストメニューを使用して実行するだけでよいことを示しています。

Pactによるテスト

コントラクトテストを書く上で最も時間のかかる部分は、間違いなくマッチングです。繰り返しのアクションを自動化するのに役立つスニペットを作成することで、これを解決しました。これらは私が作成したものであり、自由に使用できます（つまり、単にコピーしてVSCodeの/snippets/typescript.jsonに貼り付けます）。

以下のビデオは、これらのスニペットの使用方法を示しています。

同じタイプのすべてのオカレンスを選択します。つまり、すべての文字列、時間、およびその他の値を選択します。
事前定義されたキーバインドを使用するか、[スニペットの挿入]を呼び出して関連するスニペットを選択するか、使用するスニペットのプレフィックスの入力を開始します。

ギット

ほとんどの開発者はGitとGitHubを日常的に使用していますが、私もそうしています。ただし、ターミナルやgithub.comの使用は避けようとしています。

GitHub Pull Requests and Issuesを使用すると、VSCodeで快適にPRを開いたり、編集したり、確認したりできます。私のIDEは、GitHubのWebアプリやデスクトップアプリよりもコードをレビューするのに適した場所だと思います。一部の開発者は同意しないかもしれませんが、IDEでそれを行うことの一貫性と快適さに感謝しています。

Gitは非常に多くのことを実行できますが、私はそのコマンドをほとんど覚えていません。しかし、なぜそもそも何かを暗記するのでしょうか。あなたのルーチンのあまりにも多くのきめ細かい側面を覚えることは過度に生産的ではありません。

GitLensは、指先で多数のすばらしい機能を公開します。そのおかげで、Gitを使用するためにターミナルにたどり着く必要はほとんどありません。

ターミナルのカスタマイズ

使用するOSに関係なく、デフォルトの端末よりも優れた処理を実行できます。私はWindowsターミナル+cmderを使用しています。 Unixユーザーの場合は、iTerm（macOS）またはOh My Zsh（LinuxおよびmacOS）を検索してください。それらをVSCodeと統合し、コマンドの作成にかかる時間を節約する多くのエイリアス（ショートカット）を追加しました。

例えば：

ys = yarn start文字だけでアプリを起動するのに役立ちます
del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" -提供されたディレクトリを削除し、完了すると成功メッセージを表示します
gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D -D- masterを除くすべてのローカルブランチを削除します

あちこちで数文字を保存するのはばかげているように見えるかもしれませんが、これらの時間節約機能は長期的には追加されます。エイリアスを作成することには二次的な利点があります。エイリアスを入力する時間を短縮することで、コマンドの呼び出し方法を思い出そうとしないため、集中力を維持し、思考を失うことがなくなります。

コード生成

新しいコンポーネントやページなどを作成することは私が頻繁に行うことであり、ほとんどの読者が知っているように、それは非常に簡単です。ただし、新しいフォルダを作成してその中にファイルを初期化するのは面倒な場合があります。そこで、このプロセスを自動化しました。

以下のビデオは、使用中のSuperchargeReactを示しています。 New Componentを使用して、新しいコンポーネントの名前と場所を指定できます。次に、拡張機能は、フォルダーを作成してこの新しいコンポーネントを初期化するスクリプトを実行します。

IntelliSense

VSCodeには強力なIntelliSenseがあり、ほとんどの場合、VSCodeの使用について考える必要はありません。ただし、提案を参照しているときは、 Ctrl + Spaceを押して、使用可能な各オプションに関するドキュメントを表示できます。

IntelliSenseは、ワークフローと個人の好みに合わせてさらにカスタマイズできます。

キーボードショートカット

Ctrl+SやCtrl+Fなどのショートカットを使用していると思います。それらはすべて十分に文書化されており、VSCodeの膨大な数のショートカットにあまり慣れていない場合は、これを変更して、さらに一歩進んでそれらを習得することをお勧めします。特定のバインディングが不格好すぎますか？召喚するコマンドは、入力するのに時間がかかりすぎることがよくありますか？ VSCodeのキーボードエディターを開いてショートカットを作成します。

コマンドが特定のキーコンボに割り当てられているかどうか疑問に思っている場合は、キーストロークを記録できる検索バーのキーボードボタンをクリックしてください。次に、what/ifコマンドがそれらに関連付けられているかどうかを確認します。

マウスのショートカット

開発者は、生産性を高めるには、マウスを嫌い、キーボードを愛することを学ぶ必要があるとよく言われます。これは、小さくて密度の高いファイルで作業している場合に有効な場合があります。しかし、自動コードフォーマットと数百行のコードを含むファイルの時代では、それは規則よりも例外であると私は主張します。

マウスを積極的に使用するだけでなく、Logitechオプションを使用してワークフローに合わせてマウスをカスタマイズしました。 VSCodeで特定のコマンドを実行するように、マウスの特殊キーをプログラムしました。

マウスを「教える」方法は、カーソルを動かしてクリックするだけではありません。

右上のメニューからVSCodeを選択します。
カスタマイズするボタンをクリックします。
左側のアクションのリストから[キーストロークの割り当て]を選択します。
VSCodeに事前定義されたショートカットを入力します。

バックアップと同期の設定

バックアップして、必要なときにいつでも再利用できない場合は、カスタマイズしてもあまり意味がありません。

ネイティブソリューションは、現時点ではインサイダーのみが利用できます。ただし、Settings Syncを使用すると、コード設定を要点として保存し、複数のマシン間でワークフローを同期できます。構成するにはGitHubトークンが必要ですが、その後は、1つのコマンドを実行して設定をアップロードおよびダウンロードするだけです。

推奨されるVSCode拡張機能

私はすでにいくつかの拡張機能について言及し、それらの使用方法を説明しました。ここにいくつかの注目すべき言及があります：

サラウンド：選択したコードを矢印関数またはtry-catchブロックでラップする必要がありますか？この拡張機能はあなたのためにそれを行います！
node_modulesの検索：パフォーマンスを向上させるためにVSCodeのエクスプローラーからnode_modulesを除外していなくても、そのフォルダーは非常に大きいため、ナビゲートできません。この拡張機能を使用すると、無限にスクロールする代わりに、探しているものを検索できます。
GleanとReactRefactorは、JSXファイルに役立つリファクタリングツールをいくつか提供します。
Auto Close Tagは、HTML / JSX/TSXファイルの終了タグを自動的に追加します。
File Utils：ファイルとディレクトリを作成、複製、移動、名前変更、および削除するための便利な方法。また、カスタマイズ可能です。
JavaScript Boosterは、いくつかの一般的なリファクタリングアクションを自動化します。

概要

通常のユーザーにならないでください。代わりにパワーユーザーになりましょう。常に他の人より一歩進んで、それがあなたをどこに連れて行くかを見てください。非効率性に常に注意し、それらを軽減するようにしてください。

これに対する私の解決策は、ほとんどの開発者によく知られているはずです：かんばんボード。自分のペースを落とす何かに気付くたびに、それをTo-Doとして書き留めます。時間に余裕があるときはいつでも、その修正方法を見つけようとします。

この投稿が圧倒的で、どこから始めればよいかわからない場合は、ドキュメントを読んでください。最高のROIが得られます。公式ドキュメントを読むのはつまらないように聞こえますが、長期的にはそれが報われることを約束します。生産性を高める方法を学ぶだけでなく、ドキュメントの書き方も学びます。

簡単にするために、ドキュメントの必読部分のリストをまとめました。

ヒントとコツ：いくつかは明白で、おそらくすでに知っていますが、私はあなたが知らなかった何かを見つけることを保証できます。
編集ハック：これらの編集ハックは非常に強力であり、それらを学ぶことは日常的にあなたに利益をもたらします。
コードの縮小/拡張：別の開発者とペアリングしているときにこのショートカットを試して、印象付けてください！
キーバインディング：キーバインディングがどのように機能し、どのようにカスタマイズするかを学びます。これは、IDEをマスターするための基礎の1つです。
サポートされている数百のプログラミング言語：選択した言語に対してVSCodeが持つ特定の機能について説明します。