Expo + TypeScript で Eslint と Prettier を設定するまで

はじめに

Linterの設定はいつも大苦戦、、、いつかの私に捧ぐLinterの設定メモ

Expo

ExpoのCLIをインストール

 npm install -g expo-cli

インストール完了

expo --version
3.17.24

Expoのプロジェクト作成

後入れしたかったのでここではあえてTypeScriptは選択しない

$ expo init expo-app
? Choose a template:
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

Expoプロジェクト立ち上げ

プロジェクト作成が終わったら、早速立ち上げてみる

cd expo-app
npm run start

localhostでExpoの画面が立ち上がるので、Run on iOS simulator ボタンをクリック
（※ここではシミュレーターの設定は省略） f:id:micronn:20200425150228p:plain

TypeScript

インストール

npm install --save-dev typescript

configファイルを追加

プロジェクト配下にconfig.jsonファイルができる

tsc --init

tsconfig.jsonをゆるっと設定

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": false
  }
}

型定義等追加

npm install --save-dev @types/react @types/react-native @types/expo

Appの拡張子もなおしておく

mv App.js App.tsx

TypeScriptを導入したをExpoプロジェクト立ち上げる

npm run start

エラーも出ず、先ほどと同じ画面が立ち上がればOK

EsLint

さてここからが本番

Eslintを導入

npm install --save-dev eslint

設定ファイルを作成

Eslintの設定ファイルをつくる

./node_modules/.bin/eslint --init

流れにそって設定

? 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

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

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

? Does your project use TypeScript? (y/N) N

? Where does your code run?
❯◉ Browser
 ◉ Node

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

? Would you like to install them now with npm? (Y/n) Y

最後まですすむとプロジェクト配下にeslintrc.jsファイルが爆誕

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

スクリプトの設定

package.jsonに追加

  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint ./ --ext .jsx,js,tsx"     // 追加
  },

これでnpm run lintでlinterのチェックをしてくれるはず

ライブラリを導入していく

npm install --save-dev eslint-config-airbnb

今回はairbnbというEslintのルールを使用

www.npmjs.com

npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

TypeScript系

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

Prettier系

npm install --save-de prettier eslint-config-prettier eslint-plugin-prettier

configファイルに追加

eslintrc.jsに設定を書き加えて完成ルールはお好みでどうぞ！

module.exports = {
  env: {
    "browser": true,
    "es6": true,
    "node": true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "airbnb",
  ],
  globals: {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  parserOptions: {
    "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 2018,
  "sourceType": "module"
  },
  plugins: [
    "react",
    "@typescript-eslint",
    "jsx-a11y",
    "import",
    "eslint-plugin-prettier",
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'es5',
      },
    ],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", "ts"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
  },
  settings: {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".json",
          ".ts",
          ".tsx"
        ]
      }
    }
  }
};

みくろん備忘録

あうとぷっとのおまじない