Laravelにlintを導入する

Laravelにlintを導入した時の作業メモです。
自分用メモなので、おおざっぱに書いている箇所はご了承ください
lintの設定などはググるか下記リポジトリなどを参考にいただけたらと
→ https://github.com/hirokita117/laravel_spa_practice

---

php-cs-fixerの導入

$ npm i -D husky lint-staged

$ composer require --dev -W friendsofphp/php-cs-fixer

$ npx husky install

• npm run prepareを追加

package.json

"prepare": "husky install"

$ npx husky add .husky/pre-commit "npx lint-staged"

• .gitignoreに.php-cs-fixer.cacheを追加

• .php_cs.dist.phpを追加し、ルールを記載
  →ルールに関してはググる

• package.jsonにhuskyとlint-stagedを追加

package.json

"husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.php": [
            "vendor/bin/php-cs-fixer --config=.php_cs.dist.php fix"
        ]
     }

Es-lint導入メモ

$ npm install eslint --save-dev

$ ./node_modules/.bin/eslint --init

↓ なんかこんな感じの質問に答える

 How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0
✔ Would you like to install them now with npm? · No / Yes

• .eslintrc.jsonの設定を良い感じにする
  →設定に関してはググる

• プラグインを入れる

# 例
$ npm install -D eslint-plugin-prettier eslint-plugin-simple-import-sort

• prettierのインストール

$ npm install -D prettier

• lint-stagedにアクション追加する（php-cs-fixerと同じ感じ）

• .prettierrcファイルを追加

$ npm install -D eslint-config-prettier

npmコマンドに、prettierとeslintを追加する（php-cs-fixerと同じ感じ）