はじめに
Reactのセットアップを紹介します。
続いて、TypeScript, Eslint, Prettierの設定もしていきます。
Reactのプロジェクト作成には、爆速で有名なViteを使ってセットアップしていきます。
- 構築環境
| tools | version |
|---|---|
| Vite | 3.2.0 |
| React | 18.2.0 |
| ESLint | 8.0.1 |
| Prettier | 2.7.1 |
目次
Viteを使ってReactプロジェクトを作成
Viteは爆速です。
- 開発時はバンドルがないので開発サーバーの起動が早い。
-
Hot Module Replacementが修正分だけを適応するので動作が早い。
プロジェクトを作成したいディレクトリで、下記コマンドを走らせます。
$ yarn create vite
プロジェクトの設定を入力・選択していきます。
-
Project name
-
Select a framework
-
Select a variant
このようになれば作成できました。
プロジェクトが作成できたら、プロジェクトのディレクトリに移動しておいてください。
node_modulesの作成や、サーバーが立ち上がることも確認しておきます。
$ cd sample-app
$ yarn
$ yarn dev
ちなみに、Viteが使うローカルサーバー(localhost)のポートはデフォルトで5173になります。
Eslint 初期設定
Eslintの初期設定を行なっていきます。
$ npx eslint --init
設定について質問されるので、選択していきます。
-
How would you like to use ESLint?
-
What type of modules does your project use?
-
Which framework does your project use?
-
Does your project use TypeScript?
-
Where does your code run?
-
How would you like to define a style for your project?
-
Which style guide do you want to follow?
今回は、Standardを選択しています。1番厳しいstyle guideとして、airbnbを選択することもあります。 -
What format do you want your config file to be in?
今回はJavaScriptを選択していますが、お好きなものを選択してください。
-
Would you like to install them now?
-
Which package manager do you want to use?
設定が完了できたら、.eslintrc.cjsが作成されていることを確認してください。
sample-app
├── node_modules
├── public
├── src
~
+ └── .eslintrc.cjs
.eslintrc.cjsを編集していきます。
Reactのバージョンを指定することで、Eslintがそのルールに合わせてくれます。
今回はReactのバージョンを18.2.0に設定しています。
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {
},
+ settings: {
+ react: {
+ version: '18.2.0',
+ },
+ },
};
次に、.eslintignoreファイルを作成します。
$ touch .eslintignore
sample-app
├── node_modules
├── public
├── src
~
├── .eslintrc.cjs
+ └── .eslintignore
作成後、.eslintignoreを編集していきます。
編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。
node_modules
yarn.lock
public
Prettier 設定
Prettierを導入していきます。
下記コマンドを入力して開発環境にPrettierを入れてください。
$ yarn add --dev prettier
導入が完了したら、.prettierrcファイルを作成します。
$ touch .prettierrc
sample-app
├── node_modules
├── public
├── src
~
├── .eslintrc.cjs
├── .eslintignore
+ └── .prettierrc
作成後、.prettierrcを編集していきます。
編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。
{
"endOfLine": "lf",
"printWidth": 80,
"tabWidth": 2,
"trailingComma": "es5",
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true
}
続いて、.prettierignoreファイルを作成します。
$ touch .prettierignore
sample-app
├── node_modules
├── public
├── src
~
├── .eslintrc.cjs
├── .eslintignore
├── .prettierrc
+ └── .prettierignore
作成後、.prettierignoreを編集していきます。
.prettierignoreの中身については.eslintignoreと同じにしておきます。
こちらもご自身のプロジェクトに合わせて編集してください。
node_modules
yarn.lock
public
eslint-config-prettier 設定
下記コマンドを入力して、eslint-config-prettierを導入していきます。
Eslintにもコードフォーマット機能がすでにあるのですが、Prettierにコードフォーマットを任せるので、競合を防ぐために、eslint-config-prettierが必要になります。
$ yarn add --dev eslint-config-prettier
導入が完了したら、.eslintrc.cjsを編集していきます。
extendsにprettierを追加しました。
prettierの追加は、extends内の最後に追加しないと設定が上書きされないことに注意してください。
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
+ 'prettier'
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {
},
settings: {
react: {
version: '18.2.0',
},
},
};
以上で、TypeScript, Eslint, Prettierの設定が完了しました。
package.jsonファイルの中身を確認しておきましょう。
{
"name": "sample-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@vitejs/plugin-react": "^2.2.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.31.10",
"prettier": "^2.7.1",
"typescript": "*",
"vite": "^3.2.0"
}
}
一度、Eslintを走らせてみましょう。
Eslintでチェック
下記コマンドを入力して、Eslintを走らせます。
$ ./node_modules/.bin/eslint src/App.tsx
$ ~
$ ~
$ Oops! Something went wrong! :(
$ ESLint: 8.26.0
$ Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
$ ~
エラーの内容としては、parserOptions.projectにプロパティを入れてねって言われています。
.eslintrc.cjsを編集していきます。
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: {
},
settings: {
react: {
version: '18.2.0',
},
},
};
これでtsconfig.jsonのルールに沿ってEslintが走ってくれるので、エラーは解決します。
再度、Eslintを走らせてみます。
まだコーディング規約に対してエラーが出てますので、解決していきましょう。
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',
},
settings: {
react: {
version: '18.2.0',
},
},
};
ほかにもエラーが出ている場合はご自身で解決してみてください。
また、Eslintのルールについては、ご自身のプロジェクトに合わせて、中身を編集・追加してください。
最後に
以上、Reactの環境構築に加えて、TypeScript, Eslint, Prettierの導入について紹介しました。
フロントの技術は日進月歩なので、やり方が古いや間違ってるといったことがあればコメントいただきたいです。
最後まで読んでいただきありがとうございました。