8000 Conflict with the eslint-plugin-html · Issue #91 · vuejs/eslint-plugin-vue · GitHub
[go: up one dir, main page]

Skip to content

Conflict with the eslint-plugin-html #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

< 8000 div class="d-flex flex-items-center flex-wrap mt-0 gh-header-meta">
Closed
iGarym opened this issue Jul 18, 2017 · 7 comments
Closed

Conflict with the eslint-plugin-html #91

iGarym opened this issue Jul 18, 2017 · 7 comments
Labels

Comments

@iGarym
Copy link
iGarym commented Jul 18, 2017
  • version: 3.5.1
  • vue-cli: 2.8.2
// Copy from webpack-template
extends: 'airbnb-base',
plugins: [
  'html'
],

After adding the plugin to extends, as below, eslint has no effect on the js in the vue single file component.

// Copy from webpack-template
extends: [
  'airbnb-base',
  'plugin:vue/recommended',
],
plugins: [
  'html'
],

不算bug吧? remove html 插件就好了。

@mysticatea
Copy link
Member
mysticatea commented Jul 18, 2017

Thank you for the report.

eslint-plugin-html seems to remove the outside of <script> tags then it gives only inside of <script> tags to this plugin. However, this plugin requires the outside of <script> tags.

Please configure eslint-plugin-html to not strip source code on .vue files.

{
    "plugins": [ "html" ],
    "settings": {
        "html/html-extensions": [".html"],  // don't include .vue
    }
}

https://github.com/BenoitZugmeyer/eslint-plugin-html#settings

@prograhammer
Copy link
prograhammer commented Jul 27, 2017

@mysticatea Adding the settings as you mention still doesn't fix the problem. Vue files seem to not be getting the linting as the .js files are. Here is a basic Hello example: https://github.com/prograhammer/hello

I'm using VS Code. If you npm install and then open the project in VS Code you'll see that adding extra spaces in doc.js lints perfectly. But adding extra spaces in app.vue does not lint.

BTW, this is my VS Code settings.json:

// Place your settings in this file to overwrite the default settings
{
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "eslint.options": {
            "extensions": [".html", ".js", ".vue", ".jsx"]
        },
        "eslint.validate": [
            {
                "language": "html",
                "autoFix": true
            },
            {
                "language": "vue",
                "autoFix": true
            },
            {
                "language": "javascript",
                "autoFix": true
            },
            {
                "language": "javascriptreact",
                "autoFix": true
            }
        ]
    }
}

@armano2
Copy link
Contributor
armano2 commented Jul 28, 2017

You have to add configuration for [vue]

Sent from my Xiaomi Redmi 4A using FastHub

@prograhammer
Copy link

@armano2 What do you mean? I've installed the vetur extension for Vue if that's what you mean.

@prograhammer
Copy link

Ok, solved!

I updated my settings.json (file > preferences > settings) to look like this:

// Place your settings in this file to overwrite the default settings
{
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[vue]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "eslint.options": {
        "extensions": [".html", ".js", ".vue", ".jsx"]
    },
    "eslint.validate": [
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ]
}

Works beautifully!

@jinalskothari
Copy link
jinalskothari commented Jan 10, 2018

I faced a similar issue. The 'html' plugin was causing issues. Adding the setting html/html-extensions fixed the problem. My .eslintrc was generated by vue-cli init webpack [name].

I am guessing many people new to the ecosystem would use that template and may come across the issue. A small section in the README may be worthwhile.

@flaviojs
Copy link
flaviojs commented Mar 2, 2018

Encountered this problem and found that placing "vue" before "html" in "plugins" fixed it for me.

{
    "plugins": [
        "vue",
        "html"
    ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants
0