stylelint まとめ

概要

• ESLintなどの静的解析ツールでコードの静的解析は行っている
• CSSに対して静的解析を行えるstylelintなるものがあるらしいので調べたことをまとめる

参考資料：stylelintの導入とVS Codeの設定の方法

stylelintとは

• CSSのためのLint
• CSS以外でもSCSS,Sass,styled components

導入の流れ

1. パッケージのインストール

• stylelint (stylelint本体)
• stylelint-config-standard(一部の CSS スタイルガイドに含まれる一般的な文体規則を適用するための追加規則) 参考
• stylelint-order(orderルールを規定する) 参考
• stylelint-config-recess-order(stylelint-config-recess-orderはRecess（Twitter's CSS Hinter）や Bootstrap で使用された/使用されている CSS プロパティソート（並び替え）手法を取り入れるルールセット) 参考

yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order
typesync #typescriptテンプレートを使用している場合
yarn

2. stylelintのためのルールを適用するファイルを作成して設定する

ルートディレクトリにファイルを作成

touch .stylelintrc.js

作成したファイルに設定を追加

.stylelintrc.js

 module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
],
  plugins: [
    'stylelint-order',
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    'string-quotes': 'single',
  },
};

3. npm-scriptsにエイリアスを追加する

• package.jsonに追加する(設定の中身はESLintが先に入っている前提)

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",-   "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
    "fix": "npm run -s format && npm run -s lint:fix",
    "format": "prettier --write --loglevel=warn 'src/**/*.{js,jsx,ts,tsx,gql,graphql,json}'",
-   "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-   "lint:fix": "npm run format && eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+   "lint": "npm run -s lint:style; npm run -s lint:es",
+   "lint:fix": "npm run -s lint:style:fix && npm run -s lint:es:fix",
+   "lint:es": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+   "lint:es:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
    "lint:conflict": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'",
+   "lint:style": "stylelint 'src/**/*.{css,less,sass,scss}'",
+   "lint:style:fix": "stylelint --fix 'src/**/*.{css,less,sass,scss}'",
    "postinstall": "typesync"
  },

コードエディタにVSCodeを使用している場合

• settings.jsonに設定を追加して連携する

  {
+   "css.validate": false,
+   "less.validate": false,
+   "scss.validate": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
+     "source.fixAll.stylelint": true
    },
    "editor.formatOnSave": false,
    ︙

まとめ

• CSSやその他の形式のファイルについてもチームで品質を保てるのがいいと思った
• ESLintと併用することができるのもいいと思った