Prettierの文字数制限の確認

Prettierの`--print-width`は上限値だと思ってたのだけど、改行を嫌って極端に大きい数値を設定すると、逆に改行したいときにも纏められる（改行が消える）という学び。


```shell
$ npx prettier for_test/test.js --write --print-width=800
```
```diff
-import {
-  CollectionDashboard,
-  DashboardPlaceholder
-} from "../components/collections/collection-dashboard/main";
+import { CollectionDashboard, DashboardPlaceholder } from '../components/collections/collection-dashboard/main';q
```

ちなみに俺は`120`以上に設定したことがなかったので、気付かなかった。基本的にはdefaultの`80`であまり困らない勢。

正直、Prettierに対しては雑に書いたコードが勝手に整形される以上の感想を持ったことがないので、「どうしてもone-linerにしたい」勢のストレスを理解してなかった。是非もないよネ！（レビューしたくないなとは思ったが）

## Prettierに仕事をさせない

> In prettier, print width is not a rule, it’s actually an input into the algorithm used to print code. Due to this it is impossible to turn off. You can set it to a very high number (not recommended) or use // prettier-ignore comments to disable prettier on a chunk of code.
https://github.com/prettier/prettier/issues/3468

`printWidth` はPrettierにとって必要な値で、ルールではない。
無効にすることは不可能なので、極端に高い値を指定するか（望まない整形になりやすくなるが）、 `// pretteir-ignore` を使うべし。[gitignore syntax](https://git-scm.com/docs/gitignore#_pattern_format)で`.prettierignore`を置くこともできる。

[Ignoreing Code](https://prettier.io/docs/en/ignore.html)


```diff
// prettier-ignore
@@ -17,42 +17,51 @@ import {
 } from "../components/collections/collection-dashboard/main";
 
 // several lines
-import {
-  CollectionDashboard,
-  DashboardPlaceholder
-} from "../components/collections/collection-dashboard/main";
+import { CollectionDashboard, DashboardPlaceholder } from '../components/collections/collection-dashboard/main';
```

`// prettier-ignore`付けると、いい感じに該当箇所だけ無視してくれる（JSの場合、next-lineとかか範囲指定とかしなくても巧くいく風）。

大抵の人は1行が長くなりすぎないように努力するので、**大半のコードは80文字以下**になる。エッジケースの対応でいちいち設定を変えてるとルールが意味を為さなくなるので、コメントで対応したほうが良いでしょう。極端に長い数値を設定された結果、普通のコードもone-linerになるようになって「Prettierはクソ」て苦情が来たりします。

## 小技

[What Prettier is not concerned about](https://prettier.io/docs/en/rationale.html#what-prettier-is-not-concerned-about)にもあるけど、`+`と引用符で繋げていく系の文字列は整形対象になると細かく切られてしまうので、template literalに換えると良い。

```diff
// long html strings
-var quote_and_plus   = '<div id="' + widgetContentID + '" style="' + widgetContentStyles + '">' + '</div>';
+var quote_and_plus =
+     '<div id="' +
+     widgetContentID +
+     '" style="' +
+     widgetContentStyles +
+     '">' +
+     '</div>';
 var template_literal = `<div id="${widgetContentID}" style="${widgetContentStyles}"></div>`;
```

## エディタにエラーを出さない

![スクリーンショット 2019-07-19 19.39.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100988/6929bc0e-2267-a458-3c3d-3341b5b5fee8.png)

変換されること自体はいいけど、書いてるときにエラー出されると気が散る、て意見もあり。
![スクリーンショット 2019-07-19 17.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100988/71f4c78a-2eb2-0043-4f81-b660be20e3f2.png)

Prettier自体はエラー出さないので、[eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)とか咬ましてる場合の、ESLintの警告ですね。なんで`rules`指定すれば制御できます。

```diff
     "es6": true
   },
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "warn"
   }
 }
```

![スクリーンショット 2019-07-19 17.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100988/5b592f25-2679-5b30-12cd-ffc414f466b9.png)

この記事は Corne Cherry で書きました。