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?
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
I have an ARM template, which I use to deploy a resource which has a property that contains a Python script as a string. Instead of having the script in the template file, I would prefer to have it in a .py file, and embed that in the template on deployment.
Is there a way to achieve this?
The simplest way to do this is using loadTextContent() in bicep: https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/bicep-functions-files#loadtextcontent
If you're not using bicep (and can't) there's no good substitution for it in JSON, you'd have to fashion something to parse the json, figure out where that goes and stringify yourself.
That help?
Atom recently stopped highlighting any embedded ruby inside my .html.erb files, so now they look like this:
However, if I change the grammar being used for the editor file to HTML (Rails) instead of ERB, everything goes back to being highlighted the way it should be:
But every time I open an ERB page it defaults to using the ERB grammar from the language-ruby package, which doesn't highlight any of the ERB, and I don't want to have to manually change the grammar each time I open an ERB file.
Is there any way to change which grammar Atom uses by default for a given file type? If not, are there any other workarounds to fix this and get ERB to start rendering embedded ruby in color again?
Before we get down to the actual question, how to change the default highlighting of a specific syntax, please check that this isn't related to the new treesitter parser.
If you really want to change the default syntax, you can add the following to your Atom configuration (config.cson):
"*":
core:
customFileTypes:
"text.html.ruby": [
"*.erb"
]
Make sure not to overwrite your existing configuration and nest the customFileTypes key correctly, since CSON is an indentation-sensitive format.
How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.
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