第4回 Laravel10 環境構築メモ（Eslint+ Prettier①）

はじめに

第3回まででLaravelの起動、データベースへの接続、Xdebugの導入は完了。今回はFrontendをReact + Typescriptで開発してみようという所で、ESlintとPrettierを導入してみます。と、思ったんですが長くなるので、2回に分けてメモ。今回はESlintの導入。

ESlintの導入

ESslintのinstall

npm install eslint --save-dev

ESlintの初期化

この後、色々と聞かれので、選択していきます。

Ok to proceed?
→ y

npm init @eslint/config

Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y) y

How would you like to use ESLint?
→ To check syntax, find problems, and enforce code style

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

What type of modules does your project use?
→ JavaScript modules (import/export)

? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Which framework does your project use?
→ React

? Which framework does your project use? … 
▸ React
  Vue.js
  None of these

Does your project use TypeScript?
→ Yes

? Does your project use TypeScript? ‣ No / Yes

Where does your code run?
→ Browser

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
▸ Browser
  Node

How would you like to define a style for your project?
→ Use a popular style guide

? How would you like to define a style for your project? … 
▸ Use a popular style guide
  Answer questions about your style

Which style guide do you want to follow?
→ Standard

? Which style guide do you want to follow? … 
▸ Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript

What format do you want your config file to be in?
→ YAML

? What format do you want your config file to be in? … 
  JavaScript
▸ YAML
  JSON

Would you like to install them now?
→ Yes

Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? ‣ No / Yes

Which package manager do you want to use?
→ npm

? Which package manager do you want to use? … 
▸ npm
  yarn
  pnpm

ここまで進めると後は諸々、下記の通り、installが進みます。

Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*

added 13 packages, changed 5 packages, and audited 452 packages in 4s

156 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.yml file in /var/www/sample

Style Guideの導入

style guideで選択した、standardをinstall。

npm install eslint-config-standard --save-dev

Pluginの導入

ParserとReactHooksを追加。

npm install eslint-plugin-react-hooks --save-dev
npm install @typescript-eslint/parser --save-dev

.eslintrc.ymlの修正

そのままだと動かないので、下記の感じでファイルを修正してください。

env:
  browser: true
  es2021: true
settings: { react: { version: 'detect' } }
extends:
  - standard-with-typescript
  - plugin:react/recommended
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - react
  - react-hooks
rules:
  {
    react-hooks/rules-of-hooks: error,
    react-hooks/exhaustive-deps: warn,
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off'
  }

package.jsonの修正

scriptsに"lint"と"lint-fix"を追加します。

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint --ext .tsx,.ts resources/",
    "lint-fix": "npm run lint -- --fix",
  },

コマンドの実行

npm run lint

上記のコマンドを実行すると、下記の様なメッセージが出力されます。例では、warningが1件出てるだけですが、最初、コマンド実行すると、沢山、エラーが出ますが、そういうものです。うまく動いてる証拠です。

> lint
> eslint --ext .tsx,.ts resources/

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.3.0

YOUR TYPESCRIPT VERSION: 5.3.2

Please only submit bug reports when using the officially supported version.

=============

/var/www/sample/resources/js/Pages/Auth/Login.tsx
  27:6  warning  React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)