Skip to content
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

JSX block commenting #173

Closed
jeremejevs opened this issue Sep 3, 2015 · 12 comments

Comments

Projects
None yet
6 participants
@jeremejevs
Copy link

commented Sep 3, 2015

When I Toggle Block Comment on an element, e.g. a <Button />, I get the following:

However, that isn't valid JSX syntax. It should be like this:

Is this possible to achieve? That is have block commenting behave differently, depending on the context? If it is, it would also be nice to be able to configure the spacing (I'm using a linting ruleset which requires a single space between the asterisks and the commented content, like on the screenshot above).

@zertosh

This comment has been minimized.

Copy link
Member

commented Sep 3, 2015

Oh interesting. I have no idea how that works, but I'll def look into it. Thanks for pointing it out!

@zertosh zertosh added the bug label Sep 3, 2015

@hawkrives

This comment has been minimized.

Copy link
Contributor

commented Sep 3, 2015

I know that you can add snippets to the .sublime-keymap file, like this chunk from my copy:

// Auto-pair backtick quotes
{ "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`$0`"}, "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true },
        { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\)|]|\\}|>|$)", "match_all": true },
        { "key": "preceding_text", "operator": "not_regex_contains", "operand": "[`a-zA-Z0-9_]$", "match_all": true },
        { "key": "eol_selector", "operator": "not_equal", "operand": "string.interpolated.js - punctuation.definition.string.end", "match_all": true }
    ]
},
{ "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`${0:$SELECTION}`"}, "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true },
        { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true }
    ]
},
{ "keys": ["`"], "command": "move", "args": {"by": "characters", "forward": true}, "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true },
        { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^`", "match_all": true },
        { "key": "selector", "operator": "not_equal", "operand": "punctuation.definition.string.begin", "match_all": true },
        { "key": "eol_selector", "operator": "not_equal", "operand": "string.interpolated.js - punctuation.definition.string.end", "match_all": true },
    ]
},
{ "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true },
        { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "preceding_text", "operator": "regex_contains", "operand": "`$", "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^`", "match_all": true },
        { "key": "selector", "operator": "not_equal", "operand": "punctuation.definition.string.begin", "match_all": true },
        { "key": "eol_selector", "operator": "not_equal", "operand": "string.interpolated.js - punctuation.definition.string.end", "match_all": true },
    ]
},

This is a direct copy of the default keymap for auto-pairing single and double quotes, adapted for auto-pairing backticks in JS code.

I'll bet you could do something similar for comments inside of a JSX block.

@zertosh

This comment has been minimized.

Copy link
Member

commented Sep 3, 2015

I'll look into that too. I think that the replacement regex is something you can add to something like https://github.com/babel/babel-sublime/blob/master/Comments.tmPreferences

@hawkrives

This comment has been minimized.

Copy link
Contributor

commented Sep 3, 2015

Is there a scope that's active only inside of a JSX block? I don't seem to see one.

EDIT: As in, I've got source.js, but I'm looking for something more like source.jsx. I see things like tag.open.js, but that's only at the beginning of a JSX tag.

@zertosh

This comment has been minimized.

Copy link
Member

commented Sep 3, 2015

There used to be, until I removed it in #160. I might have to add it again.

@hawkrives

This comment has been minimized.

Copy link
Contributor

commented Sep 3, 2015

Yeah. So, if there was a source.jsx scope, then you could just add another block to Comments.tmPreferences. That might be a nice way.

@zertosh zertosh closed this in 53a8aab Oct 7, 2015

@zertosh

This comment has been minimized.

Copy link
Member

commented Oct 7, 2015

So this is published in v8.4.0 buttttttt it only works if you disable the stock JavaScript package. ST3 is giving priority to its own package (though I think it's more an alphabetical thing, like if this this called zBabel-Sublime it would load after JavaScript and its settings would control).

@DylanPiercey

This comment has been minimized.

Copy link

commented Nov 14, 2015

@zertosh how do you go about disabling the stock js package?

@zertosh

This comment has been minimized.

@DylanPiercey

This comment has been minimized.

Copy link

commented Nov 14, 2015

@zertosh thanks! Missed that bit.

@oliverbenns

This comment has been minimized.

Copy link

commented May 9, 2017

I've created and been using a snippet for this: https://gist.github.com/oliverbenns/5cc9d43966bf268febceaa9a42c5ef42

@borela

This comment has been minimized.

Copy link

commented Mar 8, 2018

It turns out, implementing such a plugin that behaves intuitively when the code is mixed with JSX is not an easy task but I finnally managed to add it to https://github.com/borela/naomi on >= 3.8.0. Relevant issue borela/naomi#23.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.