React Native + Expo で TypeScript のプロジェクトを開始する

GitHub にリポジトリを作った状態から、開発開始までの手順を紹介します。

Expo のプロジェクトを作成する

npx create-expo-app -t expo-template-blank-typescript
  • ✔ What is your app named? … .

ESLint を設定する

npm install eslint --save-dev
npm init @eslint/config
  • ✔ 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? · No / Yes
  • ✔ Where does your code run? · browser
  • ✔ How would you like to define a style for your project? · guide
  • ✔ Which style guide do you want to follow? · standard-with-typescript
  • ✔ What format do you want your config file to be in? · JavaScript
  • ✔ Would you like to install them now? · No / Yes
  • ✔ Which package manager do you want to use? · npm

.eslintrc.js は以下のとおりです。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  plugins: ['react'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-misused-promises': 'off',
    '@typescript-eslint/no-floating-promises': 'off',
  ignorePatterns: ['**/*.js'],

Prettier の設定

npm install --save-dev prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports eslint-config-prettier

.prettierrc.json を作成します。

touch .prettierrc.json

.prettierrc.json には以下のように書きます。

  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true


npx expo start --tunnel

--tunnel は実機で確認するために必要なオプションです。

i を押せば実機でも確認できます。