JS Standard Style

# 自己紹介

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

---

# 今日はリントの話です

---

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

---

# JSLint / JSHint / ESLint

などがありますが

---

# 今日紹介するツール

---

# <img width="412" alt="スクリーンショット 2017-03-24 14.50.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/13825/302a8baf-e229-9455-0a93-df67df4ac885.png">

---

# Standard

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

---

# 特徴1 (リントルール)

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

---

# 特徴2 (コマンド)

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

<img width="191" alt="ignore.png" src="https://qiita-image-store.s3.amazonaws.com/0/13825/a74152a0-592e-e38f-e9fb-226b6947b965.png">

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

---

# Why Standard?

---

# 何が嬉しいか

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

---

![kuma.png](https://qiita-image-store.s3.amazonaws.com/0/13825/04d03cd7-4277-5b07-35e2-027c99beca10.png)

---

# コミュニティ規模

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

---

# Standard のユーザー

<img width="794" alt="users.png" src="https://qiita-image-store.s3.amazonaws.com/0/13825/98720ce4-dc07-0d92-b6bc-29d149bd8c39.png">

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

---

# しかし

---

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

---

# standard を入れる際の<br />ツラみ 😓

---

# ツラみ 1 😓

セミコロンが無い ;;

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

---
# **semi**standard

セミコロン**あり**の 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 対抗なツール<br />について

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

---

# 対抗1 [XO](https://github.com/sindresorhus/xo)

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

---

# 対抗2 [airbnb](https://github.com/airbnb/javascript)

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

---

# 勢力3 [prettier](https://github.com/prettier/prettier)

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

---
# まとめ

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

---

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

---

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

---

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