Zenn
Closed8

ESLint + Prettier + React Native + TypeScript + VSCode 設定メモ

React Native
ESLint
Prettier
かるカンかるカン

はじめに

  • React NativeでESLintとPrettierを導入することになったので、環境構築用のメモを作成することにした

バージョン

  • ESLint: 7.25.0
  • Prettier: 2.2.1
  • TypeScript: 4.0.0

前提

  • Node.jsをインストール済み
  • TypeScript用のReact Nativeプロジェクトを構築済み（expo使用）
かるカンかるカン

ESLint設定

  • ESLintをインストールする
npm install -D eslint
  • 設定ファイル作成
    ESLintの設定ファイルの雛形を作成する。下記コマンドを実行すると、対話が開始する。
npx eslint --init

下記内容を選択する。今回はReact Nativeのプロジェクトなので、BrowserではなくNodeを選択する。

? How would you like to use ESLint? … 
❯ To check syntax and find problems
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
? Which framework does your project use? … 
❯ React
? Does your project use TypeScript? ›  Yes
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Node
? What format do you want your config file to be in? … 
❯ JavaScript
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › Yes

対話が終了すると、プロジェクトフォルダ直下に.eslintrc.jsが作成される。このとき、最後の質問でYesを解答した場合は、プラグインがnpmでインストールされる。yarnを使用する場合は、個別にインストールする必要がある。

.eslintrc.js
module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};
かるカンかるカン

.eslintrc.jsファイルを編集することで、ESLintのルールを設定できる。今回は下記内容で設定。

.eslintrc.js
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    project: './tsconfig.eslint.json',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
  },
  plugins: ['@typescript-eslint', 'import', 'react', 'react-hooks'],
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  rules: {
    'no-use-before-define': ['off'],
    'react/prop-types': ['off'],
    'react/style-prop-object': ['off'],
    '@typescript-eslint/no-use-before-define': ['off'],
    'padding-line-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: '*',
        next: 'return',
      },
    ],
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        vars: 'all',
        args: 'after-used',
        argsIgnorePattern: '_',
        ignoreRestSiblings: false,
        varsIgnorePattern: '_',
      },
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/jsx-props-no-spreading': [
      'error',
      {
        html: 'enforce',
        custom: 'ignore',
        explicitSpread: 'ignore',
      },
    ],
  },
};

インストールされていないプラグインをインストールする。

npm install -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
かるカンかるカン

.eslintignoreファイルを作成する。このファイルでESlintの適用範囲を指定できる。

.eslintignore
.expo/
.expo-shared/
assets/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js

tsconfig.eslint.jsonを作成する。ESLintの解析対象とするファイルを指定している。指定なしでも動作するが、パフォーマンスが落ちる可能性があるため設定する。

tsconfig.eslint.json
  "extends": "./tsconfig.json",
  "include": [
    "App.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": ["node_modules"]
  • VSCode設定
    VSCodeにESLintの拡張機能を追加する。（ESLintと検索して一番最初に表示されるもの）

VSCodeのCode<-基本設定<-設定を開く。右上のアイコンをクリックし、settings.jsonを開く。

settings.jsonを編集し、ESLintをVSCode上で適用させる。
※ワークスペースのタブを選択してから設定する。（現在使用しているワークスペースのみに適用させるため）

settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false,
  "typescript.tsdk": "./node_modules/typescript/lib",
}
かるカンかるカン

Prettier設定

  • Prettierとeslint-config-prettierをインストールする。
    eslint-config-prettierはESlintとPrettierで競合しているルールがないかを確認するために使用する。
npm install -D prettier eslint-config-prettier
  • 設定ファイル作成
    .prettierrcファイルをプロジェクトフォルダ直下に作成する。Prettierでコードをどのように整形するかを設定できる。今回は下記内容を設定。
.prettierrc
{
  "bracketSpacing": true,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}
  • ESlintとPrettierで設定した内容が競合していないことを確認する。
    下記コマンドを実行する。（プロジェクト配下にsrcディレクトリを設置している場合のもの）
npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'

srcディレクトリの設定方法は下記の記事が大変参考になりました。
https://zenn.dev/takanori_is/articles/organize-expo-project-structure
競合がない場合、下記が表示される。競合がある場合は、表示されたメッセージに合わせて設定ファイルを修正する。

No rules that are unnecessary or conflict with Prettier were found.
かるカンかるカン
  • VSCode設定
    settings.jsonにPrettierの設定を追加する。
settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false,
  "typescript.tsdk": "./node_modules/typescript/lib",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
}
かるカンかるカン

TypeScript設定

  • tsconfig.jsonを編集する。
    独自の型定義ファイルの格納場所と絶対パスでパス指定できるように設定。
tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "typeRoots": ["types", "node_modules/@types"],
    "baseUrl": "./"
  }
}
このスクラップは2023/02/19にクローズされました