本投稿は、 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.jsmodule.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",
$
