VSCodeの拡張機能、なに使ってますか? はてなエンジニア世論調査 #2

こんにちは、Webアプリケーションエンジニアのid:hogashiです。

半年ほど前に公開した「開発環境のフォントなに使ってますか?」に続く、はてなエンジニア世論調査の第2回「VSCodeの拡張機能、なに使ってますか?」です。

ソースコードエディタであるVisual Studio Code(以下、VSCode)は多くのエンジニアに利用されています。VSCodeにはソースコードのシンタックスハイライトやデバッグなど、さまざまな拡張機能をインストールして使うことができますが、公開されている拡張機能は膨大にあります。

その中から、はてなのエンジニアはどんな拡張機能をインストールして、日頃の開発に使っているのでしょうか? 前回と同様にアンケート調査してみました。

アンケート方法

ターミナルでcode --list-extensionsを実行すると、VSCodeにインストールされている拡張機能の一覧を表示できます。

今回のアンケートでは、この出力にひとことコメントをセットで募集したところ、はてなでVSCodeを利用しているエンジニアから36人の回答が得られました。

アンケート結果から見える人気の機能拡張

挙げられた拡張機能は、全部でなんと340種類もありました。中でもJavaScriptの静的解析ツール(ESLint)を統合できる拡張機能のESLintdbaeumer.vscode-eslint)は、36人中32人がインストールしているほどの人気でした。

次の一覧は、5人以上がインストールしている拡張機能、上位55種類です。

# 拡張機能 人(%)
1 ESLint (dbaeumer.vscode-eslint) 32 (88.8%)
2 Go (golang.go) 29 (80.5%)
3 Live Share (ms-vsliveshare.vsliveshare) 27 (75.0%)
4 EditorConfig for VS Code (EditorConfig.EditorConfig) 26 (72.2%)
5 Docker (ms-azuretools.vscode-docker) 20 (55.5%)
6 GitLens (eamodio.gitlens) 19 (52.7%)
Python (ms-python.python)
8 Prettier - Code formatter (esbenp.prettier-vscode) 17 (47.2%)
9 YAML (redhat.vscode-yaml) 16 (44.4%)
Vim (vscodevim.vim)
11 npm (eg2.vscode-npm-script) 14 (38.8%)
perltidy-more (Kaktus.perltidy-more)
Template Toolkit (samosad.tt)
14 GitHub Pull Requests and Issues (GitHub.vscode-pull-request-github) 13 (36.1%)
Ruby (rebornix.ruby)
VSCode Ruby (wingrunr21.vscode-ruby)
Template Toolkit Tag Pair (yaamaa.template-toolkit-tag-pair)
18 Japanese Language Pack for Visual Studio Code (MS-CEINTL.vscode-language-pack-ja) 12 (33.3%)
19 PlantUML (jebbs.plantuml) 11 (30.5%)
Code Spell Checker (streetsidesoftware.code-spell-checker)
21 perl-syntax (jackkaramanian.perl-syntax) 10 (27.7%)
Perl (richterger.perl)
Scala Syntax (official) (scala-lang.scala)
Settings Sync (Shan.code-settings-sync)
Perl insert package (utgwkk.perl-insert-package)
26 Remote - Containers (ms-vscode-remote.remote-containers) 9 (25.0%)
TSLint (ms-vscode.vscode-typescript-tslint-plugin)
28 AWS Toolkit (amazonwebservices.aws-toolkit-vscode) 8 (22.2%)
Bracket Pair Colorizer (CoenraadS.bracket-pair-colorizer)
md2hatena (cohalz.vscode-md2hatena)
markdownlint (DavidAnson.vscode-markdownlint)
Scala (Metals) (scalameta.metals)
Open In GitHub (sysoev.vscode-open-in-github)
34 Bookmarks (alefragnani.Bookmarks) 7 (19.4%)
Apollo GraphQL (apollographql.vscode-apollo)
vscode-ghq (marchrock.vscode-ghq)
Visual Studio IntelliCode (VisualStudioExptTeam.vscodeintellicode)
38 Perl (cfgweb.vscode-perl) 6 (16.6%)
HashiCorp Terraform (hashicorp.terraform)
Perl (henriiik.vscode-perl)
auto-programming (hitode909.auto-programming)
perl-outline (hitode909.perl-outline)
GraphQL for VSCode (kumar-harsh.graphql-for-vscode)
zenkaku (mosapride.zenkaku)
SQL Server (mssql) (ms-mssql.mssql)
C/C++ (ms-vscode.cpptools)
Debugger for Chrome (msjsdiag.debugger-for-chrome)
Rust (rust-lang.rust)
49 TSLint (deprecated) (eg2.tslint) 5 (13.8%)
Rainbow CSV (mechatroner.rainbow-csv)
Remote - SSH (ms-vscode-remote.remote-ssh)
Remote - SSH: Editing Configuration Files (ms-vscode-remote.remote-ssh-edit)
TabNine (TabNine.tabnine-vscode)
NGINX Configuration (william-voyek.vscode-nginx)
Better Align (wwm.better-align)

