moyashidaisuke's diary

moyashidaisuke's diary

Laravel(mixも)でvueファイルのlintで自動修正させる

2019-03-01 moyashidaisukeLaravelvuejs

lint自体の設定はこちらで。

[https://laravel-news.com/eslint-plugin-vue:embed:cite]

[https://qiita.com/sympe/items/f6473c45d45c7be271e5:embed:cite]

[https://qiita.com/sympe/items/f6473c45d45c7be271e5:embed:cite]

npm(yarn)から起動する場合は、package.jsonに

    "scripts": {
        "lint": "eslint --fix --ext .js,.vue resources/js/",

みたいな感じで、--fixをつければ自動で修正までしてくれます。(できる範囲で)

npm run devなり npm run hotで自動実行させる場合は、webpack.mix.jsに

mix.webpackConfig({
  module: {
    rules: [
      {
        enforce: 'pre',
        exclude: /node_modules/,
        loader: 'eslint-loader',
        test: /\.(js|vue)?$/,
        options: {
          fix: true
        }
      },
    ]
  }
});

みたいに、options.fix=true な設定を入れればOKです。optionsは他にも色々設定できるので、工夫すれば色々できるかも。

[https://github.com/webpack-contrib/eslint-loader:embed:cite]