IDE のエクステンションに何を使っていますか
8/17/2021
IntelliJ
VSCode

下記イベントに伴う記事のひとつとして書かせていただいた。

【オンライン開催】おはようエンジニア 特別編 - エディタの開発環境に役立つエクステンション

筆者 (私) は IntelliJ や VSCode の二刀流として Web 界隈に生息している。

可能な限り IntelliJ 上で済ませるようにしており Docker (MySQL や PostgreSQL) なども IntelliJ 上で動かしている。

私がお世話になっているエクステンション

私自身少ないなりにもエクステンションをインストールしているが、エディタの機能をフル活用している訳でもありません。

ちなみに Vetur や Flutter Intl は固有のフレームワークを使う際に便利なエクステンションで、全てのデベロッパが必要になる訳ではありません。

  • Git Graph
  • Bracket Pair Colorizer 2
    • IntelliJ では Rainbow bracket
  • Code Spell Checker
  • Draw io integration
    • IntelliJ では Diagrams net Integration
  • Remote Containers
  • Vetur
  • Flutter Intl
    • IntelliJ でも Flutter Intl

またエクステンションでは無いものの、ファイル保存時に自動で ESLint fix してくれる機能がある。 IntelliJ では File Watcher という機能が存在する。

File Watcher

VSCode でも setting.json に下記設定を追加することで同様の機能を実現できる。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Git Graph

コミット履歴をツリー形式で表示してくれる。

Git Graph

Bracket Pair Colorizer 2

対応する括弧を色分けして表示してくれる。

Bracket Pair Colorizer 2

IntelliJ でも同様のエクステンションが存在する。

Rainbow bracket

Code Spell Checker

スペルミスを検出してくれる。

Code Spell Checker

Draw io integration

設計図を描画してくれる。

Draw.io integration

IntelliJ でも同様のエクステンションが存在する。

Diagrams.net Integration

Remote Containers

Docker 内で VSCode Server を動かす。ソースコードはボリュームマウントするため Docker 内から見える (VSCode で編集できる)

Remote Containers

Vetur

言わずと知れた Vetur で Vue ファイルを操作しているとオススメのメッセージが表示されるため、ご存知の方も多いでしょう。

Vetur

Flutter Intl

pubspec.yaml に必要なライブラリ書いてインストールする。適宜初期化してロケールを追加すれば、自動で /lib/generated に吐き出してくれる。

Flutter Intl

IntelliJ でも同様のエクステンションが存在する。

Flutter Intl

あわせてよみたい..