VSコードの不要な拡張

私は最近、VSコードについて徹底的な調査を行い、いくつかの興味深い発見をしました。結局のところ、エディターには非常に多くの機能と設定があり、多くの一般的な拡張機能が解決するのと同じタスクを完全に解決できます。 ここでは、これらの拡張機能をVSコードの標準メカニズムに置き換えることができる拡張機能の6つのアプリケーション領域について説明します。

1.タグの自動名前変更とクローズ

私たちは2つの可能性について話している。1つは、開始タグと終了タグの名前を同時に変更する機能です。次に、タグを自動的に閉じる機能。





開始タグと終了タグの名前を自動的に変更

▍拡張機能

• タグの名前変更の自動化（ダウンロード数330万）：Visual Studio IDEと同様に、ペアのHTML / XMLタグの名前を自動的に変更します。
• 自動クローズタグ（310万ダウンロード）：Visual StudioIDEやSublimeTextの場合と同じように、HTML / XMLタグを自動的にクローズします。

▍VSコード機能

VSコードの対応する設定には、やや曖昧で理解できない名前が付いています。これがおそらく多くの人がそれを見つけることができない理由です。

• Editor: Rename on Type：コードを入力すると、ペアのタグの自動名前変更を制御します。デフォルトはfalseです。

この設定を見つけるには、エディター設定ウィンドウ（File > Preferences > Settings）を開きEditor: Rename on Type、検索バーに設定を入力します。



この機能を有効にするには、以下を追加しますsettings.json。

"editor.renameOnType": true

これまでのところ、HTMLファイルのみがサポートされていますが、プロジェクトトラッカーにはJSXファイルのサポートに関する未解決の問題があります。



VSコード自体がVueファイルでこれをサポートする可能性は低いです。同様のメカニズムがVetur拡張機能に実装される可能性があります。対応するタスクは、このプロジェクトのトラッカーですでに開かれています。

2.設定の同期

VSコードは、異なるコンピューター間の設定の同期をサポートするようになりました。この機能は、VS Code Preview 1.48（2020年7月リリース）以降で使用できます。



私は今この機会を経験していますが、まだ問題は発生していません。

▍拡張

• 設定の同期（180万ダウンロード）：GitHub Gistの設定、キーボードショートカット、スニペット、拡張機能、launch.jsonファイルなどを同期します。

▍VSコード機能

これらの機能については、VSコードのドキュメントで読むことができます。対応する設定のページを以下に示します。





同期設定



同期には、MicrosoftまたはGitHubアカウントを使用でき、同期する必要があるものを指定できます。





同期するアイテムの選択

3.モジュールのインポートの制御

JavaScriptおよびTypeScriptモジュールのインポートの管理は、特にプロジェクトをリファクタリングしたり、コードをリファクタリングしたりする必要がある場合、困難な作業になる可能性があります。開発者は、可能な限りこれを自動化するよう努めています。

▍拡張機能

• 自動インポート（110万ダウンロード）：モジュールインポートコマンドを自動的に検索して解析し、コード完了メカニズムを提供し、コードアクションを有効にします。TypeScriptとTSXをサポートします。
• TSの移動（308Kダウンロード）：TypeScriptファイルの移動を監視し、関連するインポートコマンドをワークスペース内で最新の状態に保ちます。
• 自動インポート-ES6、TS、JSX、TSX（157Kダウンロード）。

▍VSコード機能

• JavaScript > Suggest: Auto Imports：自動インポートの提案を有効または無効にできます。2.6.1以降、TypeScriptワークスペースで使用する必要があります。デフォルトはtrueです。
• TypeScript > Suggest: Auto Imports：自動インポートの提案を有効または無効にできます。2.6.1以降、TypeScriptワークスペースで使用する必要があります。デフォルトはtrueです。
• JavaScript > Update Imports on File Move: Enabled：VSコードでファイルの名前を変更したり、ファイルを移動したりするときに、モジュールのインポートパスを自動的に更新する方法を選択できます。バージョン2.9以降、TypeScriptワークスペースで使用する必要があります。デフォルトはpromptです。
• TypeScript > Update Imports on File Move: Enabled：VSコードでファイルの名前を変更したり、ファイルを移動したりするときに、モジュールのインポートパスを自動的に更新する方法を選択できます。バージョン2.9以降、TypeScriptワークスペースで使用する必要があります。デフォルトはpromptです。

これらの設定がファイルでどのように表示されるかを次に示しますsettings.json。

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

また、ファイルを保存するときにインポートコマンドを整理する場合は、次の設定が必要です。

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

これを使用すると、未使用のインポートステートメントが削除され、絶対パスを使用するコマンドが最初に実行されるようにインポートコマンドが配置されます。私はそのようなメカニズムの大ファンであり、一度設定すると忘れることができます。

4.HTMLおよびCSSスニペット

次のことが役立つと判断する場合があります。

