stylelint,prettierを使ってscssのコード品質を保つ

scssのみでjsについての変更・設定はなし

# stylelint, prettierのインストール

```shell
$ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier
```

## 参考
- [stylelint  -  npm](https://www.npmjs.com/package/stylelint)
- [stylelint-config-standard  -  npm](https://www.npmjs.com/package/stylelint-config-standard)
- [stylelint-scss  -  npm](https://www.npmjs.com/package/stylelint-scss)
- [prettier  -  npm](https://www.npmjs.com/package/prettier)
- [prettier-stylelint  -  npm](https://www.npmjs.com/package/prettier-stylelint)
- [stylelint-config-prettier  -  npm](https://www.npmjs.com/package/stylelint-config-prettier)

# prettierの設定・stylelintの設定

## .prettier

```json
{
  "printWidth":120,
  "tabWidth":2,
  "useTabs":false,
  "singleQuote":true,
  "proseWrap":"preserve"
}
```

### 参考
- [Options · Prettier](https://prettier.io/docs/en/options.html)

## .stylelintrc.json

```json
{
	"plugins":[
		"stylelint-scss",
	],
	"rules":{
		"indentation":2,
		"declaration-block-no-shorthand-property-overrides":true,
		"declaration-colon-newline-after":null,
		"at-rule-no-unknown":[true,{
			"ignoreAtRules":["function","if","for","each","include","mixin","content"]
		}],
	},
	"extends":[
		"stylelint-config-standard",
		"stylelint-config-prettier"
	]
}
```

### 参考

- [stylelintの設定ファイルの作り方 - Qiita](https://qiita.com/morishitter/items/fefa1de3137036c7d9c6)

## package.json(npm script)

`app/frontend/stylesheets/` よりも下にscssファイルを入れている場合。

```json
{
	"scripts":{
		"lint:stylesheet":"stylelint --fix app/frontend/stylesheets/**/*.scss",
		"format:stylesheet":"prettier-stylelint --quiet --write app/frontend/stylesheets/**/*.scss"
	},
}
```

## ルールについての一部
- [stylelintのルール簡単説明（v5.4.0） · GitHub](https://gist.github.com/konitter/d86c16b13da4debf33555f8299270d3d)
- [selector-list-comma-newline-after · stylelint](https://stylelint.io/user-guide/rules/selector-list-comma-newline-after)
- [no-descending-specificity · stylelint](https://stylelint.io/user-guide/rules/no-descending-specificity)
- [at-rule-no-unknown · stylelint](https://stylelint.io/user-guide/rules/at-rule-no-unknown)

# 要素の並び替えを行う

## [stylelint-order  -  npm](https://www.npmjs.com/package/stylelint-order) をインストールする

```shell
$ yarn add stylelint-order
```

### 参考
- [stylelint-order  -  npm](https://www.npmjs.com/package/stylelint-order)

## .stylelintrc.json に設定を記載する

記載後の状態

```json
{
	"plugins":[
		"stylelint-scss",
		"stylelint-order"
	],
	"rules":{
		"indentation":2,
		"declaration-block-no-shorthand-property-overrides":true,
		"declaration-colon-newline-after":null,
		"at-rule-no-unknown":[true,{
			"ignoreAtRules":["function","if","for","each","include","mixin","content"]
		}],
		"order/order":[
			"less-mixins",
			"dollar-variables",
			"custom-properties",
			"declarations",
			"rules"
		]
	},
	"extends":[
		"stylelint-config-standard",
		"stylelint-config-prettier"
	]
}
```

### 参考

- [stylelint-order  -  npm](https://www.npmjs.com/package/stylelint-order)
- [stylelint-order/README.md at master · hudochenkov/stylelint-order · GitHub](https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md)

# commit時に自動的に反映されるようにする

## パッケージをインストール
 [husky  -  npm](https://www.npmjs.com/package/husky) と [lint-staged  -  npm](https://www.npmjs.com/package/lint-staged) のインストールを行う

```shell
$ yarn add husky lint-staged
```

## 参考

- [lint-staged  -  npm](https://www.npmjs.com/package/lint-staged)
- [husky  -  npm](https://www.npmjs.com/package/husky)

## package.jsonに記載

```json
{
	"scripts":{
		"precommit":"lint-staged",
	},
	"lint-staged":{
		"*.scss":[
			"yarn format:stylesheet && yarn lint:stylesheet",
			"git add"
		]
	},
}
```

### 参考

- [コミット前に Lint を強制するなら lint-staged が便利 - Qiita](https://qiita.com/ybiquitous/items/553479cfcb2cee124ae0)
- [husky + lint-staged で品質を保つ - ナデズダ・ゴボリン🖥](https://hysryt.com/archives/1295)