Skip to content

Order-in-components breaks autofix of comma-dangle #566

Closed
@yourivandenbrand

Description

@yourivandenbrand

Tell us about your environment

  • ESLint Version: 5.4.0
  • eslint-plugin-vue Version: 5.0.0-beta.3
  • Node Version: 8.11.4

Please show your full configuration:

{
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "configFile": "C:/Projects/waternet-global-waternet/src/frontend-global/gulpfile.js/settings/.eslintrc.js",
        "rules": {
            "comma-dangle": ["error", {
                "arrays": "only-multiline",
                "objects": "always",
                "imports": "only-multiline",
                "exports": "only-multiline",
                "functions": "only-multiline"
            }],
            "eqeqeq": 0,
            "import/no-unresolved": 0,
            "linebreak-style": 0,
            "max-len": 0,
            "no-underscore-dangle": 0,
            "no-unused-expressions": "off",
            "vue/html-closing-bracket-newline": 
            [
                "error", {
                    "singleline": "never",
                    "multiline": "always"
                }
            ],
            "vue/html-indent": 
            [
                "error", 4, {
                    "attribute": 1,
                    "closeBracket": 0,
                    "alignAttributesVertically": true,
                    "ignores": []
                }
            ],
            "indent": ["error", 4],
            "vue/attribute-hyphenation": 0,
            "vue/attributes-order": 
            [
                2,{
                    "order": [
                        "DEFINITION",
                        "LIST_RENDERING",
                        "CONDITIONALS",
                        "RENDER_MODIFIERS",
                        "GLOBAL",
                        "UNIQUE",
                        "TWO_WAY_BINDING",
                        "OTHER_DIRECTIVES",
                        "OTHER_ATTR",
                        "EVENTS",
                        "CONTENT"
                    ]
                }
            ],
            "vue/html-self-closing": "any",
            "vue/html-quotes": "double",
            "vue/order-in-components": ["error", {
                "order": [
                    "el",
                    "name",
                    "parent",
                    "functional",
                    ["delimiters", "comments"],
                    ["components", "directives", "filters"],
                    "extends",
                    "mixins",
                    "inheritAttrs",
                    "model",
                    ["props", "propsData"],
                    "data",
                    "computed",
                    "watch",
                    "LIFECYCLE_HOOKS",
                    "methods",
                    ["template", "render"],
                    "renderError"
                ]
            }],
            "vue/max-attributes-per-line": 
            [1, 
                {
                    "singleline": 1,
                    "multiline": {
                        "max": 1,
                        "allowFirstLine": false
                    }
                }
            ],
            "vue/require-default-prop": 0
        }
    },

    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ],
    "explorer.confirmDragAndDrop": false,
    "files.autoSave": "off",
    "git.autofetch": false,
    "git.decorations.enabled": false,
    "editor.detectIndentation": false,
    "prettier.eslintIntegration": true,
    "workbench.colorTheme": "One Dark Pro",
    "window.zoomLevel": 0,
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.html": "none"
}

What did you do? Please include the actual source code causing the issue.
Multiple presses of ctrl+s to autofix multiple eslint errors including comma-dangle and order-in-components rules.

What did you expect to happen?
That it would autofix and I can continue pressing ctrl+s to fix every eslint rule I have configured.

What actually happened? Please include the actual, raw output from ESLint.
It seems that the order-in-components rule is executed before trailing commas which results in a double comma at the end of my component methods. This in turn breaks the autofix feature all together. To continue autofixxing you need to remove 1 comma which eslint added because of comma-dangle.
https://s8.postimg.cc/dplupgf2d/image.png

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions