もう不要？VSCode本体で補える11個の拡張機能（2022年10月時点）

知識 / 技能 / 効率化

2022.10.24

この記事は約4分で読めます。

どうも上かるびです。

VSCodeはどんどん進化しています。
今回はVSCode本体に機能が備わることにより不要になった拡張機能を紹介します。

拡張機能１つを削除したからと言って動作が目に見えて軽くなるわけでないかと思いますが、何だかんだ本体の機能が一番効率的だと思いますので不要なものは削除した方がよいと思ってます。

Contents

2022年10月時点でVSCode本体で補える11個の拡張機能

2022年10月時点でVSCode本体で補える11個の拡張機能

本体の設定方法と合わせてご紹介します。

以下、参考記事です。英語だったので訳しつつ自分でもVSCodeで試しつつ進めました。

11 Visual Studio Code Extensions You Don’t Need

ネコーダー

Windows/Macなどによってももしかしたら不具合があるかもしれないので、実際に行う際は自己責任でお願いいたします。

なおこれから紹介する拡張機能を全てVSCodeの設定に移行した際に追加するコードを最初にまとめておきます。すべての項目と注意事項を読んでからお試しください。

{ 
  "editor.linkedEditing": true,
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "source.organizeImports": true,
  "files.trimTrailingWhitespace": true,
  "editor.bracketPairColorization.enabled": true
}

{

"editor.linkedEditing": true,

"html.autoClosingTags": true,

"javascript.autoClosingTags": true,

"typescript.autoClosingTags": true,

"javascript.suggest.autoImports": true,

"typescript.suggest.autoImports": true,

"javascript.updateImportsOnFileMove.enabled": "always",

"typescript.updateImportsOnFileMove.enabled": "always",

"source.organizeImports": true,

"files.trimTrailingWhitespace": true,

"editor.bracketPairColorization.enabled": true

}

①Auto Rename Tag

"editor.linkedEditing": true

1	"editor.linkedEditing": true

この設定では　.jsx と .vue ファイルの名前は自動変更されないそうです。もし利用する方はまだ残しておいた方がいいかもしれません。

②Auto Close Tag

こちらも必要に応じて設定を追加してください。

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true

"html.autoClosingTags": true,

"javascript.autoClosingTags": true,

"typescript.autoClosingTags": true

③Auto Import

こちらはTypeScriptとTSXで利用可能なインポートに対する補完機能だそうです。

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

"javascript.suggest.autoImports": true,

"typescript.suggest.autoImports": true,

"javascript.updateImportsOnFileMove.enabled": "always",

"typescript.updateImportsOnFileMove.enabled": "always",

"source.organizeImports": true

④Setting Sync

異なるPC間で同期させる機能です。私もずっと入れてましたが2年前に本体に追加されてたそうです。。。

設定の詳細はVSCodeの公式ドキュメントを参照してください。

⑤Trailing Space

行末尾のスペースのハイライト、削除機能です。

こちらは本体で保存時に自動削除できる機能が備わっています。

"files.trimTrailingWhitespace": true,

1	"files.trimTrailingWhitespace": true,

⑥Path Intellisense

パスとファイル名の自動補完です。

こちらはVSCodeでデフォルトで有効になっているため特に設定は必要ないです。

⑦NPM

コマンドでnpmスクリプトを実行できる拡張機能らしいです。

こちらもVSCodeの「Task Auto Detection」という機能で代替可能だそう。

⑧HTML Snippets

この拡張機能のほかに「CSS Snippets」「HTML Boilerplate」も同様の機能を有しているそうです。

これらもVSCodeの有名な「Emmet」で代替可能です。Emmetは独自にカスタマイズできるので便利ですよね。

上かるび

言語ごとに設定できるし重宝してる

⑨HTML Tag Wrap

こちらの代替は、

Ctrl(Cmd) + Shift + P でコマンドパレットを開き、

Emmet: Wrap with abbreviation

1	Emmet: Wrap with abbreviation

を入力してタグを入力すればできるそうです。

この拡張機能に関してはAlt(Option) + W ですぐにタグを追加できるのが便利なので、そのままでいいかなと個人的に思います。以下デモ。

またTwitterで教えていただいたのですが、以下の記事を参考にすればショートカットで設定できます。教えていただきありがとうございました！

https://qiita.com/MToyokura/items/da4fb3477affd0278506

⑩Lorem Ipsum

この拡張機能ではLorem Ipsumテキストを挿入できるそうです。

Lorem Ipsumテキストはいわゆるダミー文章みたいなものらしいです。

こちらもVSCode上で「lorem」と入力してエンター押すとすぐにダミー文章が生成されます！

ネコーダー

これ知らんかったけどめちゃくちゃ便利やな！日本語バージョンもあったりして…

⑪Bracket Pair Colorizer（1と2）

こちらがデフォルト機能に備わったのはわりと有名な気がしますね。

以下の設定で有効化できます。

"editor.bracketPairColorization.enabled": true

1	"editor.bracketPairColorization.enabled": true

定期的にこういうリリースノートはチェックしていきたいところですね。