prettier vs eslint vs stylelint vs tslint

フロントエンドコードの品質管理とフォーマットツールの比較

eslint と tslint はコードの論理的な誤りを発見するリンターです。prettier はコードの見た目を整えるフォーマッターです。stylelint は CSS コードの品質をチェックします。これらを組み合わせることで、チーム全体でコードの品質とスタイルを統一できます。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス
パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス
prettier	108,145,045	51,893	8.6 MB	1,488	1ヶ月前	MIT
eslint	0	27,281	2.91 MB	112	9日前	MIT
stylelint	0	11,469	954 kB	125	4日前	MIT
tslint	0	5,906	-	1	6年前	Apache-2.0

eslint vs prettier vs stylelint vs tslint: コード品質ツールの役割と選び方

フロントエンド開発において、コードの品質を保つことは重要です。eslint、prettier、stylelint、tslint はすべてコードをチェックするツールですが、役割が異なります。これらを正しく理解し、組み合わせることで、バグを減らし、チーム内のコードスタイルを統一できます。

🛠️ 役割の違い — リンター vs フォーマッター

eslint は JavaScript と TypeScript のリンターです。

コードの論理的な誤りや、潜在的なバグを見つけます。
変数の未使用や、型に関するミスなどを検知します。
ルールをカスタマイズして、プロジェクト固有の規則を設けられます。

// .eslintrc.js の例
module.exports = {
  rules: {
    'no-unused-vars': 'error',
    'eqeqeq': 'error'
  }
};

prettier はコードフォーマッターです。

コードの見た目（インデント、改行、クォート）を自動で整えます。
論理的なエラーは検知しません。
設定項目が少なく、議論する時間を減らせます。

// .prettierrc の例
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

stylelint は CSS のリンターです。

CSS や SCSS、Less の構文エラーやスタイルルールをチェックします。
色コードの形式や、プロパティの順序などを統一できます。
JavaScript のツールとは別に、スタイルシート専門の品質管理を行います。

// .stylelintrc.json の例
{
  "rules": {
    "color-no-invalid-hex": true,
    "declaration-block-no-duplicate-properties": true
  }
}

tslint は TypeScript 専用のリンターでしたが、現在は非推奨です。

過去には TypeScript プロジェクトで広く使われていました。
現在は開発が終了しており、新しいプロジェクトでは使用すべきではありません。
既存プロジェクトは eslint に移行する必要があります。

// tslint.json の例（非推奨）
{
  "rules": {
    "quotemark": [true, "single"]
  }
}

⚠️ 重要な注意点 — tslint の非推奨について

tslint は公式に非推奨（deprecated）となっています。

Microsoft と tslint メンテナーは、eslint への移行を推奨しています。
typescript-eslint を使うことで、eslint で TypeScript を完全にサポートできます。
新しいプロジェクトで tslint を選ぶ理由はありません。既存プロジェクトも移行を計画すべきです。

🤝 組み合わせ方 — eslint と prettier の併用

eslint と prettier は競合するのではなく、補完し合います。

eslint はコードの「質」を担当します。
prettier はコードの「見た目」を担当します。
両方を同時に使う場合、フォーマットに関する eslint ルールをオフにする必要があります。

// .eslintrc.js で prettier と競合するルールをオフ
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier' // prettier の設定を適用して競合を解消
  ]
};

📊 機能比較サマリー

機能	`eslint`	`prettier`	`stylelint`	`tslint`
対象	JS / TS	JS / TS / CSS 等	CSS / SCSS	TS (非推奨)
主な役割	品質チェック	自動フォーマット	品質チェック	品質チェック
設定	詳細可能	最小限	詳細可能	詳細可能
状態	✅ 推奨	✅ 推奨	✅ 推奨	❌ 非推奨

💡 最終的な推奨事項

eslint は JavaScript と TypeScript の品質管理に必須です。 prettier はフォーマット議論をなくすために導入すべきです。 stylelint は CSS を書くチームなら導入を検討してください。 tslint は絶対に使わないでください。

