Something that would work like the CodeFormatter package does for regular HTML, but with Spacebars would be awesome!
There appear to be some plugins for Handlebars, which Spacebars is built off of.
Meteor ships with a templating language called Spacebars, inspired by Handlebars. It shares some of the spirit and syntax of Handlebars, but it has been tailored to produce reactive Meteor templates when compiled.
You can search on Package Control for Handlebars; it looks like this one is pretty popular.
Really old, what I did was download https://github.com/victorporof/Sublime-HTMLPrettify and use this in Sublime Text. Open the preferences for it and enable handlebars indentation with
"indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
Related
When using Angular with VSCode I have seen in tutorials how people have been able to write the "styles" part of "#Component" in Strings using backticks (`) to allow multiline Strings to be directly written as CSS code inside an "app.component.ts" file. The tutorials show that as when written, all expressions typed in allows faster autocompletion with suggestions for values presented after an element has been added.
Like for example if "color:" is used suggested avaliable colors whose values can be used appear.
For me however no such suggestions ever appear when writting within multiline Strings inside a TypeScript file for CSS, although they do appear when using a regular CSS file, as well as when being written within a "style" element inside a HTML file. Still even though no autocomplete suggestions appear withing my TypeScript file, the CSS text code changes color depending on the used elements and values exactly as they do in CSS, so the TypeScript file does indeed recognize the CSS code as CSS, and the results when the server is run looks exactly as they should.
But how do I make it so that I still can get autocomplete suggestions when writting CSS code inside TypeScript to make things easier though?
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
h3 {
color: /*<--Expects automatic suggestions for auto completion, but I never get any.*/
}
`,
],
})
export class AppComponent {
title = 'my-dream-app';
}
This is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:
VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.
Two extensions are already making use of this:
vscode-styled-components — Syntax highlighting, IntelliSense, and error reporting for styled-component CSS strings.
lit-html — Syntax highlighting, IntelliSense, and formatting for lit-html template strings
If you are interested in writing an extension for a template string embedded language, take a look at how the implementation of these extensions. And let me know if you run into any problems or have any questions about the new contribution point (please open a new issue or post a question to stack overflow)
Note: The link to the Visual Studio Marketplace page for vscode-styled-components in the above quote is now dead. I think it has moved to here (but don't quote me on that. I'm not 100% sure what the history is here.)
I'm not aware of CSS currently having such a ts server plugin, so what you can do in the meantime before one is created is:
You can use the Template Literal Editor extension.
Quoting from its readme:
Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).
Instructions:
Install extension to VS Code.
Open a JavaScript or TypeScript file, or a file in some other language if customized via "templateLiteralEditor.regexes" configuration. Many languages have a starter configuration included.
Place cursor inside any template literal string and press Ctrl+Enter.
Select language (defaults to html). Remembers the last selection as default.
Outermost template literal range opens in the selected language in a side-by-side view, synced with the original. Multiple cursors and undo work as usual, and saving the template results in saving of the original document.
Enjoy syntax highlighting, completions, formatting, commenting, snippets, your preferred editing extensions, etc!
When you edit the original document the template editor is kept in sync. If template boundaries are modified or a sync error happens, then the template literal editor is closed for safety.
Ctrl+Enter in the literal editor closes it and keeps the cursor position. Also ordinary close or "Revert And Close Editor" action should work without unnecessary save dialogs. There's also a Ctrl+Shift+Backspace shortcut to close all literal editors quickly, from any editor.
Other related tools:
This won't add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner. If you're already using styled-components, you can use vscode-styled-components
after a PC crash I was luckily able to recover data but not programs and settings. Now using VS Code + Prettier I'm not able to have multiple Handlebars partials to new lines. Eg:
{{> Partial_1}}
{{> Partial_2}}
on save it becomes:
{{> Partial_1}} {{> Partial_2}}
Can't find the solution (or maybe I'm not asking the right question to Google)...
There are some issues with Prettier & handlebar files. From your example, it seems that you are using HTML Language Features as the formatter.
Try setting this in your VS Code settings.json file
"html.format.indentHandlebars": true
You can however right-click the .hbs file and select the option Format Document With to choose Prettier. You can also set Prettier as the default formatter for handlebar files but currently, Prettier uses the Glimmer parser for handlebar files which does not support partials so your codes won't be formatted properly.
See the related issue on Github: https://github.com/prettier/prettier/issues/11834
Possible workaround: How to solve handlebar partials are not supported in VS Code?
I am using React and I really like the fact to I can write inline style directly in my javascript file. However, autocomplete css doesn't seems to work in Atom editor.It work fine with ".css" file, not in ".js" file. Is there an Atom package that would enable this feature? thank you
The scope in which snippets are working is defined in the snippet file itself. There is currently no way to make snippets work in a “foreign” scope (see this forum post for reference.)
Your best option is probably adding the language-css snippets to your Atom snippets (Atom > Snippets) and edit their scope accordingly (e.g. source.css, source.js). Alternatively, you could do the same creating a new package.
In the Meteor FAQs http://meteor.com/faq/how-do-i-package-a-new-templating-system there is some information about adding a different (than the default Handlebars) templating system. Jade is the only other example explicitly called out elsewhere in the docs.
So is somebody already working on Jade? If not, is it feasible for me to start? Or is it still too early? e.g. :
The package API is rapidly changing and isn't documented, so you can't
make your own packages just yet. Coming soon.
I've been trying to love Handlebars in my current Ember.js project, but for me nothing is as elegant as Jade.
We would love to see Jade integration. Use packages/handlebars as a template.
The basic strategy is to wire the output of the template engine into Meteor.ui.render which is how we implement live page updates. As long as your template returns HTML, that'll work. Any time a Jade template references a Meteor.Collection document or Session variable, Meteor will register that dependency so that knows to rerender the template when the data changes.
Even better, though, is to also use Meteor.ui.chunk and Meteor.ui.listChunk. These will limit the amount of recalculation Meteor has to do when there's a change. For example, if you are rendering a list of documents using {{#each}} in Handlebars-speak, there's no reason to recalculate the whole template when a new document enters the result set. We just render one HTML chunk for the new document, and insert that right into the DOM. That's listChunk in action.
So you'll likely find that instrumenting just if/unless and for/each in Jade gets you a long way there.
Just be aware, package development is not as documented as the other parts of the system. So don't hesitate to ask more specific questions as you go.
meteor >= 0.8.0
Using the mquandalle:jade package has been officially recommended.
meteor <= 0.7.2
If you are not using CoffeeScript, you should check out jade-handlebars. As of this writing, there is an issue where CoffeeScript template files seem to need to be wrapped inside a Meteor.startup function which caused other issues for me.
If you are using CoffeeScript, you should check out my Cakefile. The details are all in the description, but the short version is that it automatically adds/removes/updates html files alongside your jade files. I ended up adding *.html to my .gitignore, which only works if you are not mixing html and jade in the same project. It's a bit of a hack but so far it's working fine for me.
Just publish my first meteor smart package on Atmosphere!
Use Jade+Handlebars instead of HTML+Handlebars
https://atmosphere.meteor.com/package/jade-handlebars
Just got jade templating working with my Meteor projects! And it is actual jade not jade-handlebars or some half form of jade. It is great but it needs Meteor UI which is currently in a development release called blaze-rc1. So it does not work with Meteor 0.7 at the moment.
do 'mrt add jade'
&
Run your meteor project using 'mrt --release blaze-rc1'
https://github.com/mquandalle/meteor-jade/
If you have coffeescript and jade files in the same folder add _ to the beginning of the file name so it loads jade files before the coffeescript file, otherwise it will not work correctly.
mrt add jade
in client/views/templates/hello.jade you could do something like this:
template(name="hello")
h1 hello world!
{{greeting}}
input(type="button" value="click")
start you app with mrt
We are making extensive use of LessCss and and jQueryUI in a current project and we've looked all over for the jQueryUI theme in Less format. Has any one come across this? And if so, can you point me in the right direction?
Yes there is a template file for jqueryui + lesscss on sourceforge
http://jqueryuilesscss.sourceforge.net/
I will be adding LessCss functions and slimming down the vars as I explore this more. The aim is to also add non js reliant :hover for all inputs/buttons etc
Leafo of the PHP .less project just released a feature that is designed to generate a .less source from a css file. Presumably you should be able to use this to do what you are looking for.
http://leafo.net/lessphp/
Go here and try the lessify stuff https://github.com/leafo/lessphp
This is how I made jQuery widgets follow the compiled twbs theme (for example bootswatch).
https://github.com/DC-development/jquery-ui-less