概要
ReactNativeでアプリ開発を行う際、
まず必要になるのはプロジェクトとその実行環境です。
ざっとやってみましたので、まとめておきます。
やること
- プロジェクトの作成
- ESLintの追加・設定
- Prettierの追加・設定
プロジェクトの作成
ReactNativeのプロジェクト作成は、npx react-native init [プロジェクト名] --template react-native-template-typescript
でできます。
- [プロジェクト名]の部分は、もちろんプロジェクト名が入ります。
--template
で、TypeScriptのテンプレートを指定します。- 実行すると…こんな画面になります。(まぁまぁ時間かかります。2分くらいカナ)
プロジェクトの中身
- こんな感じのディレクトリ構成で、初期状態は作成されています。
- srcフォルダとか初期状態で作成されていてもよいかと思いますが、自分で作成しろということでしょう。
- おそらく、初期状態では、srcに含めるもがないので、フォルダ自体も用意する必要がないのでしょう。。
プロジェクト作成した状態でエミュレータ実行してみる
- package.jsonを見れば、おおむねできることは想像できるかと思います。
- こちらはAndroidユーザなので、
npm run android
を実行してみます。- 実行すると、Metroというものが実行されて、こちらがエミュレータとプログラムを中継してくれているようです。
- console.logもここに出力されます。
- 起動されたエミュレーターはこんな感じです。
ESLintの導入
- 静的解析のため、ESLintを導入します。
npm install -D eslint
を実行します。- プロジェクトのESLintがインストールされます。
初期設定のため、
npx eslint --init
を実行します。いろいろ質問されるので、選択式で回答していきます。わたくしの設定内容は以下の通り。
How would you like to use ESLint? >To check syntax, find problems, and enforce code style 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) √ Browser How would you like to define a style for your project? ... > Use a popular style guide Which style guide do you want to follow? ... > Standard: https://github.com/standard/eslint-config-standard-with-typescript What format do you want your config file to be in? ... >JSON Would you like to install them now? >yes Which package manager do you want to use? ... > npm
- .eslintrc.jsonが作成される
ESLintのプラグインをインストールのため、
npm install -D eslint-plugin-jsx-a11y eslint-plugin-react-hooks
を実行します。- ESLintの設定を行う。
これは、.eslint.jsonに書く。
{ "env": { "browser": true, "es2022": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "standard-with-typescript", "plugin:jsx-a11y/recommended", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended", "prettier" ], "parserOptions": { "ecmaVersion": "latest", "tsconfigRootDir": ".", "project": ["./tsconfig.json"], "sourceType": "module" }, "plugins": [ "@typescript-eslint", "jsx-a11y", "react", "react-hooks" ], "rules": { "padding-line-between-statements": [ "error", { "blankLine": "always", "prev": "*", "next": "return" } ], "@typescript-eslint/consistent-type-definitions": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-module-boundary-types": ["error"], "@typescript-eslint/no-misused-promises": [ "error", { "checksVoidReturn": false } ], "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "@typescript-eslint/triple-slash-reference": [ "error", { "types": "always" } ], "import/extensions": [ "error", { "ignorePackages": true, "pattern": { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" } } ], "import/order": [ "error", { "groups": [ "builtin", "external", "internal", "parent", "sibling", "object", "index" ], "pathGroups": [ { "pattern": "{react,react-dom/**}", "group": "builtin", "position": "before" }, { "pattern": "{[A-Z]*,**/[A-Z]*}", "group": "internal", "position": "after" }, { "pattern": "./**.module.css", "group": "index", "position": "after" } ], "pathGroupsExcludedImportTypes": ["builtin"], "alphabetize": { "order": "asc" } } ], "react/display-name": "off" }, "overrides": [ { "files": ["*.tsx"], "rules": { "react/prop-types": "off" } } ], "settings": { "react": { "version": "detect" } } }
Prettierの導入
npm install -D prettier eslint-config-prettier
を実行する.prettierrc.jsを編集して、以下の感じにしておく。
module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', };
VSCodeの設定
- 設定した内容が有効になるようにVSCodeの設定を追加します。
"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 }
所感
プロジェクト作成自体は簡単ですが、
Lintなどの設定は、何かしらを参照しないとできないですね。
↑の内容が、どなたかの役に立てば幸甚です。
まぁ、、、誰も見てないやろうけどなっ!!!