Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@sotszk

Editorconfig, Linter, Prettier についてざっくり理解する

More than 1 year has passed since last update.

はじめに

この記事は Editorconfig, Linter, Prettier をざっくり理解するための記事です。
対象読者は下記です。

  • これらのツールは使ったことがないけれど気になっている人
  • これらのツールの使い方は知っているけど誰かに説明しろと言われたらしどろもどろになってしまう人

ざっくり理解する

Editorconfig

Editorconfig はエディタの設定を制御するものです。エディタの設定というのがみそです。

お使いのエディタに Editorconfig プラグインをインストールすることで、エディタの改行コードや文字コードなどの設定を .editorconfig ファイルによって制御できるようになります。エディタの設定で変更することができない設定は .editorconfig で制御することはできません。

具体的には以下のような設定項目(一部エディタによって使えないものもある)があり、これらを拡張子ごとに個別に .editorconfig に記述します。

  • 改行コード 文字コード
  • タブを使うかスペースを使うか
  • インデントの幅
  • ファイル最終行に空行を入れるか
  • 行末尾の空白を取り除くか
  • 行の長さを最大何文字まで許可するか

Editorconfig

Linter

Linter は .eslintrc などの設定ファイルにルールを記述することによって、特定の言語の書き方をルールに沿った形に縛ることができます。それによってコードの可読性や品質が担保されます。
ソースコードがルールに沿った書き方がされていない場合には警告/エラーを出すことができます。警告かエラーかといった設定もルールごとに個別に設定できます。

Linter のルール群には2つのカテゴリが存在します。
1. コードフォーマットに関わるルール
2. コードの品質に関わるルール

Linter は、JavaScript 用の ESLint やTypeScript 用の TSLint のほかに、CSS, SCSS などに使われる stylelint などがあります。その他言語用の Linter もたぶんいろいろあったと思います(pylint, HTMLHint とか・・・。JSLint は消えた。)。

余談ですが、最近のモダンなエディタ にはほぼ Linter のプラグインが入っているので、それを有効にするとコード編集中にリアルタイムで警告/エラーを出してくれるようになるのでおすすめです。

ESLint
stylelint
HTMLHint

Prettier

Prettier は コードフォーマットに関わるルールのみを取り扱います(前述の Linter のルール 1)。

対応する言語はもともと JS関連のみでしたが(たしか)、現行の v1.15.0 では JSON, CSS, HTML, Markdown, Vue, Angular などにも対応しています。

特定の言語へのルールを細かく設定できる Linter に対して、Prettier は様々な言語(Web系)のフォーマットルールを一元管理できることができます。

Prettier

おわりに

以上です。
より深く理解したいと思ったなら、本記事にも記載しているそれぞれの公式のURLを踏んでみましょう。

間違いや誤解を生むような表現などを発見しましたら指摘して頂けると幸いです。

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sotszk
福岡で Web のエンジニアをしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?