現代のフロントエンド開発では、eslint と prettier を組み合わせるのが標準です。これにより、コードの質を保ちながら、スタイルに関する無駄な議論を減らせます。チームの生産性を高めるために、これらのツールを正しく設定しましょう。

選び方: prettier vs eslint vs stylelint vs tslint

prettier:
コードのフォーマット（インデントやセミコロン）を自動で整えたい場合に選択します。設定項目が少なく、チーム内のスタイル議論を減らすのに最適です。
eslint:
JavaScript や TypeScript の論理エラーやコード品質をチェックしたい場合に選択します。プラグイン生態系が豊富で、プロジェクト固有の規則を細かく設定可能です。
stylelint:
CSS や SCSS の記述ルールを統一したい場合に選択します。スタイルシートの構文エラーやベストプラクティス違反を検知できます。
tslint:
選択しないでください。公式に非推奨であり、メンテナンスも終了しています。既存プロジェクトは eslint に移行すべきです。

prettierと類似したnpmパッケージ

prettierは、コードのフォーマッティングを自動化するための人気のあるツールです。JavaScript、TypeScript、HTML、CSSなど、さまざまなプログラミング言語に対応しており、コードの一貫性を保つために使用されます。Prettierを使用することで、開発者はコードスタイルに関する議論を避け、より生産的な作業に集中できるようになります。しかし、Prettierにはいくつかの代替手段もあります。以下にいくつかの選択肢を紹介します。

eslintは、JavaScriptおよびTypeScriptのための静的コード解析ツールです。主にコードの品質を向上させるために使用され、エラーや潜在的な問題を検出します。ESLintは、コードスタイルのルールを設定することもでき、Prettierと組み合わせて使用することが一般的です。ESLintは、コードの整形だけでなく、品質管理にも役立つため、より包括的なソリューションを提供します。
js-beautifyは、JavaScript、HTML、CSSのコードを整形するためのツールです。Prettierと同様に、コードを読みやすくするために使用されますが、設定やオプションが豊富で、より細かい制御が可能です。js-beautifyは、特定のスタイルガイドに従いたい場合や、カスタマイズ性を重視する場合に適しています。
standardは、JavaScriptのためのスタイルガイドであり、Lintingとフォーマッティングを組み合わせたシンプルなソリューションです。Standardは、特定の設定を必要とせず、デフォルトのスタイルに従うことで、開発者が迅速にプロジェクトを開始できるように設計されています。特に、設定を最小限に抑えたい開発者にとって便利です。

これらのパッケージの比較については、こちらをご覧ください: Comparing eslint vs js-beautify vs prettier vs standard.

eslintと類似したnpmパッケージ

eslintは、JavaScriptやTypeScriptのコード品質とスタイルを保つための静的コード解析ツールです。開発者はESLintを使用して、コードのエラーや潜在的な問題を特定し、コーディングスタイルを統一することができます。ESLintは非常に柔軟で拡張性が高く、さまざまなプラグインやルールを追加することで、プロジェクトのニーズに合わせた設定が可能です。しかし、ESLint以外にも、同様の目的を持つツールがいくつか存在します。以下にいくつかの代替ツールを紹介します。

prettierは、コードフォーマッターであり、特にJavaScriptやTypeScriptのコードを自動的に整形するために使用されます。Prettierは、コードのスタイルを一貫して保つことに特化しており、開発者が手動でスタイルを調整する手間を省きます。ESLintと併用することで、コードの品質とスタイルを同時に管理することができます。
stylelintは、CSSやSCSSなどのスタイルシートのための静的コード解析ツールです。スタイルの一貫性を保つためのルールを設定し、問題を特定することができます。Web開発において、CSSの品質を確保するためにStylelintを使用することは非常に有益です。ESLintと同様に、Stylelintもプラグインを通じて拡張可能です。
tslintは、TypeScriptのための静的コード解析ツールでしたが、現在はESLintに統合されつつあります。TypeScriptのプロジェクトでは、ESLintを使用することで、TypeScriptのコード品質を確保することが推奨されています。TSLintは過去のツールとして位置づけられていますが、TypeScriptのプロジェクトでの使用を考える際には、ESLintを選択することが一般的です。

