32
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JS Standard Style

Posted at
1 / 34

自己紹介

  • 日野澤歓也 (ひのさわよしや)
  • github / qiita は @kt3k

今日はリントの話です


JavaScript のリントツールと言えば


JSLint / JSHint / ESLint

などがありますが


今日紹介するツール


スクリーンショット 2017-03-24 14.50.51.png


Standard

  • Standard という名前のリントツール
  • コマンド名が standard
  • 内部的には ESLint を使っている
    • ESLint おすすめルール集的なものとも言える

特徴1 (リントルール)

  • セミコロンなし
  • 2スペースインデント
  • リントルールは基本的にコンフィグ不可能❗️
  • プラグイン単位での追加は OK
    • e.g. eslint-plugin-flow eslint-plugin-vue など

特徴2 (コマンド)

  • ファイルの自動検出
    • standard コマンドを打つとリントすべきファイルをほぼ勝手に探してくれる
ignore.png

(↑ 具体的にはこの辺を ignore してる)


Why Standard?


何が嬉しいか

  • ルールがコンフィグできないため、ルールについて考える必要なくなる
  • リントすべきファイルも勝手に探してくれるため設定にかかる時間が減る

kuma.png


コミュニティ規模

  • スター数 >= 10,000
  • eslint shared config として DL 数 2位

Standard のユーザー

users.png

※実はすでに結構使われています


しかし


なにごとも良い面があれば悪い面もあります


standard を入れる際の
ツラみ 😓


ツラみ 1 😓

セミコロンが無い ;;

  • 長年セミコロンありで書いてきた人はツラい
  • そもそもセミコロンなくて大丈夫なの?
    • -> これは大丈夫と思って良い
  • どうしても無理な場合は semistandard を使うという手もあります。

semistandard

セミコロンありの standard

  • standard と engine を共有したほぼ同じ思想のツール
  • コード的にも同じコア部分を共有しているので、ほぼ同じメリットを享受可能
  • コミュニティー的にもオーバラップして居て standard ファミリーの一員 👨‍👩‍👧‍👦 と言えるプロジェクト

ツラみ 2

関数定義時のスペース位置

❌ Bad
function foo() {
  ...
}

✅ Good
function bar () {
  ...
}

ツラみ 2

関数定義時のスペース位置

❌ Bad
function foo() {
  ...
}

✅ Good
function bar () {
  ...
}

→ これは慣れましょう


ツラみ 3

そもそもリントツールを変えるという行為はツラい


ツラみに効く処方箋


処方箋1

  • standard --fix
    • 簡単なルールはこのコマンドが勝手に直してくれる (例. セミコロン, インデントなど)

処方箋2 (エディタサポート)

  • Sublime Text
  • Atom
  • Visual Studio Code
  • Vim
  • Emacs
  • Brackets
  • WebStorm (Native support)

この辺のエディタはプラグインでインラインチェックが可能


standard 対抗なツール
について

あるいは standard を使わない場合の選択肢


対抗1 XO

  • standard とほぼ同じ思想で engine とかベースのリントルールを共有していないツール
    • NOT a standard ファミリー 🙅
  • 作者は sindresorhus
  • DL 数は極小
  • ルールが厳しすぎ (個人の見解です)
  • ほとんど浸透していないが、sindresorhus 自身の npm module が 1,000 ぐらいある

対抗2 airbnb

  • eslint-config-airbnb という shared config
  • ただの shared コンフィグなので、standard のような便利機能は持っていない
  • ただし、スター数 / DL 数 共に standard を上回る
  • ただ eslint-config-airbnb をそのまま使っているリポジトリはほぼ見かけない
    • おそらくこれをベースにみんなフォークしてるせいで DL 数が多い

勢力3 prettier

  • そもそもリントじゃない
    • リントをするのではなくて AST を特定のルールに従って prettyprint (いい感じに整形) するという尖った考え方のツール
  • 新時代のツールかもしれない
  • よく分からない ¯\_(ツ)_/¯

まとめ

  • standard を使うとリント設定を大幅に減らせる
  • standard を使うとリントについて考える時間を大きく減らせる
  • ただしいくつか受け入れないといけないことも (e.g. セミコロンレスなど)
  • コミュニティは結構充実
  • 完全に standard (標準) とは言い切れない要素もある (airbnb など)

リントをしたいためにプログラムを書いている人はいない


リントを考える時間が短いは正義


ご静聴ありがとうございました 🙇

32
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?