stylelint まとめ

# 概要

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

## 参考資料：[stylelintの導入とVS Codeの設定の方法](https://qiita.com/y-w/items/bd7f11013fe34b69f0df)

# stylelintとは

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

# 導入の流れ

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

- stylelint (stylelint本体)
- stylelint-config-standard(一部の CSS スタイルガイドに含まれる一般的な文体規則を適用するための追加規則) [参考](https://www.npmjs.com/package/stylelint-config-standard)
- stylelint-order(orderルールを規定する) [参考](https://www.npmjs.com/package/stylelint-order)
- stylelint-config-recess-order(stylelint-config-recess-orderはRecess（Twitter's CSS Hinter）や Bootstrap で使用された/使用されている CSS プロパティソート（並び替え）手法を取り入れるルールセット) [参考](https://inokawablog.org/vue-js/nuxt-js-stylelint/#:~:text=stylelint-config-recess-order%20%E3%81%AFRecess%EF%BC%88Twitter%27s%20CSS%20Hinter%EF%BC%89%E3%82%84,Bootstrap%20%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%9F%2F%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%20CSS%20%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%BD%E3%83%BC%E3%83%88%EF%BC%88%E4%B8%A6%E3%81%B3%E6%9B%BF%E3%81%88%EF%BC%89%E6%89%8B%E6%B3%95%E3%82%92%E5%8F%96%E3%82%8A%E5%85%A5%E3%82%8C%E3%82%8B%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BB%E3%83%83%E3%83%88%E3%81%A7%E3%81%99%E3%80%82)

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

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

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

```
touch .stylelintrc.js
```

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

```javascript:.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が先に入っている前提)

```json: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と併用することができるのもいいと思った