この55種類を、インストールしている人数でグラフにすると次のようになります。

6割の拡張機能は1人だけが使用

一方、残りの285種類は、インストール人数が5人未満ということになります。インストール人数ごとの拡張機能数は、次の表の通りです。

人数 拡張機能 割合
1人 205 60.3%
2人 35 10.3%
3人 28 8.2%
4人 17 5.0%
5人以上 55 16.2%

このように1人しかインストールしていない拡張機能が全体の6割(205種類)を占め、それぞれのエンジニアが独自の使い方をしていることがわかります。全体の構成比では次のようなグラフになります。

人によってかなり異なるインストール数

それぞれのエンジニアがインストールしている拡張機能の数は、多い人で65種類、少ない人は3種類と、かなりバラツキがありました。強いて言うなら27種類が最も多く、4人でした。

この図は横軸がインストールしている拡張機能の数、縦軸がその人数をプロットしたものです。平均では、1人およそ27個の拡張機能をインストールしています。

インストール数 人数
10未満 6人
10〜19 7人
20〜29 10人
30〜39 6人
40〜49 4人
50以上 4人

この表のように、6人が10種類に足らない拡張機能しか使っていない一方で、40種類以上をインストールしているエンジニアも8人おり、VSCodeの使い方は個々人でかなり異なるようです。

興味深いコメントをピックアップ

一覧とあわせて回答してもらったコメントから、興味深いものをいくつか紹介します。それぞれの「インストールしている拡張機能」をクリックすると一覧が表示されます。

たくさんの拡張を細やかに使うid:maku693

id:maku693がインストールしている拡張機能(39個)
alefragnani.Bookmarks
apollographql.vscode-apollo
artdiniz.quitcontrol-vscode
benjpas.close-all
bibhasdn.unique-lines
bungcip.better-toml
casualjim.gotemplate
cohalz.vscode-md2hatena
dbaeumer.vscode-eslint
EditorConfig.EditorConfig
eg2.vscode-npm-script
esbenp.prettier-vscode
filipesabella.live-p5
GitHub.github-vscode-theme
GitHub.vscode-pull-request-github
golang.go
hitode909.auto-programming
hitode909.perl-outline
jackkaramanian.perl-syntax
jebbs.plantuml
jock.svg
Kaktus.perltidy-more
mathiasfrohlich.Kotlin
mosapride.zenkaku
ms-azuretools.vscode-docker
ms-python.python
ms-vscode.vscode-typescript-tslint-plugin
ms-vsliveshare.vsliveshare
msjsdiag.debugger-for-chrome
mtxr.sqltools
redhat.vscode-yaml
richterger.perl
samosad.tt
sysoev.vscode-open-in-github
TabNine.tabnine-vscode
utgwkk.perl-insert-package
waderyan.gitblame
yaamaa.template-toolkit-tag-pair
yassh.copy-with-line-numbers

主にPerl、Go、TS/JS用です。
Live Share大好きです。

auto-programmingPerl insert packageは、Perlを書いてた頃に愛用してました。
Template Toolkit Tag Pairは、TT2風のテンプレートを書く人におすすめです。
md2hatenaは、はてな記法に慣れてない頃よく使ってました。

EditorConfig for VS CodeGoESLintPrettier - Code formatterと「フォーカス外したときにフォーマット」の組み合わせで、常にインデントの治安を保っています。
Unique Linesは、名前と関係ないけど、選択した行をアルファベット順にソートするのに使っています。

Quit Control for VSCodeは、command+Wやcommand+Qをpromptしてくれるので、うっかりミスが減って便利です。
Close Allは、タブがめちゃくちゃになってきたら実行して、スッキリさせてます。

GitHub Pull Requests and Issuesを入れておくと、歴史を探ったりするのに何かと便利です。

id:hogashi< 拡張機能それぞれの使い方の紹介が細やかで、普段のコーディングの様子がなんとなく想像できます。

思い出の名残りも感じられるid:dekokun

