html-quotes single should allow double when single quote is within it

[rightaway]

What did you do?

<component attr="contains single quote ' in attr" />

What did you expect to happen?
It should be allowed even though single is set for html-quotes. This is how the quoting functionality works in core eslint for javascript. If you set single quotes you can still use double quotes if the string contains a single quote. This should be no different.

What actually happened?

It gave an eslint error.

[RiqueBR]

Same problem here. Had to stop using this rule o avoid any big issues when using lint on save

[ota-meshi]

Thank you for this issue.

I think that, like quotes, we need to add an "avoidEscape" option to the html-quotes rule.

[zdm]

attr='{"a":"b"}'

become

attr="{"a":"b"}"

that is completely unreadable.
You really need to keep single quotes and avoid escaping;

[zdm]

@ota-meshi
I have other idea, that can be useful and will make life easier.
If attribute content starts with the { rule can try to treat content as json, quote (parse/stringify) it correctly and wrap into single quotes.
Example:

attr="{a   :   'aaa', b   :   123}"

should be fixed to:

attr='{"a":"aaa","b":123}'

If json after stringification contains ' - it should be html-escaped.

[zdm]

Sorry, I have no time to make pull request.
Here is the working rule.
New option "auto" added. It select best quotes automatically, to minimize number of escaped quotes.
Also, It tries to correctly process JSON in attributes,
It requires json5 as dependency.

"use strict";

const JSON5 = require( "json5" );
const utils = require( "eslint-plugin-vue/lib/utils" );

const quoteName = {
    '"': "double quotes",
    "'": "single quotes",
};

module.exports = {
    "meta": {
        "type": "layout",
        "docs": {
            "description": "enforce quotes style of HTML attributes",
            "category": "recommended",
            "url": "https://bitbucket.org/softvisio/softvisio-eslint-plugin",
        },
        "fixable": "code",
        "schema": [{ "enum": ["auto", "double", "single"] }],
    },

    create ( context ) {
        const sourceCode = context.getSourceCode();
        let hasInvalidEOF;

        return utils.defineTemplateBodyVisitor( context,
            {
                "VAttribute[value!=null]" ( node ) {
                    if ( hasInvalidEOF ) {
                        return;
                    }

                    const text = sourceCode.getText( node.value );
                    const firstChar = text[0];

                    var quote, dequoted, newQuote;

                    if ( firstChar === "'" || firstChar === '"' ) {
                        quote = firstChar;

                        dequoted = text.slice( 1, -1 );
                    }
                    else {
                        dequoted = text;
                    }

                    // unescape
                    dequoted = dequoted.replace( /"/g, '"' );
                    dequoted = dequoted.replace( /'/g, "'" );

                    if ( dequoted[0] === "{" ) {
                        try {
                            const json = JSON.stringify( JSON5.parse( dequoted ) );

                            if ( dequoted !== json ) {
                                newQuote = "'";

                                dequoted = json;
                            }
                        }
                        catch ( e ) {
                            //
                        }
                    }

                    if ( !newQuote ) {
                        const mode = context.options[0];

                        if ( mode === "double" ) {
                            newQuote = '"';
                        }
                        else if ( mode === "single" ) {
                            newQuote = "'";
                        }
                        else {
                            const countDouble = ( dequoted.match( /"/g ) || [] ).length;
                            const countSingle = ( dequoted.match( /'/g ) || [] ).length;

                            if ( countDouble <= countSingle ) {
                                newQuote = '"';
                            }
                            else {
                                newQuote = "'";
                            }
                        }
                    }

                    if ( quote !== newQuote ) {
                        context.report( {
                            "node": node.value,
                            "loc": node.value.loc,
                            "message": "Expected to be enclosed by {{kind}}.",
                            "data": { "kind": quoteName[newQuote] },
                            fix ( fixer ) {
                                let replacement;

                                if ( newQuote === '"' ) {
                                    replacement = '"' + dequoted.replace( /"/g, "&quot;" ) + '"';
                                }
                                else {
                                    replacement = "'" + dequoted.replace( /'/g, "&apos;" ) + "'";
                                }

                                return fixer.replaceText( node.value, replacement );
                            },
                        } );
                    }
                },
            },
            {
                Program ( node ) {
                    hasInvalidEOF = utils.hasInvalidEOF( node );
                },
            } );
    },
};