VScodeでReact開発をするためにESLintをインストールする方法メモと、VScodeに入れた拡張機能
はじめに
目標
ReactでWebアプリを作成する。ついでにdockerの概念を理解する。WebアプリをAWS Amplifyを利用して公開する。
前回やったこと
docker上に作ったReactアプリを編集し、ホットリロードする。
tomiko0404.hatenablog.com
今回やること
VScodeでESLint（JavaScript のための静的検証ツール）を使えるようにする。その他、必要な拡張機能をインストールする。
なぜ一度立ち止まってeslintを適用しようかと思ったかというと、アロー関数の文法を間違えてしまい、1時間ほど悩んだためである。
今回やったこと
ESLintインストール
まずコンテナに入り、
$ sudo docker exec -u node -it front /bin/bash -l
ESLintをインストールする。
npm install eslint
基本的に参考サイトを見ながらやっていたが、-g（グローバルインストールのオプション）を入れるとうまくいかなかったので、ローカルにインストールするコマンドにした。
ESLintの利用方法で参考にしたサイト
ESLint 最初の一歩 - Qiita
package.jsonの状態
結果的にpackage.jsonはこうなった。
{
"name": "react",
"version": "1.0.0",
"description": "React example starter project",
"keywords": [
"react",
"starter"
],
"main": "src/index.js",
"dependencies": {
"eslint": "^7.32.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.0"
},
"devDependencies": {
"@babel/runtime": "7.13.8",
"typescript": "4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
コンテナイメージの再作成
理由はわからないが、すぐにうまく動かなかったので、VSCodeの再起動と、コンテナイメージの再作成を実施。
$ sudo docker-compose down $ sudo docker-compose build $ sudo docker images $ sudo docker-compose up -d
docker操作の詳細は過去にまとめている。
tomiko0404.hatenablog.com
設定完了
コードのエラーを検知するようになった。
ReactをインポートしていないことによるESLintエラーを無視する設定
エラー検知してくれるようになったが、各ファイルでReactをインポートしていないことによるエラーが出てしまうようになった。調べたところ、かつてはjsxファイルでimport React from 'react';をインポートしていないとエラーとなっていたらしい。今はReactは自動でインポートしてくれるため、この記載は不要。
そこで、ESLintにはこのエラーを無視してもらう必要がある。
.eslintrc.jsonファイルの中に、記載を追加する。
"rules": {
"react/react-in-jsx-scope": "off"
}Reactインポートエラー無視の参考サイト
React v17 create-react-app で作ったアプリで ESLint に怒られまくった - かもメモ
'ではなく"で囲わないといけないようだった。
その他、VScodeに入れた拡張機能メモ
- Prettier - Code formatter（
Prettier - Code formatter - Visual Studio Marketplace
）
`Shift+Alt+f`でコードを整形してくれる。
- Bracket Pair Colorizer 2（
Bracket Pair Colorizer 2 - Visual Studio Marketplace
）
- JavaScript (ES6) code snippets（JavaScript (ES6) code snippets - Visual Studio Marketplace）
おわりに
しばらくはWebアプリ制作に向け、Reactの勉強を続ける。
気づいたことや勉強したことは適宜まとめていくことにする。
