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

概要

• 1からSPAアプリケーションの環境構築をするので、その手順を残す
• りあクト!を読んでから環境構築してみたもの

Prettier¹の設定

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

• 設定を追加

singleQuote: true
trailingComma: “all”

4. Prettierがnpm-scriptsで実行されるようにpackage.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に設定を追加する

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

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²の設定

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

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

.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にコマンドを登録する

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³
• lintstaged³

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まとめ ↩

2. stylelintまとめ ↩

3. Husky&lint-stagedまとめ ↩