sneagan / atom-handlebars Goto Github PK
View Code? Open in Web Editor NEWHandlebars awareness for the Atom Editor
License: Other
Handlebars awareness for the Atom Editor
License: Other
I get into this weird state, after clicking a line number in the gutter, where highlighting follows my cursor around. The only way out of this seems to be to close the file.
I can only reproduce this bug with atom-handlebars installed and enabled.
It seems to affect any type of file (video below is an .scss file)
Video of issue:
https://www.youtube.com/watch?v=pNmt2X7180g
Discussion on Atom.io:
http://discuss.atom.io/t/stuck-selecting-lines-after-clicking-on-line-number/9293
Looks like you have copypasta'd the language html grammar, including all the snippets. You can include grammars rather than duplicating them. See the erb definition for an example.
Hey, I happen to have a Handlebars package available for Atom as well, and I figure it makes a lot more sense to just combine them to have one package that works better and it better maintained. What do you think? I'd be happy to fork this repo and integrate the differences from my package as best I can.
Is there a possibility for atom-handlebars to recognize .hjs files ?
Thanks and cheers !
EDIT : I added it myself (see the pull request ๐ธ )
eachas
seems to be the only documented modern each construct in ember. It's quite confusing to autocomplete something that doesn't seem to work.
Is there some reason for keeping the old not-working one around?
I'm experiencing a little issue with comments in plain HTML files.
I have binded the toggle-line-comments
command with the ctrl-7
shortcut. But when I use it in a simple HTML file the line is not surrounded with the usual HTML comment tags (<!-- -->
) but instead the handlebars comment tags are used ({{!-- --}}
).
I temporarily solved this problem by removing these two lines from atom-handlebars.cson
:
'commentStart': '{{!-- '
'commentEnd': ' --}}'
Maybe it should detect if the file type is HTML or Handlebars and apply the correct comment regarding context.
Not sure where the official docs for this handlebars feature are. Basically, you can add ~
right after {{
or right before }}
to have whitespace to the left or right of the tag respectively trimmed by Handlebars engine.
More details here:
http://stackoverflow.com/a/23636497/6236
Store package settings files in the settings/
directory instead of scoped-properties/
Package.loadSettings (/Applications/Atom.app/Contents/Resources/app/src/package.js:565:9)
<unknown> (/Applications/Atom.app/Contents/Resources/app/src/package.js:187:43)
To reproduce:
Create a new test.hbs file with the following two lines:
{{forms-colors-nicely name="priceManualSwitch" checked=manualPriceChecked}}
{{forms/colors-nicely name="priceManualSwitch" checked=manualPriceChecked}}
The second line remains all grey (apart from the {{ and }}) whereas 'name' and 'checked' change to orange on line 1 and "priceManualSwitch" to green.
It appears that the / in the component name stops the nice coloring. The / is used in Ember in particular from about version 1.10 to 1.13 to organise components into sub folders.
Atom Version 1.0.5, Windows 7 64bit
atom-handlebars version 1.1.0
When variable is inside single or double quotes.
<span class='popup-trigger arrow-dropdown-icon'
data-key='{{key}}' data-index='{{index}}' data-label='{{label}}' data-total='{{total}}'></span>
it won't be highlighted in blue, simply look like a regular text.
The as
keyword used in a block level component doesn't align properly
I'm using 2 space indents (no tabs).
The following code does not indent correctly when using the HTML (Handlebars)
syntax highlighter supplied in this package (notice the 1 space before as
):
{{#block-level-component
correctly='indented'
as |incorrectly-indented|
}}
{{/block-level-component}}
I use Blaze Meteor Template
.
Support with .html file?
Store package style sheets in the styles/
directory instead of stylesheets/
in the atom-handlebars
package
Package.getStylesheetsPath (/Applications/Atom.app/Contents/Resources/app/src/package.js:448:9)
Package.getStylesheetPaths (/Applications/Atom.app/Contents/Resources/app/src/package.js:459:32)
cmd + /
should use the handlebars syntax for comments and not HTML
Reported via deprecation-cop
The snippets are scoped to text.html
which applies to every html-related language: html, erb, etc. They will be unnecessary soon with the inclusion of autocomplete-html in core.
Something like this doesn't correctly parse.
{{component-name
text='Title text'
description='This text doesn\'t correctly parse.'
anotherVariable=computedProperty
upgradeAction=(action 'upgradeAction')}}
Here's a screenshot of it in Atom.
I'm able to avoid the problem by using double quotes around the string, but it would be preferable if escape characters could be parsed.
Could you please publish the handlebars module to npm? We are using the same highlighting engine as Atom now, and would like to add your grammar:
If I split a long line like in the example below the syntax highlighting goes away:
<header id="header">
<h1>todos</h1>
{{input type="text" id="new-todo" placeholder="What needs to be done?"
value=newTitle action="createTodo"}}
</header>
Hi there, loving the handlebars syntax highlight!
Just noticed one minor thing:
This does not highlight:
{{dropdown-menu.item label="Download}}
This however does (forward slash instead of a dot):
{{dropdown-menu/item label="Download}}
I believe both cases are valid.
Currently else if
isn't being highlighted together like I'd expect - and it leads me to end up googling whether it's elsif
else if
or elseif
each time I try to use that handlebars helper lol.
{{#if x}}
x
{{else if y}}
y
{{/if}}
I found the part in the handlebars docs that describe the behavior around else if
: "Conditionals may also be chained by including the subsequent helper call within the else mustache."
http://handlebarsjs.com/block_helpers.html
Related to #5, but HBS tags should be highlighted not only in quotes, by anywhere inside HTML tags, e.g.:
<input {{#if required}}required{{/if}}>
If I'm not wrong, this would prevent using the 'include': 'text.html.basic'
import to implement it.
{{{}}} needs to be completely highlighted.
Handlebars allows for whitespace to be removed by using a tilde (~) character as explained here: http://handlebarsjs.com/expressions.html#whitespace-control.
However, atom-handlebars isn't highlighting this scenario correctly:
{{~#if asdf}}
should be highlighted just the same as {{#if asdf}}
.
I've been building Zendesk apps, and they use hdbs as the extension for handlebars. I would be willing to add it if you don't see any issue.
If you use the simple form of Handlebars comments across multiple lines like so...
<span>blah blah blah</span>{{!
}}<span>whatever</span>
...atom-handlebars
doesn't recognize the end of the comment. It darkens all the text for the rest of the file, or at least until it encounters --}}
.
I'm using ember
each-in snippets end with {{/each}} which causes hbs compiler error as following
The Broccoli Plugin: [TemplateCompiler] failed with:
Error: each-in doesn't match each
replace with {{/each-in}} will work.
:)I've created a PR # #40
Not using Javascript syntax highlighting for Block Helpers
It would be great if this could also work with HTML files. I'm using Ember.js, and would love to see syntax highlighting.
I tried just adding 'html'
to the list of fileTypes
in the package's grammar, but I apparently don't know enough about how Atom works to get this working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.