Webフロントエンド
パワーユーザー向けのVSCodeのヒントとコツ
Visual Studioのパワーユーザーになりたいのはなぜですか？
パワーユーザーになることは、先を行くもう1つの方法です。開発者は、ゲームのトップを維持する方法や、常に新しいことを学び、スキルを磨き続ける方法についてよく話します。雇用主はスキルセットの拡大に専念する才能を好む傾向があるため、これはよくある面接の質問です。 IDEとコンピューターを習得することは、専門能力開発への最良の投資の1つである可能性があります。
開発者は常に自分の仕事をより良くする新しいブログを探しています。使用しているIDEが何であれ、 おそらくブログがあります ： 申し込む！
もう1つの理由は、単に時間を節約できることです。ワークフローの改善に時間を投資することで、生産性が向上したり、楽しむ時間が増えたりすることがあります。今日は、詳しく見ていきます Visual Studio そして VSCode パワーユーザーになるまでスキルを向上させる方法について話し合います。
LLCとはどのような法人ですか
VSCodeパワーユーザーになるにはどうすればよいですか？
これが通常のユーザーと パワーユーザー ：
- IDEに関する深い知識： VSCodeには 優れたドキュメント 、 それを読んで！
- カスタマイズ： パワーユーザーは、特定のニーズに合わせてワークフローを調整します。
- 自動化 すべての退屈で反復的なタスク。
- 継続的に改善する ワークフローを作成し、IDEの進化を追跡します。
この記事では、私がこれらのポイントのそれぞれにどのように対処したかを自分で説明し、自分でそれを行うための知識を身に付けるつもりです。私がしていることは、少なくとも完全にではなく、必ずしもあなたのために働くとは限りません。人々は さまざまな環境とプロジェクト （私にとっては、主にWindows上のReact.jsとTypeScriptで動作します）が、全体的なアプローチはすべての人に有効です。
Jestを使用したテスト
私は一度に1つのテストを作成します。つまり、一度に1つのテストを実行する方法が必要です。しかしながら、 ネイティブ正規表現ソリューション かなり不格好です。だから私は ランナーがいます 。この便利な拡張機能を使用すると、個々のスイートまたはテストを実行またはデバッグできます。
以下のビデオは、テスト名を右クリックし、コンテキストメニューを使用して実行するだけでよいことを示しています。
Pactによるテスト
契約テストを書く上で最も時間のかかる部分は、間違いなく マッチング 。私はこれを解決しました 役立つスニペットの作成 反復的なアクションを自動化します。 これら 私が作成したものもありますので、自由に使用してください（つまり、単にコピーしてVSCodeの/snippets/typescript.jsonに貼り付けます）。
以下のビデオは、これらのスニペットの使用方法を示しています。
- 同じタイプのすべてのオカレンスを選択します。つまり、すべての文字列、時間、およびその他の値を選択します。
- 使用する 事前定義されたキーバインド 、または呼び出す スニペットを挿入 関連するスニペットを選択するか、使用するスニペットのプレフィックスの入力を開始します。
行く
ほとんどの開発者はGitとGitHubを日常的に使用していますが、私もそうです。ただし、ターミナルやgithub.comの使用は避けようとしています。
GitHubプルのリクエストと問題 VSCodeで快適にPRを開いたり、編集したり、レビューしたりできます。私のIDEは、GitHubのウェブアプリやデスクトップアプリよりもコードを確認するのに適した場所だと思います。一部の開発者は同意しないかもしれませんが、IDEでそれを行うことの一貫性と快適さに感謝しています。
Gitは非常に多くのことを実行できますが、そのコマンドのいくつかを覚えています。しかし、なぜそもそも何かを暗記するのですか？あなたのルーチンのあまりにも多くの詳細な側面を暗記することは過度に生産的ではありません。
GitLens あなたの指先で驚くべき機能の過多を公開します。そのおかげで、Gitを使用するために端末に手を伸ばす必要はほとんどありません。
ギリシャの金融危機の概要
ターミナルのカスタマイズ
使用するOSに関係なく、デフォルトの端末よりも優れた処理を実行できます。使っています Windowsターミナル + cmder 。 Unixユーザーの場合は、検索してください iTerm （macOS）または Oh My Zsh （LinuxおよびmacOS）。私は それらをVSCodeと統合しました コマンドを書く時間を節約する多くのエイリアス（ショートカット）を追加しました。
例えば：
ys = yarn start-たった2文字でアプリを起動するのに役立ちますdel=RMDIR /S/Q $* && echo 'Deleted Successfully!!!'-提供されたディレクトリを削除し、完了すると成功メッセージを表示しますgdab = git branch | grep -v 'master' | xargs git branch -D-masterを除くすべてのローカルブランチを削除します
あちこちで数文字を保存するのはばかげているように見えるかもしれませんが、これらの時間節約機能は長期的には追加されます。エイリアスを作成することには二次的な利点があります。エイリアスの入力に費やす時間が減ると、コマンドの呼び出し方法を思い出そうとしないため、集中力を維持し、思考を失うことがなくなります。
コード生成
新しいコンポーネントやページなどを作成することは私が頻繁に行うことであり、ほとんどの読者が知っているように、それは非常に簡単です。ただし、新しいフォルダを作成してその中のファイルを初期化するのは面倒な場合があります。そこで、このプロセスを自動化しました。
下のビデオは スーパーチャージ反応 使用中で。 New Componentを使用して、新しいコンポーネントの名前と場所を指定できます。次に、拡張機能は、フォルダーを作成してこの新しいコンポーネントを初期化するスクリプトを実行します。
IntelliSense
VSCodeには強力なIntelliSenseがあり、ほとんどの場合、VSCodeの使用について考える必要はありません。ただし、提案を閲覧しているときは、 Ctrl +スペース 利用可能な各オプションに関するドキュメントを参照してください。
IntelliSenseはさらにカスタマイズできます あなたのワークフローと個人的な好みに合うように。
scorp vs c corp vs llc
キーボードショートカット
次のようなショートカットを使用していると思います Ctrl + S そして Ctrl + F 。それらはすべてです 十分に文書化されている 、およびVSCodeの膨大な数のショートカットにあまり慣れていない場合は、これを変更して、さらに一歩進んでそれらを習得することをお勧めします。特定のバインディングが不格好すぎますか？呼び出すコマンドは、入力に時間がかかりすぎることがよくありますか？ VSCodeのキーボードエディタを開いて ショートカットを作成する 。
コマンドが特定のキーコンボに割り当てられているかどうか疑問に思っている場合は、キーストロークを記録できる検索バーのキーボードボタンをクリックしてください。次に、what / ifコマンドがそれらに関連付けられているかどうかを確認します。
マウスのショートカット
開発者は、生産性を高めるには、次のことを行う必要があるとよく言われます。 彼らのマウスを嫌い、彼らのキーボードを愛することを学ぶ 。これは、小さくて密度の高いファイルで作業している場合に有効な場合があります。しかし、自動コードフォーマットと数百行のコードを含むファイルの時代では、それはルールよりも例外であると私は主張します。
積極的に使っているだけでなく 私のマウス ただし、ワークフローに合わせてカスタマイズしました Logitechオプション 。 VSCodeで特定のコマンドを実行するように、マウスの特殊キーをプログラムしました。
カーソルを動かしてクリックするだけでなく、マウスに「教える」方法は次のとおりです。
- 右上のメニューからVSCodeを選択します。
- カスタマイズするボタンをクリックします。
- 選択する キーストロークの割り当て 左側のアクションのリストから。
- VSCodeに事前定義されたショートカットを入力します。
バックアップと同期の設定
バックアップして、必要なときにいつでも再利用できない場合は、カスタマイズしてもあまり意味がありません。
ザ・ ネイティブソリューション のみ利用可能です インサイダー 現時点では。しかしながら、 設定同期 コード設定を要点として保存し、複数のマシン間でワークフローを同期できるようにします。 GitHubトークンが必要です 設定する 、しかしその後、あなたはただ単一のコマンドを実行する必要があります アップロード そして ダウンロード あなたの設定。
推奨されるVSCode拡張機能
すでにいくつかの拡張機能について説明し、それらの使用方法を説明しました。ここにいくつかの注目すべき言及があります：
- 囲む ：選択したコードを矢印関数またはtry-catchブロックでラップする必要がありますか？この拡張機能はあなたのためにそれを行います！
- node_modulesを検索します ：除外していなくても
node_modulesパフォーマンスを向上させるためのVSCodeのエクスプローラーによると、そのフォルダーは非常に大きいため、ナビゲートできません。この拡張機能を使用すると、無限にスクロールする代わりに、探しているものを検索できます。 - 落穂拾い そして Reactリファクタリング JSXファイルに役立つリファクタリングツールをいくつか提供します。
- タグの自動クローズ HTML / JSX / TSXファイルの終了タグを自動的に追加します。
- ファイルユーティリティ ：ファイルとディレクトリを作成、複製、移動、名前変更、および削除する便利な方法。カスタマイズも可能です。
- JavaScriptブースター いくつかの一般的なリファクタリングアクションを自動化します。
概要
通常のユーザーにならないでください。代わりにパワーユーザーになりましょう。常に他の人より一歩進んで、それがあなたをどこに連れて行くかを見てください。常に非効率性に注意し、それらを軽減するようにしてください。
これに対する私の解決策は、ほとんどの開発者によく知られているはずです。 Kanban board 。自分のペースを落とす何かに気付くたびに、それをTo-Doとして書き留めます。時間に余裕があるときはいつでも、それに対する修正を見つけようとします。
この投稿が圧倒的で、どこから始めればよいかわからない場合は、 ドキュメントを読むと、最高のROIが得られます ！公式ドキュメントを読むのはつまらないように聞こえますが、長期的に見れば報われることを約束します。生産性を高める方法を学ぶだけでなく、ドキュメントの書き方も学びます。
簡単にするために、私はこのリストをまとめました ドキュメントの必読部分：
ソフトウェア開発者を見つける方法
- ヒントとコツ ：いくつかは明白で、おそらくすでに知っているでしょうが、私はあなたが知らなかった何かを見つけることを保証することができます。
- ハックの編集 ：これらの編集ハックは非常に強力であり、それらを学ぶことは日常的にあなたに利益をもたらします。
- コードの縮小/拡張 ：別の開発者とペアリングするときにこのショートカットを試して、印象付けてください。
- キーバインディング ：キーバインドの仕組みとカスタマイズ方法を学びましょう。これは、IDEをマスターするための基礎の1つです。
- 何百ものプログラミング言語がサポートされています ：選択した言語に対してVSCodeが持つ特定の機能を学びます。
基本を理解する
VSCodeはIDEですか？
厳密に言えば、VSCodeはテキストエディタであり、IDEではありません。ただし、プラグインのおかげで、IDEの99％を実行できます。
VSコードはどのくらい人気がありますか？
ゲームは比較的新しいものですが、少なくとも当面は、VSCodeが最も人気のあるコードエディターです。
なぜVSCodeはそれほど人気があるのですか？
いくつかの要素の組み合わせ-拡張可能、無料、そして使いやすいです。 VSCodeはMicrosoftによって開発され、競合他社が数百ドルを請求する機能を提供します。
