5アンダーセット* Vscode機能

イントロ
まず、このポストを取得するには、このポストは、“インストールする必要があるトップの拡張子”のリストではありません.それらのリストは役に立ちます(少し「Clickbaity」として)、そして、私はVSCodeが拡張とプラグインの非常に「健康的な」生態系を持っているのが好きです、私はGet SunからVSCodeに組み込まれている驚くべきものについての少数のポストに気がつきました、そして、それは私が話したいものです.
これらは、エディタに焼かれているVSCodeの機能です(インストールする拡張モジュールやツールはありません)、しかし、個人的には十分な注意を得ず、PSAを使用することはできません.

JavaScriptタイプの安全性
リストの残りは本当に注文されませんが、これは確かに大きなマージンによって、1つのスポットに値する.私はtypescriptまたはタイプセーフJS(何?)あなたののどを下ろしてください、しかし、vscodeがどのように安全性の利点のいくつかを得ることができる機能を持っているかを指摘したいです.そして、TSファイルに切り替えて、蒸して/コンパイルしなければならないか、他のDEVSがあなたのコードベースを使用するためにタイプスクリプトを使用するのを必要とします.
これは、彼らのJSコードにいくつかのタイプセーフティを導入するのを楽しみにしているそれらのための素晴らしい半分の解決方法です.
私は、この上にあまりにも深く行きたくありません、そこに複数のガイドがあるので、私はいくつかの「クイックスタート」基本をカバーします

JS型チェックの有効化
JSファイルでタイプチェックを可能にする複数の方法があります、しかし、あなたがちょうどそれをためしたいと思っているならば、最も簡単であるならば// @ts-check ファイルの先頭に.
参照"Type Checking JavaScript" section VSCODEの「JavaScriptで動く」ドキュメントの詳細については.

これは何を得るのですか?
あなたが余分な仕事をしたくないならば// @ts-check は、即座にVSCODEでチェックしているタイプスクリプトPoweredタイプを得る方法です.
たとえば、このスクリーンショットをチェックしてください.

上の例では、開発者はquerySelectorAll はarray , 何か特別なものを返すNodeList - には、map() 配列が持つメソッド.type check onで、map がvscodeに取り込まれ、フラグが設定されます.

For those wondering, an easy way to convert from a NodeList to an array is to use Array.from: Array.from(document.querySelectorAll('a[href]'))

JSDocと高度な使用法による型の注釈
この機能の「パワーユーザー」部分は、JSDocコメントを使用して、JSコード内にある先進型について、VSCodeのTypescript Powered IntelliSenseシステムに伝える機能です.このタイプのdocページ"Type Checking JavaScript Files" 簡潔に説明してみましょう.

さらに高度な使用のために、そこからいくつかの素晴らしいリソースがありますmy VSCode cheatsheet これは、JSDOCによってタイプされたタイプチェックとintellisenseに捧げられる全体のセクションを持っています🙂. また、他の有用な関連リソースへのリンクのリストがあります.

くるみ2:貢献者を容易にする
コードをあなたのコードベースに貢献するために他の人々のためにプロセスを合理化する時間を費やすことは雑用のように感じるかもしれません、しかし、長期において、それはものをみんなのためによりよくします.より簡単で、より多くの「誤り証明」プロセスはDEVSが貢献するためにあります、より少ない可能性はあなたが重複した質問をフィールド化しなければならないということです、ガイドラインを違反して、そして不必要に前後に対処するためにprsを拒絶します.
あなたが学ぶことに驚くかもしれないことは、VSCodeは、この目標を支援するいくつかの組み込み機能を持っていることです.

拡張モジュール
私が実際に使ったのを見たのは初めてだったからです.これは特殊なファイルを追加することです..vscode/extensions.json - プロジェクトのルートには、すべての寄稿者が使用する拡張モジュールのリストを持っています.例えば、vscodeはそれを取り上げ、それらをクローンしてrepoを開くときにそれらをインストールするためにdevsへの推薦をポップアップします.
これはvscodeの使用方法についての詳細を見つけることができますworkspace recommended extensions ドキュメント.

ワークスペースツールと設定
VSCodeに組み込まれているのは、複数の場所で、ユーザー設定やプロジェクト構成あたりのクラフトをオーバーライドすることができます.
たとえば、あなたが別個の部品でモノレポを管理する場合は、見てみたいかもしれない"multi-root workspaces" .
デフォルトのインデントとスペーシングオプションなどの設定をオーバーライドするには、.vscode/settings.json あなたのレポの根底に、あなたの貢献者を尊重して、あなたが彼らが変えられることを望む何かを上書きしないでください.

ユーザーが定義したスニペット
VSCodeはまだ高度なマクロをサポートしていません(拡張子を使用せずに)、既に高度なスニペットをサポートしていることを知っていましたか?一見すると、これらのテキストの基本的なブロックを挿入することができますように見えるかもしれませんが、実際にいくつかの高度な物事を行うことができます.
例えば、ここでは、マークダウンスタイルの箇条書きのリストをGithubスタイルのチェックボックスのリストに変換するためにすばやくホイップしたスニペットがあります.

{
    "MD List to GH Checkbox": {
        "scope": "markdown",
        "prefix": "list-to-checkbox",
        "body": [
            "${TM_SELECTED_TEXT/^([\t ]*-) ?(.*)$/$1 [ ] $2/gm}"
        ],
        "description": "Transform MD list to MD checkbox list"
    }
}

ここでは動作中です.

カスタムスニペットを作成するためのメインドキュメントページはhere .

△4 :インポートを自動的に再注文する
まず最初に、私はRyan Chenkieに感謝したいと思います.



ランチェンキー

ただ使用されていないインポートとリダイレクトされたインポートを削除するには、VSコードのクイックキーについて学びました🙌
午後15時17分
Windowsユーザにとって、そのキーコンボはシフト+ alt + oで、デフォルトでです.
そのつぶやきに対する回答として、VSCODEを自動的に行うこともできますsettings.json 以下のようにします.

{
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

あなた自身またはあなたの会社のためにカスタム拡張を構築する能力
VSCodeについての最も良いことの1つは、それがどのように拡張可能であり、どのように簡単に構築し、新しい拡張機能をテストすることです.しばしばこれが議論されるとき、焦点は本当に派手で/または印象的な拡張に関してあります、しかし、特定の組織の中で特に特異なニッチ問題を解決する拡大がちょうど重要であることができる誰でも思い出させることを望みます.
「ツール」の議論の中で、あなたの開発者のワークフローを改善したり、レガシーコードを変換したり、仕事に特有のプロセス間の相互運用をすることができるあなたの会社(または自分だけ)のために構築することができるカスタム拡張子が存在するかどうかを考える必要があります.それはあなたが1つを構築すると思うよりも簡単かもしれないし、ボーナスとして、他人を感動させることです.

包む
私は、あなたがこれらのアイテムのうちの少なくとも1つを役に立つと思っています!革命的なコードエディタを構築するためのVSCodeチームとオープンソースの貢献者に感謝します!