ReactNativeの開発環境メモ１ - ESLint編

ReactNative の開発環境を作る - ESLint 編

想定としては下記あればいいかなと思っています。

Expo
TypeScript
ESLint
Prettier
StoryBook
husky
lint-staged

Expo & TypeScript

TypeScript 対応はexpo-cliで init する時に TypeScript を指定すればお k なので skip

ESLint

  $ npx eslint --init

eslint の設定を開始

  ? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

syntax とコード修正してくれるやつが便利なので一番下を選択

  ? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

import/export をつかうので一番上を選択

  ? Which framework does your project use? …
❯ React
  Vue.js
  None of these

ReactNative なので一番上を選択

  ? Does your project use TypeScript? › No / Yes

TypeScript 使うので Yes

  ? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Browser
✔ Node

ブラウザでは実行しないので Node を選択

  ? How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style
  Inspect your JavaScript file(s)

ここは自分好みに調整できるAnswer questions about your styleを選択。

  ? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

いままでは.eslintrcを使っていたのですが、拡張なしの設定ファイルは非推奨になっていたのでちょい悩み。
軽くみてたらJavaScriptが多数だったのでいったんJavaScriptで進める

  ? What style of indentation do you use? …
  Tabs
❯ Spaces

typescript の規約でスペースとなっているのでSpaces
TS スタイルガイド：

スタイルガイド（コーディング規約） | TypeScript Deep Dive 日本語版

typescript-jp.gitbook.io

スタイルガイド（コーディング規約） | TypeScript Deep Dive 日本語版

  ? What quotes do you use for strings? …
  Double
❯ Single

こちらも規約でSingleなのでSingle
TS スタイルガイド：

スタイルガイド（コーディング規約） | TypeScript Deep Dive 日本語版

typescript-jp.gitbook.io

  ? What line endings do you use? …
❯ Unix
  Windows

Mac を使用しているのでUnixを選択。

  ? Do you require semicolons? › No / Yes

規約でセミコロン使えとあるので、まよわず Yes
TS スタイルガイド：

スタイルガイド（コーディング規約） | TypeScript Deep Dive 日本語版

typescript-jp.gitbook.io

  ✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? ·    / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? ·    / Yes

最終的にはこんな感じ。

  Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

console に上記のワーニングが出ているので次のステップで直します。

.eslintrc.js を修正

インデントが勝手に 4 に指定されているので 2 に直す

  module.exports = {
  env: {
    es2020: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    indent: ["error", -4 + 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    semi: ["error", "always"],
  },
};

hooks の eslint 設定

こいつをいれてみる！

フックのルール – React

ja.reactjs.org

eslint-plugin-react-hooks を追加

Expo が標準で yarn を使っているので yarn で。

  $ yarn add -D eslint-plugin-react-hooks

.eslintrc.js をまた修正

  module.exports = {
  'env': {
    'es2020': true,
    'node': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  'parser': '@typescript-eslint/parser',
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    },
    'ecmaVersion': 11,
    'sourceType': 'module'
  },
  'plugins': [
    'react',
    '@typescript-eslint',
+    'react-hooks'
  ],
  'rules': {
    'indent': [
      'error',
      2
    ],
    'linebreak-style': [
      'error',
      'unix'
    ],
    'quotes': [
      'error',
      'single'
    ],
    'semi': [
      'error',
      'always'
    ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn'
  }
};

おわり

これで eslnt の設定はいったん終了。
次に Pretter の設定をします

Code Lab 🤔

ReactNativeの開発環境メモ１ - ESLint編

ReactNative の開発環境を作る - ESLint 編

Expo & TypeScript

ESLint

.eslintrc.js を修正

hooks の eslint 設定

eslint-plugin-react-hooks を追加

.eslintrc.js をまた修正

おわり

目次