id:dekokunがインストールしている拡張機能(40個)
13xforever.language-x86-64-assembly
alexnesnes.makeRunner
amazonwebservices.aws-toolkit-vscode
andrejunges.Handlebars
bungcip.better-toml
casualjim.gotemplate
cfgweb.vscode-perl
chef-software.chef
CoenraadS.bracket-pair-colorizer-2
cohalz.vscode-md2hatena
dbaeumer.vscode-eslint
dob6458.dracula-theme
eamodio.gitlens
EditorConfig.EditorConfig
felipe.nasc-touchbar
foxundermoon.shell-format
gerane.Theme-Dracula
golang.go
jackkaramanian.perl-syntax
Kaktus.perltidy-more
lanza.lldb-vscode
lostintangent.vsls-whiteboard
ms-azuretools.vscode-docker
ms-python.python
ms-vscode-remote.remote-containers
ms-vscode.cpptools
ms-vsliveshare.vsliveshare
oderwat.indent-rainbow
PKief.material-icon-theme
rebornix.ruby
redhat.vscode-yaml
rust-lang.rust
streetsidesoftware.code-spell-checker
timonwong.shellcheck
vadimcn.vscode-lldb
Vallentin.vscode-bnf
vscodevim.vim
william-voyek.vscode-nginx
wingrunr21.vscode-ruby
xaver.clang-format

clangでコンパイラやOSを作ってた名残りで、clang関連(C/C++など)やassembly関連(x86 and x86_64 Assemblyなど)の拡張機能が入ってます。 RustPythonは、AtCoderでいつも使っています。

vimから乗り換えたので、やはりvim的なのは必須ですね。今使ってるターミナルのAlacrittyはマルチバイト文字対応がおかしい感じがして、vimに戻りたくても戻れない日々(ただし、vimのマクロを使った処理の際はvimに戻ってしまう...)。

Bracket Pair Colorizer 2は、今いるブロックがどこなのか視覚的にわかりやすくて好き。

id:hogashi< 拡張機能一覧を見て、コンパイラやOSを作っていたことを思い出せるのはおもしろいですね。

ちなみにアンケート結果では、Bracket Pair Colorizerを7人がインストールしていたのに対して、より新しいBracket Pair Colorizer 2は3人で、数人から「2が出ているのを知らなかった!」という声が上がっていました。

最多インストール数のid:mizdra

id:mizdraがインストールしている拡張機能(65個)
akamud.vscode-theme-onedark
AlDuncanson.react-hooks-snippets
alefragnani.Bookmarks
bungcip.better-toml
castwide.solargraph
CoenraadS.bracket-pair-colorizer
cssho.vscode-svgviewer
Dart-Code.dart-code
Dart-Code.flutter
dbaeumer.vscode-eslint
denniskempin.vscode-include-fixer
dracula-theme.theme-dracula
dtsvet.vscode-wasm
eamodio.gitlens
EditorConfig.EditorConfig
eg2.vscode-npm-script
EQuimper.react-native-react-redux
esbenp.prettier-vscode
fivepointseven.vscode-theme-onedark-vivid
formulahendry.vscode-mysql
GitHub.vscode-pull-request-github
golang.go
henriiik.vscode-perl
jackkaramanian.perl-syntax
jithurjacob.nbpreviewer
jpoissonnier.vscode-styled-components
Kaktus.perltidy-more
kumar-harsh.graphql-for-vscode
kuscamara.electron
llvm-vs-code-extensions.vscode-clangd
mammothb.gnuplot
marp-team.marp-vscode
mattn.Lisp
mechatroner.rainbow-csv
misogi.ruby-rubocop
mortenhenriksen.perl-debug
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-ja
ms-python.python
ms-vscode.cpptools
ms-vscode.vscode-typescript-tslint-plugin
ms-vsliveshare.vsliveshare
octref.vetur
Orta.vscode-jest
pnp.polacode
Prisma.prisma
rebornix.ruby
richterger.perl
RobbOwen.synthwave-vscode
RReverser.llvm
rust-lang.rust
samosad.tt
stevencl.addDocComments
stringham.copy-with-imports
sysoev.vscode-open-in-github
teabyii.ayu
tinkertrain.theme-panda
vadimcn.vscode-lldb
vincaslt.highlight-matching-tag
wingrunr21.vscode-ruby
wmaurer.change-case
xaver.clang-format
Yukai.map-replace-js
yzhang.markdown-all-in-one
zhuangtongfa.material-theme

シンタックスハイライト系では、Bracket Pair ColorizerRainbow CSVHighlight Matching Tagあたりが気に入ってます。

