タグ: Vue.js

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