Express＆React(vite)を使用したWebアプリ作成用の環境構築その３

続き

eslintの設定をする

eslintがインストールされていない環境であれば下記をコマンド上で実行する

npm install -D eslin

インストール後は下記を実施する(※設定についての質問が環境にあわせて答える)

npx eslint --init

eslintのconfigファイルに下記を追加する

{rules: {"react/react-in-jsx-scope":"off"}}

eslintを実行する

npm run lint

下記のようなエラーがでる場合は、configに設定を追加する

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

先ほど記載したrulseの後ろに追記する

{rules: {"react/react-in-jsx-scope":"off"}, settings:{ react: { version: 'detect'}}}

prettierの設定

prettierをインストールするため、下記コマンドを実行する

npm i -D prettier

VScodeのprettier拡張機能をインストールする
ルートフォルダに下記prettier.config.jsファイルを作成し、下記を記載する

/** @type {import("prettier").Config} */
const config = {
    semi: true,
    tabWidth: 2,
  };
  
  export default config;

VScode上で[ctrl]+[shift]+[p]を押下し、settingと記載し、下記設定ファイルを開く

開いた設定ファイルに下記を追記する

"editor.formatOnSave": true

上記設定は保存時にフォーマット化される設定であるため、手動でフォーマットする場合のコマンドを登録する
package.jsonにコマンドを記載する

"format": "prettier . --write"

手動でフォーマットする場合のコマンド

npm run format