第5回 Laravel10 環境構築メモ（Eslint+ Prettier②）

はじめに

第4回に続いて、Prettierを導入してみます。ちなみに、Prettierはフォーマッタですね。なぜ、Prettierを使った方が良いかは興味がある人は調べてみると良いかと思います。ちなみに、最近、私、ニトリの肩・首・背中も支える枕という枕を買ってみたんですが、めちゃくちゃ自分の体には合っており、これまで寝起きで首痛い日が良くあったんですが、それがなくなりまた。背中でも体を支える感じでGoodですね。

Prettierの導入

Prettierのinstall

とりあえず、必要なものをinstallしていきましょう。

 npm install prettier --save-dev

Pluginのinstall

ついでにこちらもinstallします。

npm install eslint-plugin-prettier --save-dev
npm install eslint-config-prettier --save-dev

.eslintrc.ymlの修正

pluginsにprettierを追加

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
  - prettier # add
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の最後に1行追加

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint --ext .tsx,.ts resources/",
    "lint-fix": "npm run lint -- --fix",
    "format": "prettier --write \"**/*.+(js|json|yml|ts|tsx)\""
  },

.prettierrc.ymlの修正

無ければ作って下記の様に修正

tabWidth: 2
singleQuote: true
trailingComma: 'none'
semi: false
useTabs: false

コマンドの実行

npm run format

上記のコマンドを実行すると、↓のメッセージが表示されます。unchangedは、そのまんまですね。変更なし。（ほんとはファイル名が全部出力されますが、多いので削ってます）

> format
> prettier --write "**/*.+(js|json|yml|ts|tsx)"

.eslintrc.yml 29ms (unchanged)
.prettierrc.yml 2ms (unchanged)
composer.json 34ms (unchanged)
package-lock.json 98ms (unchanged)
package.json 11ms (unchanged)
postcss.config.js 9ms (unchanged)
resources/js/app.tsx 174ms
resources/js/bootstrap.ts 26ms (unchanged)
resources/js/Components/ApplicationLogo.tsx 6ms
resources/js/Pages/Profile/Partials/DeleteUserForm.tsx 8ms
resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx 8ms
vite.config.js 2ms (unchanged)

たとえば、どんな感じにフォーマッタが効くかというと.prettierrc.ymlをこんな感じに一回いじった後にコマンドを実行すると

tabWidth:              2
singleQuote:              true
trailingComma:              'none'
semi:                 false
useTabs:              false

こんな感じに整形されます。

tabWidth: 2
singleQuote: true
trailingComma: 'none'
semi: false
useTabs: false

ちなみに、PhpStormの設定を以下の感じにすると、Prettierのフォーマッタが保存時に実行されますので、参考までに。

設定>言語＆フレームワーク＞JavaScript＞Prettier

おしまい

次回から、ちょっとずつ、LaravelやReactを使って、何かを作っていこうと思います。なんかテンション上がんないけど。。。