Почему eslint не крашит приложение при ошибках vue?

Question

[Vadim_Sabirov]

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/strongly-recommended",
    "plugin:vue/recommended",
    "prettier"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  // 0 = off, 1 = warn, 2 = error
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "trailingComma": "none"
      }
    ],
    "vue/no-unused-vars": 1,
    "semi": [2, "never"],
    "comma-dangle": ["error", "never"],
    "vue/no-arrow-functions-in-watch": "error"
  },
  "plugins": ["prettier"]
}

template.vue

<template>
	<div>Hello</div>
</template>

<script>
export default {
	name: 'App',

	data: () => ({
		foo: { b: 3 }
	}),
	watch: {
		foo: (val, oldVal) => {
			console.log('new: %s, old: %s', this.foo)
		}
	},
	created() {
		this.foo = { b: 1 }
	}
}
</script>

ESLint подсвечивает ошибку cо стрелочной функцией в watch'е, но не прерывает компиляцию. В чем может быть причина?

Comments

[Антон Антон]

Подсвечивает плагин к vs code, а в собственно сборке приолжения eslint не участвует?

[Vadim_Sabirov]

Антон Антон, в webstorm'e подсвечивает ошибку, указывает на нее, но приложение продолжает компилироваться, как будто этой ошибки не существует. Я специально перепрописал свойство "vue/no-arrow-functions-in-watch": "error", т.к в plugin:vue-recommended это свойство уже должно было с ошибкой иметься, но все равно никакого результата

[Антон Антон]

в собственно сборке приложения eslint не участвует?

[Антон Антон]

чем собираешь? какой у этого конфиг? какие команды сборки?

Answer 1

[Антон Антон]

Если сборка осуществляется прямо или опосредованно webpack'ом, то нужно проверить, подключен ли webpack eslint plugin: https://webpack.js.org/plugins/eslint-webpack-plugin/, в опции ему надо передать extentions: ['js', 'vue']
Во всяких "инструментах", которые готовят конфиг вебпака отдельно (vue cli и прочие) это может быть сделано в местах типа configureWebpack или chainWebpack: https://cli.vuejs.org/ru/guide/webpack.html , в них во всех жто делается очень похоже.
Если используется vite, то я лично не пробовал, но все выглядит аналогично, ставим плагин и прописываем его в конфиге: https://www.npmjs.com/package/vite-plugin-eslint

Comments

[Vadim_Sabirov]

Вот мой vue.config

const { defineConfig } = require('@vue/cli-service')
const compiler = require('vue-template-babel-compiler')

module.exports = defineConfig({
	transpileDependencies: true,
	devServer: {
		port: 3000
	},
	assetsDir: './src/assets',
	chainWebpack: (config) => {
		config.module
			.rule('vue')
			.use('vue-loader')
			.tap((options) => {
				options.compiler = compiler
				return options
			})
	}
})

Куда я могу засунуть свойства extentions?

[Антон Антон]

Vadim_Sabirov, ну например как-то так:

const ESLintPlugin = require('eslint-webpack-plugin')

...
  chainWebpack: (config) => {
...
        config.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
}

[Vadim_Sabirov]

Антон Антон, большое спасибо