Prettier – oki2a24

Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法

本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。

方針のまとめ

.eslintrc.js の extends について
- Vue.js に関するルールは plugin:vue/vue3-recommended に任せる。
- 他のルールは eslint:recommended に任せる。
- Prettier との競合を避けるために prettier を使う。
ESLint と Prettiier は別々に実行する。

導入作業のまとめ

依存パッケージの追加 → npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier

.eslintrc.js

module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-recommended",
      "eslint:recommended",
      "prettier",
    ],
    rules: {},
};

.prettierrc
```
{
  "tabWidth": 2,
}
```

package.json への追加内容

$ git diff laravel/package.json
diff --git a/laravel/package.json b/laravel/package.json
index ce4fa08..0cc621e 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -7,7 +7,9 @@
         "watch-poll": "npm run watch -- --watch-poll",
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js   --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/",
+        "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}"
     },
     "devDependencies": {
         "@vue/compiler-sfc": "^3.0.11",
$