前置き
前回に引き続き、全般的(システムの種類や言語問わず、利用頻度の多い要素に対して全般的というとらえ方になっています。)なVSCodeの設定になります。前回がsettings.jsonについてでしたが、今回は拡張機能についての紹介になります。
追記(2023/10/15)：カラーテーマ「Night Owl」とコード実行「Code Runner」に関する記述を加えました。
全般的な拡張機能
全般的なものだけでも全部で30個くらいは入れています。settings.jsonと同じでカテゴリ分けをして考えています。拡張機能では3つのカテゴリ分けをしており、「Linter, Formatterに関するもの」「大きく効率化に貢献するもの」「それなりに効率化に貢献するもの」となっています。
Linter, Formatterに関するもの
settings.jsonでは静的解析を行うLinterと自動フォーマットを行うFormatterは最重要カテゴリと考えていましたが、拡張機能においてもそれは同じ考え方になります。
この区分は、効率化だけでなく品質を保つ役割も持つので最終的に完成度とスピードに最も貢献するでしょう。このカテゴリ全ての拡張機能をCLIでインストールするコマンドも記載しておきます。
code\
--install-extension editorconfig.editorconfig\
--install-extension streetsidesoftware.code-spell-checker\
--install-extension yzhang.markdown-all-in-one\
--install-extension davidanson.vscode-markdownlint\
--install-extension redhat.vscode-yaml\
--install-extension ms-azuretools.vscode-dockerこのカテゴリは6つの拡張機能を紹介しています。
意外にも言語によらないものは2つのみです。残りは以下のような理由で言語別の拡張機能を全般的として紹介しています。
まずMarkdownが2つあります。MarkdownはREADME.mdを筆頭にソフトウェア開発におけるドキュメント作成に頻繁に用いるので使わないシステムはほぼ無いと言っても過言ではないでしょう。
次にYAMLが1つあります。YAMLファイルはGitHub ActionsやGitLab CI/CDのようなDevOpsの要となるCI/CD自動化プログラムの内容を記述する際に多用します。ちゃんとしたシステム開発ではほぼ必須となっています。ちなみにKubernetesマニフェストやdocker-compose.ymlには使えません。
最後にDockerが1つになります。MarkdownやYAMLに比べると利用率は若干下がりますが、今ドキなシステムはほぼDockerのようなコンテナをフル活用するのが普通なので、全般的と言って差し支えないでしょう。Dockerに関する拡張機能は、「リモート接続に関するもの」のカテゴリにも存在しています。
Editor Config for VS Code
エディタによらずエンコード等の設定が統一される.editorconfigファイルをVS Codeで有効化するために必要になる拡張機能です。VS Codeにおいては類似した設定がsettings.jsonで記述できますが、基本的には入れておくことになります。
- end_of_line
- 改行コード
- charset
- 文字コード(vscodeは未対応なので、settings.jsonでカバーすること)
- indent_style
- インデントをSpaceで行うかTabで行うか
- indent_size
- インデントのサイズ
- trim_trailing_whitespace
- 行末の空白を削除
- insert_final_newline
- ファイル末尾に空白行を追加
- tab_width
- タブキーのサイズ(無い場合indent_sizeを基準にタブキーが動作するので基本的には設定する必要は無い)Code Spell Checker
英単語のスペルミスを静的解析してくれる拡張機能になります。固有名詞などはsettings.jsonに登録して除外することが可能です。固有名詞の登録はユーザー設定よりもワークスペース設定にした方が良いです。チーム開発などでは特に。
Ｍarkdown All in One
Markdownファイルに関する便利機能が詰まった拡張機能です。どちらかというと入力補完的な機能が目立ちますが、TOC(目次)作成機能や数値見出しの自動ナンバリング機能、リンクをMarkdown形式に直す機能あたりはFormatterとして優秀なのでこちらのカテゴリに分類しています。
settings.jsonでは3つの設定をカスタムする記述を書きました。ただ、FormatterにはVSCode標準のものを充てています。
markdownlint
Markdownファイルの静的解析を行う拡張機能です。結構厳しめに付けられますが、この拡張機能によりMarkdownが破綻することはほぼ無いでしょう。
settings.jsonでは2つのルールカスタムを行いました。
YAML
YAMLファイルに関する便利機能が詰まった拡張機能になります。YAMLのFormatterとして機能するほかにも、入力補完の機能が付いています。これはJSON Schema Storeの情報を読み取ってくれるので様々な用途のYAMLファイルに用いることが可能です。
settings.jsonでは4つのカスタム設定を書いています。（Kubernetesシステムで使いたい場合はFomatter機能2つの設定を切った方が良い（YAML自体は入力補完で有用）ので、注意）
Docker
Docker関連に関する便利機能が詰まった拡張機能になります。
Dockerfileやdocker-compose.ymlのFormatter及び入力補完の機能は便利ですが、個人的にはGUI的にDockerを扱える機能にはありがたみを感じない（CLIで十分というかCLIに慣れとかないと困ると思っています）です。
settings.jsonはFormatter指定のみです。
大きく効率化に貢献するもの
このカテゴリは主に利便性を向上させることによって効率化に寄与する拡張機能のうち、利用頻度が特に高く便利なものになります。
主に、パッシブで視覚的にすぐ効果がわかるものや頻度の高い要素についての入力補完などが多いです。
code\
--install-extension mikestead.dotenv\
--install-extension usernamehw.errorlens\
--install-extension oderwat.indent-rainbow\
--install-extension shd101wyy.markdown-preview-enhanced\
--install-extension bpruitt-goddard.mermaid-markdown-syntax-highlighting\
--install-extension emilast.LogFileHighlighter\
--install-extension christian-kohler.path-intellisense\
--install-extension jebbs.plantuml\
--install-extension PKief.material-icon-theme\
--install-extension ms-vscode-remote.vscode-remote-extensionpack\
--install-extension sdras.night-owl\
--install-extension formulahendry.code-runner拡張機能は9個になります。
DotENV
開発向けに環境変数を管理する.envファイルにハイライトシンタックスを付けます。
Error Lens
ErrorやWarningをインラインで表示します。
素早くエラーを理解できて便利です。
indent-rainbow
インデントを設定されたタブ単位でカラフルにします。
視覚的にどれだけのインデントになっているかを素早く理解できます。
Markdown Preview Enhanced
Markdownのプレビュー画面を表示できる拡張機能です。大きな利点として、MermaidやPlantUMLのようなダイアグラム作図系のものも表示できます。
Mermaid Markdown Syntax Highlighting
ダイアグラム作図のひとつであるMermaidをシンタックスハイライトで表示可能です。
Log File Highlighter
logファイルの内容をハイライト表示可能です。
Path Intellisense
ファイルパスの入力補完が可能になる拡張機能です。
一部言語（JavaScriptとTypeScriptです）では、デフォルトのPathサジェストをOFFにする必要があります。
PlantUML
PlantUMLの利用には別途ライブラリであるGraphvizが必要になりますが、シンタックスハイライトやスニペットが可能になります。
Material Icon Theme
ディレクトリやファイルに独自でアイコンを設定します。視覚的に分かりやすくなります。
Night Owl
カラーテーマは個人の好み色が強そうなので、記事執筆時は書かないでも良いかなとも思いました。
が、Night Owlは目に優しいというメリットがあり、改めて考えるとこれは有用性が高いと思い直し追加しました。
イタリック調はどちらでもいいですが、個人的には無いほうが日本語が読みやすいです。
Code Runner
私の普段の仕事（JavaScriptやPythonが多いです）では、静的解析や自動テストはバリバリやるけどデバッグはあまり行わないスタイルなのですっかり載せ忘れていましたが、シェルスクリプト書いてた時にボチボチ使っていたこいつを忘れていました。（プライベートでは使ったこと無かったというのもあります）
コードを簡易的に実行する拡張機能で、デバッグや手動テストに役立ちます。
Remote Development
こいつは分類に悩みましたが、WSLを使った開発は普通になってきているのでやはりこの位置かなと。
リモート接続に関する拡張機能が6個(4+2)セットになっているものになります。人によって使う機能使わない機能がバラけるかもしれないので、個別でインストールしても良いかと。
- WSL：WSLでVSCodeを用いる時に必要。
- Dev Container：コンテナ内環境をVSCodeで開くことができます。
- Remote – SSH：SSH接続先をVSCodeで開くことができます。
- Remote – SSH: Editing Configuration Files：SSH設定ファイルの入力補完が可能。
- Remote Tunnels：Tunnel接続先をVSCodeで開くことができます。
- Remote Explorer：Remote SSHやRemote Tunnelsで接続可能なリモートマシンを一覧表示できます。
それなりに効率化に貢献するもの
「大きく効率化に貢献するもの」に比べると大分利便性は落ちますが、まんべんなく使わなくはない程度の拡張機能になります。
code\
--install-extension VisualStudioExptTeam.vscodeintellicode\
--install-extension MS-CEINTL.vscode-language-pack-ja\
--install-extension yzane.markdown-pdf\
--install-extension IBM.output-colorizer\
--install-extension ryu1kn.partial-diff\
--install-extension mechatroner.rainbow-csv\
--install-extension chrmarti.regex\
--install-extension wayou.vscode-todo-highlightジャンル的には、パッシブ的なものよりアクティブ的（自分から機能を使いに行く）ものが多いです。このカテゴリには8個の拡張機能があります。
IntelliCode, IntelliCode API Usage Examples
JavaScript, TypeScript, Python, Java. T-SQLの入力補完を行う拡張機能と使用例サンプルを表示する拡張機能です。API Usage Examplesは自動で付いてきます。
入力補完系で言語の幅もそれなりに広いですが、利用しない言語の時は全く役に立たないので「それなり」の位置にいます。私自身はJSとPythonめちゃくちゃ書くのでめちゃくちゃ使います。
Japanese Language Pack for Visual Studio Code
VSCodeを日本語化する機能になります。インストールするだけで効きますが、たまに「Configure Display Language」を手動で設定してあげないといけないときもあるので注意です。
日本人的にはありがたいですが、慣れれば英語でも問題無く使えます。まぁ、多少日本語にしたところでソフトウェア開発界隈は死ぬほど英語が出てくるので焼け石に水です。
私もプライベートPCには一応入れていますが、仕事用のモバイルPCはストレージカツカツ(128GBしかない)なので、コレを含めて利用頻度や寄与度の低い拡張機能は切ってます。
Markdown PDF
Markdownファイルをいい感じのPDFに出力してくれる拡張機能です。
主に仕事上でPDFクレクレ君(失礼)に対して使います。昔ながらの日本企業にお勤めの方には使いどころがボチボチあると思います。
私用で使う機会は今のところ無いのでプライベートPCには入れていません。
Output Colorizer
VSCodeの出力(Output)に色を付けて見やすくします。「私は」ですが、あまり出力欄を見ないので「それなり」分類にしましたが、使う人はもっと重要かもしれません。
Partial Diff
コード選択2箇所やクリップボードなどを用いて、差分確認ができる機能。
ソースコードについては基本Gitを使うので、利用形態としてはCSVとかJSONの比較になると思います。私もだいたいそういうことをするのは仕事上なので、業務では役立つけどプライベートではほとんど使わない拡張機能だと思ってます。
Rainbow CSV
CSVに色を付けて見やすくします。CSV自体が仕事では結構使うけどプライベートだとあまり使わないファイルなので、利用頻度は仕事では高くプライベートでは低い拡張機能になってます。
Regex Previewer
正規表現のプレビューが可能になる拡張機能です。正規表現は様々なシステムで登場しますが、利用頻度はそこそこ止まりなのでこの位置に。
ちなみに私が最も正規表現を触ったのはLinuxのsedコマンドになります。
TODO Highlight
TODO: と記述した文字を見やすくハイライト化します。これはスクロール部分にも載ります。
私情ですが、1年くらい前までは仕事で結構使ってました（ので、1年位前までだったら大きく効率化のカテゴリだったと思います）。しかし、今はToDo的な要素があった場合GitLab issueに書くようになったので、殆ど使わなくなりました。
プライベートだとイシューでタスク管理とかやらないのでちょこちょこ使う感じですね。なので、「それなり」評価です。
あとは、引継ぎプロジェクトとかでこの拡張機能使う人がいた場合に書いてあるTODO探しに使えます。まぁ、普通に全体検索機能使ってもいいんですが。
最後に
ちなみに過去にはGitLensやGit Graphとかも使ってましたが、gitはCLIとWebでしか使わなくなったので不要になりました。