Polacodeは、自分の使っているカラーテーマで、簡単にコードのスクショが取れて便利です。研究とかでも使ってました。

一番気に入っているのはmap-replace.jsで、JavaScriptで文字列置換ができて、全くもって出番はないのですが、JSerにとっては面白い拡張という感じです。

id:hogashi< 拡張機能のインストール数は、最多の65! おすすめのmap-replace.jsを使ってみましたが、当たり前にnew Date()とか書けたりして、かなり妙な感覚があります。

意思を感じる最少インストール数のid:onk

TypeScriptを書くときはメインエディタとして使ってるけど、ちょっと面倒なことをしたくなるとすぐvimを起動してしまうので、育てられてない。「入れるべき拡張20選」みたいな記事はけっこう読んでいて、それでも不要と判断している。

id:hogashi< インストールしている拡張機能の数は最も少なく、なんと3! 暮らしにはっきりとした意志を感じます。

プログラミング以外にも使うid:daiksy

最近使い始めました。ちょうど技術文書執筆の仕事をしていて、vscode-textlintを便利に使っています。

id:hogashi< 文書の執筆! そのための拡張機能もあってすごい……。

〈番外編〉WebStormの便利プラグイン

社内にはもちろんVSCodeを使わないエンジニアもおり、その中でも今回のアンケートに回答してくれたid:nanimono_demonaiのコメントを紹介します。

SublimeWebStormだけで、VSCodeは使っていないです。WebStormの便利プラグインは、GitToolBoxRainbow Brackets

id:hogashi< WebStormにも便利な拡張機能がたくさんありそう!

なお、当然ながらインストールしてる拡張機能は0で、集計には含めていません。

はてなエンジニアが自作した拡張機能

アンケートの中には、はてなのエンジニアが自作した拡張機能もいくつかありました。そのうちインストールしている人数が多かったり、特におすすめのコメントがあった拡張機能を紹介します。

Template Toolkit Tag Pair

Template Toolkit Tag Pair - Visual Studio Marketplace

by id:YaaMaa

Template Toolkit Tag Pairは、Template Toolkitのブロックのペアを色付けしたり、対応関係を示したりする拡張機能です。今回のアンケートでは、13人がインストールしていました。

Perl insert package

Perl insert package - Visual Studio Marketplace

by id:utgwkk

Perl insert packageは、Perlのパッケージのファイルパスを使って、パッケージ名を自動で挿入できる拡張機能です。今回は、10人がインストールしていました。詳細は次のブログ記事を参照してください。

md2hatena

md2hatena - Visual Studio Marketplace

by id:cohalz

md2hatenaは、Markdownで書かれた文書を、はてな記法に変換する拡張機能です。8人がインストールしていました。

auto-programming

auto-programming - Visual Studio Marketplace

by id:hitode909

auto-programmingは、コーディング時に、リポジトリ内をgit grepして続きを予測入力できる拡張機能です。6人がインストールしていました。次のブログ記事を参照してください。

Search in Current File

Search in Current File - Visual Studio Marketplace

by id:shiba_yu36

Search in Current Fileは、検索結果一覧を見ながらファイル内を文字列検索できる拡張機能です。3人がインストールしていました。次のブログ記事を参照してください。

おわりに

VSCodeにインストールされている拡張機能の一覧を集めて見比べてみるだけの企画でしたが、ここまでたくさんの拡張機能が集まるとは思っていませんでした(その分、集計が大変でした……)。

はてなのエンジニアそれぞれが普段どのようにコーディングしているか、その様子が少しでも紹介できていれば嬉しいです。みなさんもいろいろな拡張機能を探したり自分で作ったりして、ぜひVSCodeを便利に使ってみてくださいね!

なお、はてなエンジニア世論調査ではお題を募集しています。エンジニアのこんな生態が知りたいなどあれば、はてなブックマークのコメントなどでお寄せください!

エンジニア採用 - 採用情報 - 株式会社はてな

付記・利用者が5人未満の拡張機能すべて

5人以上のはてなエンジニアが使っている拡張機能は本文で紹介しましたが、それ未満の282種類もすべて掲載しておきます。

★印は本稿執筆現在(2020年8月13日)時点でVisual Studio Marketplaceに掲載されていない拡張機能です。

まず、4人が使用している17種類の拡張機能です。

続いて、3人が使用している28種類の拡張機能です。

2人が使用している35種類の拡張機能です。

最後に、1人だけが使用している205種類の拡張機能です。