Skip to content

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

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

Closed
yourivandenbrand opened this issue Aug 30, 2018 · 1 comment · Fixed by #569
Closed

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

yourivandenbrand opened this issue Aug 30, 2018 · 1 comment · Fixed by #569

Comments

@yourivandenbrand
Copy link

yourivandenbrand commented Aug 30, 2018

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

@ota-meshi ota-meshi added the bug label Aug 30, 2018
@ota-meshi
Copy link
Member

Thank you for this issue.
I will consider ways to solve this issue.

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