prettierとstylelintを使って、エディタのプラグインで自動フォーマットしてみた。

![atom.gif](https://qiita-image-store.s3.amazonaws.com/0/168353/d74a9bca-7362-e4ab-2cb6-11bb378f1934.gif)


javascriptだけでなく、sass/cssやmarkdownまでもフォーマットしてくれるprettier。

eslintと使ってみて、
「これいいね！:heart_eyes:」
と感動。
stylelintとも連携できると聞いて、 VScode と Atom で保存時に自動フォーマットするときに自動でフォーマットをしてみた。(2018/07/31)
参考にさせて頂いたページ。ありがとうございました。
> https://qiita.com/tkiryu/items/016aa9ef8a25b631e7e6
> https://satoyan419.com/prettier/

# prettierの準備
詳しい使い方はここでは省略。。。

インストールします。

```sh
$ yarn add -D prettier
```

configファイルを作成します。`.prettierrc `でも`.prettierrc.js`などいろんな形式でかけます。
> [Configuration File](https://prettier.io/docs/en/configuration.html)

```js:.prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
};
```

# stylelintを準備

stylelintでは以下のことをしたいと考えました。

- stylelint-config-standardを基本として、自分のルールも適用
- [stylelint-order](https://github.com/hudochenkov/stylelint-order)を使ってプロパティーをアルファベット順にしたい。

プロパティーの順番はいろいろと好みのものがあると思うので、探すもよし作るもよしです。
自分のチームではアルファベット順なので、予め用意されているものを使いました。

stylelintとstylelint-config-standard、stylelint-orderをそれぞれインストールします。

```sh
$ yarn add -D stylelint stylelint-config-standard stylelint-order
```

configファイルを作成します。これも`.stylelintrc`でも`.stylelintrc.js`でもいろんなフォーマットでかけます。
ちなみに、configファイルを画面でポチポチ選ぶと作れるサービスがありました！
https://maximgatilin.github.io/stylelint-config/

```javascript:.stylelintrc.js
module.exports = {
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: ['stylelint-config-standard'],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    // scssを使うには↓の2つがないと@mixinとかでエラーになってしまう。
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    // ...
    'order/properties-alphabetical-order': true,
  },
};
```

scssの`@mixin`とかを使う場合、上書きが必要みたいです。(たぶん)
stylelintにもフォーマット機能があって、それに従ってprettierが更にフォーマットしてくれる流れです。

# prettier-stylelint

[prettier-stylelint](https://github.com/hugomrdias/prettier-stylelint)を使います。[prettier-eslint](https://github.com/prettier/prettier-eslint)にインスパイアされたみたいです。

```sh
$ yarn add -D prettier-stylelint
```
stylelintのconfigファイルを合わせていきます。

```javascript:.stylelintrc.js
module.exports = {
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: [
    './node_modules/prettier-stylelint/config.js',
    'stylelint-config-standard'
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    // ...
  },
};
```

ここでハマりました。[prettier-stylelintのreadme](https://github.com/hugomrdias/prettier-stylelint)では

```
"extends": [
  "stylelint-config-idiomatic-order",
  "./node_modules/prettier-stylelint/config.js"
],
```
となっていたので、
「おっけ～。かんたんかんたん:relaxed:」

```
extends: [
  'stylelint-config-standard'
  './node_modules/prettier-stylelint/config.js'
],
```
と設定しました。すると、standardの項目でエラーにならない現象に陥りました。そこで、extendsに読み込まれてるconfigを見てみると、prettierとかぶると思われるルールがnullになっています。
> https://github.com/hugomrdias/prettier-stylelint/blob/master/config.js

この順番では、stylelint-config-standardで設定した項目を config.js で打ち消してしまってました。
readmeのようなextendを使う場合は大丈夫だと思いますが、extendsの順番は気をつけてください。


# エディターのプラグインをインストール

### VS Code
[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)をインストールして、settingの`prettier.stylelintIntegration`を`true`としてください。
※ 設定が完了したら VScode を再起動してみる必要があるようです。

### Atom
[prettier-atom](https://github.com/prettier/prettier-atom)をインストールします。
プラグインの設定画面で `Stylelint Integration`にチェックしてください。


# ちなみに

正直、scssをフォーマットしないとだめだなと思ったきっかけは、scssに興味のないバックエンドエンジニアの人が書いたコードがとんでもなかったからです。
フロントエンドの人として「むむむ。。。」と思いながらも、バックエンドの人にそれを指摘するのも気がひける。
また、今回一応エディタのプラグインでできるようにしたのですが
「scssを触るときは Atom や VSCode でしかもプラグインを入れてください。」
とも言いにくいので、pre-commitのときにフォーマットするという処理をしたいと思っています。