• HTMLテンプレートを使用して、標準のページ説明要素をすばやく作成します。
• 時間を節約するために使用できる、頻繁に使用されるコードスニペットのリポジトリを作成します。
• コードの大きなブロックを記述するための簡略化された方法。

これらはすべて似ていますが、機能が少し異なります。これについては、このセクションで説明します。

▍拡張機能

• HTMLスニペット（380万ダウンロード）：HTML5スニペットを含む完全なHTMLタグ。
• HTMLボイラープレート（684Kダウンロード）：シンプルなHTML5ボイラープレートジェネレーター。
• CSSスニペット（22kダウンロード）：CSSスニペットのコレクション。

▍VSコード機能

VS Codeには、Emmetツールキットが組み込まれています。これらのツールは、HTMLおよびCSSの略語とスニペットを提供します。：エメットは、以下のファイルのためにデフォルトで有効になってhtml、haml、pug、slim、jsx、xml、xsl、css、scss、sass、lessとstylus。詳細については、VSコードのドキュメントを参照してください。



たとえば、ページのテンプレートHTMLマークアップをファイルに追加するには、感嘆符（!）を入力してキーを押すだけで十分Tabです。





テンプレート化されたHTMLをファイルに追加する



Emmetは、要素のグループをドキュメントに挿入できるショートカットもサポートしています。それらの構造はCSSセレクターに似ています。



たとえば、HTMLファイルに次の構造を入力してみましょう。

ul>li*5

キーを押してみましょうTab。この構成は、次のコードに変換されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

エディタに入力してaをクリックするTabと、構造がコード<a href="">に挿入され、カーソルが引用符の内側に配置されるため、属性値をすぐに入力できますhref。



これは、EmmetのHTML機能のごく簡単な紹介です。 VSコードはCSSにも同様の機能を提供します。これらの機能の中で、私のお気に入りはブラウザベンダーの自動プレフィックスです。 Emmetの詳細については、このツールキットのドキュメントをご覧ください。また、このエメットチートシートが役立つかもしれません。



ファイルを編集して、既存のスニペットをカスタマイズし、独自のスニペットを作成できますsnippets.json。



エメットはサポートしますプレーンなHTMLやCSSだけではありません。たとえば、Vueアプリケーションを構築するときやJavaScriptコードを作成するときにEmmetを使用settings.jsonするには、次を追加します。

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

マークダウンのEmmetサポートを有効にする場合は、注意する必要のある1つの癖（というよりはバグ）があります。これにはemmet.excludeLanguages、空の配列を書き込む必要があるという事実にあります。

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

これについての議論はここにあります。

5.テンプレートテキスト

ページで作業するときに、プレースホルダーテキストを入力する必要がある場合があります。これは通常、コンテンツがあるページの外観を評価するために行われます。有名な「Loremipsum」はそのようなテキストとしてよく使われます。この種のテキストを生成できる拡張機能がありますが、VSコードにも同じ機能があります。

▍拡張

• Lorem Ipsum（168Kダウンロード）。

▍VSコード機能

VSコードにはEmmetツールボックスが組み込まれていることを前述しました。Emmetには、プレースホルダーテキストを生成するための略語があります。使用するにはlorem、キーを入力して押してくださいTab。これにより、30ワードの段落が自動的に生成されます。





略語l​​oremの入力



この略語は、テキストの1つの段落を作成するときだけでなく、たとえば、いくつかの要素の複数のブロックを生成するためにも使用できます。構成p*2>loremによって、<p>プレースホルダーテキストで満たされた2つの要素が生成されるとしましょう。

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>

6.後続スペースの自動削除

通常、対応する拡張子は、コード編集中またはコマンド時に、行末の不要なスペースを削除します。そして、そのような拡張機能の代わりに使用することをお勧めするVSコード設定は、ファイルを保存するときにスペースを削除するように設計されています。

▍拡張機能

• 末尾のスペース（447Kダウンロード）：末尾のスペースを強調表示して削除できます。
• Autotrim（15,000ダウンロード）：この拡張機能の説明には、次のように書かれています。この拡張機能は、コードの編集プロセスを監視し、アクティブなカーソルが配置されている行番号を記憶しています。この行にアクティブなカーソルがなくなると、末尾のタブとスペースが削除されます。」

▍VSコード機能

• Files : Trim Trailing Whitespace：有効にすると、ファイルを保存するときに末尾のスペースが削除されます。デフォルトはfalseです。

この機能を有効にsettings.jsonするには、以下を追加します。

"files.trimTrailingWhitespace": true

結果

VSコードの問題を解決する必要に直面したときは、適切な拡張機能を探し始め、VSコードの標準機能の中に問題を解決するためのツールがあるかどうかを確認してください。当たり前のように思えますが、私たち全員が正反対のことをしたこともあるでしょう。新機能はVSコードに定期的に表示されるため、そのエディターに加えられた変更のログを時々確認することをお勧めします。



可能な限り、拡張機能ではなく、VSコードの標準機能を使用するように努めていますか？