【TypeScript, Python, Docker】VSCodeで簡単おすすめリンター・フォーマッター紹介

本記事について

VSCodeで拡張機能と組み合わせて簡単に利用できるおすすめリンター・コードフォーマッターを紹介する。

TypeSript

@antfu/eslint-config(ESLint)

VueやNuxtのコアチームのメンバーであるAnthony Fuさんが開発されている。
prettierを使わず、ESLintとVSCodeのESLint拡張機能、VSCodeの設定ファイルを使ってコードフォーマット(auto fix)を行う。
新規設定用のコマンドが用意されており、コマンドを実行しいくつか質問に答えるとパッケージのインストールが行われ、eslint.config.mjsファイル、auto fix用の.vscode/settings.jsonファイルが自動生成される。便利。
flat config対応。

eslint-plugin-simple-import-sort(ESLint)

import文のソートを行うESLintプラグイン。
上記の@antfu/eslint-configに設定を追加して利用している。
こちらもflat config対応。

Python

Ruff(Linter, Formatter)

https://github.com/astral-sh/ruff

速さを売りにしているリンター兼フォーマッター。
個人的にはツールがこれ一つで済む点を高く評価している。

VSCode拡張機能を入れて以下のようにVSCodeの設定ファイルを編集すれば、保存時に自動でフォーマットが行われるようになる。

settings.json

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit"
    },
    "editor.defaultFormatter": "charliermarsh.ruff"
  }
}

Dockerfile

hadolint(Linter)

https://github.com/hadolint/hadolint

Dockerfileの書き方が、Docker公式のベストプラクティスに沿っているかを確認できるlintツール。
Homebrewなどでhadolintをインストールし、VSCode拡張機能を入れると、VSCode上でエラーを確認できる。

リンター・フォーマッターがうまく機能しない場合

VSCodeのOUTPUTタブでESLintやprettierを選択すると、実行結果を確認することができる。
うまく機能していない際は、何かしらのエラーが表示されている可能性が高いので、エラー内容を元に修正すれば良い。

Image from Gyazo ESLintの実行履歴と詳細が表示されている例。