babel-sublime
babel-sublime copied to clipboard
babel
Close Tags (again?)
We should think about better native html syntax support. Possible changes will looks like https://github.com/sublimehq/Packages/blob/1329d7b76bb48ccfc6f587bd7d922efac25809a1/PHP/PHP%20Source.sublime-syntax#L87-L103
Try https://github.com/borela/naomi it had close tags issues too but it was fixed in the latest release.
I installed naomi and it doesn't autoclose tags either. Has the problem for babel been solved?
JS Custom auto-closes tags. It also hooks into the standard “Close Tag” command to provide JSX-specific functionality in that case.
@MiLeung It does close on my machine, have you restarted sublime after installing it?
@borela Yes. I installed babel sublime, set babel as my syntax, restart Sublime, and tag autoclosing still does not work.
@MiLeung Naomi replaces babel sublime completely, you have to set the syntax to Naomi > JavaScript, I added some extra meta scopes to enable toggling JSX comments too.
@borela Whoops, forgot the context. Same thing happens when I do those steps for Naomi (and uninstall babel).
@MiLeung Do you have a sample code to reproduce the problem? What's your sublime's current configuration?
@borela with naomi > javascript set as my syntax, completing the first tag in const A = () => <div does not create a closing tag.
@MiLeung Now I understand what you mean, that behavior only occur for HTML because it contains snippets to do it while for JSX, naomi relies on the standard behavior and completes the tag when you type </ but I can see that what you describe is a lot better as JSX always requires a closing tag(or self closing one).
I'll send a patch to fix it soon.
I have yet to see this work. In fact I was surprised to read that this feature even exists. According to package-metadata.json I am running babel-sublime 8.6.3(?). It might conflict with a setting or something (I've worked hard to get rid of some horrendous snippets) but the Auto Close HTML tags package works just fine for standard html.
First thanks for the project and your works I found my Sublime 3 can't close the tag anymore after updating the babel-sublime to 10, I did some modification to my key-binding but it doesn't work anymore after the updating, would be appreciated if you can give me some suggestions how can I update my key-binding when you have time, thanks
{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
[
{ "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
{ "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
{ "key": "setting.auto_close_tags" }
]
}
Can you post an example where the new version will not correctly close tags? I didn't expect that there would be any difference between the versions.
The keymap entry looks correct. I see it's just the one from Default with JSX added. The meta.jsx.js scope looks right as well. Maybe try just meta.jsx? Hard to say without an example.
Removing the .js so it's simply meta.jsx did not work, even after restarting.
Here are a couple examples that are not working.
This one is assigning a variable:
stickyBar = allowSticky ? (
<Grid container>
</
) : null;
This one is simply in the return for a basic functional component:
return (
<div>blee</
);
I'm also having the same problem recently as the above. Used to work with the binding @wwayne posted.
Have you tried JS Custom, by any chance? I wrote a special close tag command for that which works better than core's for JSX. It might be worth porting to babel-sublime.
It might also be possible to slightly change JSX scoping to make the built-in close tag command work better. I'd have to work through the code for the core command.
I was investigating this a bit and found out that the autoclose command works in certain situations, but not when a closing tag is open.
<div> --> Edit > Tag > Close Tag (alternatively, cmd+option+.) --> Tag closes --> Result <div></div>
<div>< --> Edit > Tag > Close Tag (alternatively, cmd+option+.) --> Nothing happens -- > Result <div><
Not sure what is causing the close functionality to fail in that particular scenario, but given that, you should be able to set up a workaround.
This snippet attempts to close on </ (which isn't working):
{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
[
{ "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
{ "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
{ "key": "setting.auto_close_tags" }
]
}
You could change it so tags autoclose on double slash (i.e. effectively typing <//) by updating the regex from .*<$ to .*</$.
Full snippet here:
{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
[
{ "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
{ "key": "preceding_text", "operator": "regex_match", "operand": ".*</$", "match_all": true },
{ "key": "setting.auto_close_tags" }
]
}
The equivalent flow would be:
<div></ --> Edit > Tag > Close Tag (alternatively, cmd+option+.) --> Tag closes --> Result <div></div>
FYI, I found that a recent change to JSX scopes broke JS Custom's jsx_close_tag command (https://github.com/Thom1729/Sublime-JS-Custom/issues/114). I don't know if this same scope change may be affecting the built-in close_tag command. If so, that would weigh in favor of copying jsx_close_tag in this package.
I think I'm probably going to port JS Custom's custom close tag command to this package. First, though, I should probably write a test suite for it.
@cvince I'm working on a test suite for JS Custom's close tag command. Do you have any specific examples of cases where the built-in close tag command fails? I'd like to add those to the test suite.
@Thom1729 Sorry for the super late response. Basically every tag fails (ex: <div></ doesn't do anything).