はじめに
この記事は Editorconfig, Linter, Prettier をざっくり理解するための記事です。
対象読者は下記です。
- これらのツールは使ったことがないけれど気になっている人
- これらのツールの使い方は知っているけど誰かに説明しろと言われたらしどろもどろになってしまう人
ざっくり理解する
Editorconfig
Editorconfig はエディタの設定を制御するものです。エディタの設定というのがみそです。
お使いのエディタに Editorconfig プラグインをインストールすることで、エディタの改行コードや文字コードなどの設定を .editorconfig ファイルによって制御できるようになります。エディタの設定で変更することができない設定は .editorconfig で制御することはできません。
具体的には以下のような設定項目（一部エディタによって使えないものもある）があり、これらを拡張子ごとに個別に .editorconfig に記述します。
- 改行コード
文字コード - タブを使うかスペースを使うか
- インデントの幅
- ファイル最終行に空行を入れるか
- 行末尾の空白を取り除くか
- 行の長さを最大何文字まで許可するか
Linter
Linter は .eslintrc などの設定ファイルにルールを記述することによって、特定の言語の書き方をルールに沿った形に縛ることができます。それによってコードの可読性や品質が担保されます。
ソースコードがルールに沿った書き方がされていない場合には警告/エラーを出すことができます。警告かエラーかといった設定もルールごとに個別に設定できます。
Linter のルール群には2つのカテゴリが存在します。
- コードフォーマットに関わるルール
- コードの品質に関わるルール
Linter は、JavaScript 用の ESLint やTypeScript 用の TSLint のほかに、CSS, SCSS などに使われる stylelint などがあります。その他言語用の Linter もたぶんいろいろあったと思います（pylint, HTMLHint とか・・・。JSLint は消えた。）。
余談ですが、最近のモダンなエディタ にはほぼ Linter のプラグインが入っているので、それを有効にするとコード編集中にリアルタイムで警告/エラーを出してくれるようになるのでおすすめです。
Prettier
Prettier は コードフォーマットに関わるルールのみを取り扱います（前述の Linter のルール 1）。
対応する言語はもともと JS関連のみでしたが（たしか）、現行の v1.15.0 では JSON, CSS, HTML, Markdown, Vue, Angular などにも対応しています。
特定の言語へのルールを細かく設定できる Linter に対して、Prettier は様々な言語（Web系）のフォーマットルールを一元管理できることができます。
おわりに
以上です。
より深く理解したいと思ったなら、本記事にも記載しているそれぞれの公式のURLを踏んでみましょう。
間違いや誤解を生むような表現などを発見しましたら指摘して頂けると幸いです。