React + Rails API 環境構築 ②React側の設定 〜Prettier,stylelintの設定

# 概要

- 1からSPAアプリケーションの環境構築をするので、その手順を残す
- [りあクト!](https://oukayuka.booth.pm/)を読んでから環境構築してみたもの

# Prettier[^1]の設定

## 1. Prettierのインストール

- prettier
- eslint-config-prettier

```
yarn add -D prettier eslint-config-prettier
yarn
```

## 2. .eslintrc.jsを書き換える

- eslint-config-prettier系の共有設定を他の競合設定から上書かれないように最後に書くこと

※ 2021/6/23現在以下はeslint-config-prettierにmergeされているため追加不要

- prettier/@ typescript-eslint
- prettier/react

```
    extends: [
      'eslint:recommended',
      'airbnb',
      'airbnb/hooks',
      'plugin:import/errors',
      'plugin:import/warnings',
      'plugin:import/typescript',
      'plugin:@typescript-eslint/eslint-recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:@typescript-eslint/recommended-requiring-type-checking',
+     'prettier',
+     'prettier/@typescript-eslint',
+     'prettier/react',
    ],
```

## 3. プロジェクトルートに.prettierrcファイルを作成し、設定を追加する

- プロジェクトルートに.prettierrcを作成

```
touch .prettierrc
```

- 設定を追加

```.prettierrc
singleQuote: true
trailingComma: “all”
```

## 4. Prettierがnpm-scriptsで実行されるようにpackage.jsonに設定する

```json:package.json
   "scripts": {
    ︙
    "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": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+   "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
    "preinstall": "typesync"
  },
```

## 5. VS Code用のPrettier公式の拡張をインストールする

- vscodeの拡張機能検索画面で「prettier code formatter」と入力し出てきた拡張をインストールする

## 6. Settings.jsonに設定を追加する

- 設定した各言語の保存時に自動整形が走るようにしている

```json:settings.json
“editor.defaultFormatter": "esbenp.prettier-vscode",
  "[graphql]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
```

### ここまでの設定で対象言語のファイルを編集して`command + S` したら自動フォーマットされるようになっている

# stylelint[^2]の設定

## 1. パッケージをインストールする

- stylelint [wip]
- stlylelint-config-standard [wip]
- stylelint-order [wip]
- stylelint-config-recess-order [wip]

```
yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order
yarn
```

## 2. stylelint用の設定ファイルを作成する

- プロジェクトルートに.stylelintrc.jsを作成する

```
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. vscodeと連携させる

### 拡張機能をインストールする
- 拡張機能検索画面で「stylelint」と入力して一番上に出てくるプラグインをインストール

### settings.jsonに設定を追加する

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

## 4. npm scriptsにコマンドを登録する

```json:package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "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"
  },
```

# Gitリポジトリへコミットするときにlintチェックが走るように設定する

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

- Husky[^3]
- lintstaged[^3]

```
yarn add -D husky lint-staged
```

## 2. package.jsonに設定を追加する

```
     "devDependencies": {
      ︙
      "stylelint": "^13.8.0",
      "stylelint-config-recess-order": "^2.3.0",
      "stylelint-config-standard": "^20.0.0",
      "stylelint-order": "^4.1.0"
    },
+   "husky": {
+     "hooks": {
+       "pre-commit": "lint-staged"
+     }
+   },
+   "lint-staged": {
+     "src/**/*.{js,jsx,ts,tsx}": [
+       "prettier --write --loglevel=warn",
+       "eslint --fix"
+     ],
+     "src/**/*.css": [
+       "stylelint --fix"
+     ],
+     "src/**/*.{gql,graphql,json}": [
+       "prettier --write --loglevel=warn"
+     ]
+   }
  }
```

- 上記の設定で`git commit`で

1. 構文チェックが走る
2. コードの整形が走る
3. 残ったエラーがなければそのままコミットできる

#リンク

[^1]: [Prettierまとめ](https://qiita.com/Islanders-Treasure0969/items/eaa54286d960c783d9c0)
[^2]: [stylelintまとめ](https://qiita.com/Islanders-Treasure0969/items/fd702c06b9cae256406d)
[^3]: [Husky&lint-stagedまとめ](https://qiita.com/Islanders-Treasure0969/items/ba376ee22263a70151a9)