＜img/＞和报错

Question

ESLint: Disallow self-closing on HTML void elements (<img/>).(vue/html-self-
和
ESLint: Require self-closing on Vue.js custom components (<el-image>).(vue/h
都是正常写的。不知道哪里错了。
该怎么设置呢？


我的配置：

module.exports = {

parserOptions: {
    parser: 'babel-eslint',

sourceType: 'module'
},
env: {

    browser: true,

node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
rules: {

    "no-unused-vars":"off",

"vue/html-self-closing": ["error", {

        "html": {
            "void": "always",

"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}],
}
}

Answer 1

<el-image> 标签如果是空的，就不需要结束标签，单个标签就行了
<el-image :sre='item.src' :preview-src-list='item.url' />

至于上面的ESlint报错，我也不知道为什么，但是根据MDN

拉倒最下面，有明确说明： 空标签，只能有开始，不能有结束， 所以它是典型的 self-closing 标签， 至于为啥Eslint会报错，你看看你们配eslint配置怎么写的吧

Answer 2

一个是不允许html void元素自闭合，一个是自定义组件要求自闭和。改成如下：

<img :src="wxImgSrc" alt="微信二维码">

<el-image :src="item.url" :preview-src-list="item.url" />

或者修改你的.eslintrc.js文件 'vue/html-self-closing' 配置

Answer 3

ESLint配置问题

根目录找到 .eslintrc.js文件，如没有，先创建，然后在rules中添加以下配置，

module.exports = {
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'generator-star-spacing': 'off',
        "vue/html-self-closing": ["error",{
          "html": {
            "void": "never",
            "normal": "any",
            "component": "any"
          },
          "svg": "always",
          "math": "always"
        }]
      }
 }