これらのツールの比較については、こちらをチェックしてください: Comparing eslint vs prettier vs stylelint vs tslint。

stylelintと類似したnpmパッケージ

stylelintは、CSSやその拡張子（SCSS、LESSなど）のスタイルシートを検証するための強力なツールです。スタイルシートの品質を向上させるために、開発者が一貫したコーディングスタイルを維持できるように設計されています。stylelintは、カスタマイズ可能なルールセットを提供し、プロジェクトのニーズに合わせてスタイルガイドを作成することができます。これにより、コードの可読性とメンテナンス性が向上します。しかし、stylelintの他にも、スタイルやコードの品質を管理するための代替ツールがいくつかあります。

eslintは、JavaScriptコードの静的解析ツールであり、コードの品質を保つために広く使用されています。eslintは、JavaScriptの文法やスタイルに関するルールを検証し、エラーや警告を提供します。CSSやスタイルシートの検証には特化していませんが、JavaScriptとCSSを組み合わせたプロジェクトでは、両方のツールを併用することが一般的です。
prettierは、コードフォーマッターであり、JavaScript、CSS、HTMLなどのファイルを自動的に整形するためのツールです。prettierは、コードのスタイルを一貫させることに焦点を当てており、開発者が手動でスタイルを調整する手間を省きます。stylelintと併用することで、スタイルの品質を保ちながら、コードの整形も自動化できます。
sass-lintは、Sass（SCSS）ファイル専用のリントツールです。sass-lintは、Sassコードのスタイルや文法を検証し、エラーや警告を提供します。Sassを使用しているプロジェクトでは、stylelintの代わりにscss-lintを使用することが考えられますが、stylelintはSassだけでなく、他のスタイルシート言語にも対応しているため、より汎用性があります。

これらのツールの比較については、こちらをチェックしてください: Comparing eslint vs prettier vs sass-lint vs stylelint。

tslintと類似したnpmパッケージ

tslint は、TypeScript コードの静的解析ツールであり、コードの品質を向上させるためのルールを提供します。TypeScript プロジェクトにおいて、tslint はコードの一貫性を保ち、バグを早期に発見するのに役立ちます。しかし、tslint は非推奨となり、代わりに ESLint が推奨されています。以下は、tslint の代替となるいくつかのツールです。

eslint は、JavaScript および TypeScript のための人気のある静的コード解析ツールです。ESLint は、コードの品質を保つための豊富なルールセットを提供し、カスタマイズ可能な設定が可能です。TypeScript をサポートするためのプラグインもあり、tslint の代わりに使用することができます。ESLint は、広く使われているため、コミュニティのサポートも充実しています。
prettier は、コードフォーマッターであり、コードのスタイルを自動的に整形します。Prettier は、コードの一貫性を保つために、特定のスタイルルールを強制するのではなく、コードを美しく整形することに焦点を当てています。ESLint と組み合わせて使用することで、コードの品質とスタイルを同時に管理できます。
stylelint は、CSS および SCSS コードのための静的解析ツールです。スタイルシートの品質を保つためのルールを提供し、コードの一貫性を確保します。TypeScript プロジェクトでスタイルシートを使用している場合、stylelint は非常に役立ちます。

これらのツールの比較については、次のリンクを参照してください: Comparing eslint vs prettier vs stylelint vs tslint。

prettier

eslint

stylelint

tslint

prettier のREADME

Opinionated Code Formatter

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

Documentation

Install · Options · CLI · API

Playground

Badge

Show the world you're using Prettier →

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

Contributing

See CONTRIBUTING.md.