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.

Sign up for GitHub

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

Jump to bottom
< 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
question

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 •
edited
Loading

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

@iGarym iGarym closed this as completed Jul 19, 2017
@prograhammer
Copy link
prograhammer commented Jul 27, 2017 •
edited
Loading

@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!

@armano2 armano2 mentioned this issue Aug 13, 2017
Closed
@jinalskothari
Copy link
jinalskothari commented Jan 10, 2018 •
edited
Loading

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
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@armano2 @flaviojs @mysticatea @jinalskothari @prograhammer @iGarym
0