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

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

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

https://qiita.com/tkiryu/items/016aa9ef8a25b631e7e6
https://satoyan419.com/prettier/

prettierの準備

詳しい使い方はここでは省略。。。

インストールします。

$ yarn add -D prettier

configファイルを作成します。.prettierrc でも.prettierrc.jsなどいろんな形式でかけます。

Configuration File

.prettierrc.js

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

stylelintを準備

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

• stylelint-config-standardを基本として、自分のルールも適用
• stylelint-orderを使ってプロパティーをアルファベット順にしたい。

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

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

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

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

.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を使います。prettier-eslintにインスパイアされたみたいです。

$ yarn add -D prettier-stylelint

stylelintのconfigファイルを合わせていきます。

.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では

"extends": [
  "stylelint-config-idiomatic-order",
  "./node_modules/prettier-stylelint/config.js"
],

となっていたので、
「おっけ～。かんたんかんたん」

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をインストールして、settingのprettier.stylelintIntegrationをtrueとしてください。
※ 設定が完了したら VScode を再起動してみる必要があるようです。

Atom

prettier-atomをインストールします。
プラグインの設定画面で Stylelint Integrationにチェックしてください。

ちなみに

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