I'm running into some strange formatting issues with vscode using svelte. Whenever I create an HTML tag, say <p></p>, as soon as I save or click elsewhere, it reformats to this: <p />. I have no idea what's going on. It also doesn't seem to like certain Svelte tags like <slot></slot>. Has anyone else encountered this? If so, what did you do to fix it?
If you are using the official Svelte extension, it only comes with one way of formatting the code: Prettier.
If you want control back, turn off svelte.plugin.svelte.format.enable. You could also create a .prettierrc and see if there are any Prettier options to change this particular behavior.
By the way: Even though something like <div /> would be invalid in HTML, it is not in Svelte because the code gets compiled anyway.
If you have just a div like that in a component, it gets compiled to:
function create_fragment(ctx) {
let div;
return {
c() {
div = element("div");
},
m(target, anchor) {
insert(target, div, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
}
};
}
Or with SSR:
const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<div></div>`;
});
If you are using Svelte for VS Code extension, you can enable svelte strict mode in extension settings, or put this in settings.json
"svelte.plugin.svelte.format.config.svelteStrictMode": true
Related
I've setup PHP IntelliSense to use Allman Style linebreaks, so when I use CTRL+K+F it will successfully reformat from this:
if (condition) {
// code...
} else {
// code
}
To this (Allman style):
if (condition)
{
// code...
}
else
{
// code
}
What I cannot get working is how to get VSCodes auto-complete functions to format the same way:
I want braces to be on a new line, but nothing I've found, even extensions, seems to do this. Thanks!
Ok I figured this out, it's called a Snippet, and you can configure them via
CTRL+SHIFT+P
Snippets: Configure User Snippets
Then create a new one or extend from the list
If you want to add a PHP user snippet to use with HTML, then add your php tag to the html snippet.
You can use variables $1 $2 $3 to allow you to tab through components of snippet once it outputs.
I am using the TinyMCE editor in combination with Web Components or more precisely Angular Elements to produce HTML with placeholder tags. These placeholder tags are later used to instantiate Angular components. Getting TinyMCE to allow custom HTML tags is easy with the custom_elements config parameter. Just to be clear, I do not want Web Components inside the editor itself. I am using the text(HTML) that the editor produces in a later stage, not really relevant for this problem. The editor output is perfect as it is. My problem is related to the behaviour of the editor.
I want this
<custom-container>
<custom-item>Item one</custom-item>
<custom-item>Item two</custom-item>
<custom-item>Item three</custom-item>
</custom-container>
to feel and behave like a regular list.
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
I have tried the following config with some success.
{
custom_elements: 'custom-container,custom-item',
valid_children: 'custom-container[custom-item]',
formats: {
container: { block: 'custom-container', merge_siblings: true, wrapper: true },
},
}
I get stuck within the custom container and can't escape it. I would like <custom-container> to behave like <ul> and <custom-item> to behave like <li>. Someone might suggest using the list that is already implemented and simply changing the tag names. I would if I could, but I need the list... -.- I have a feeling that it is possible to achieve my goal with some keyboard commands or event listening, but I have no idea where to start. Help!
I had the same issue with custom elements. You can try add ~ at the beginning of each element.
This worked for me.
{
custom_elements: '~custom-container,~custom-item',
valid_children: 'custom-container[custom-item]',
formats: {
container: { block: 'custom-container', merge_siblings: true, wrapper: true },
},
}
Which formatter does Visual Code use? I read somewhere it uses jsbeautifier so I tried adding a compatible ignore comment to my .ejs template, but it doesn't work.
As far as I know, there is no way to do this without an extension.
However, you have full control of the formatting if you use this extension. It also uses js-beautify, but it adds configuration.
As specified in the js-beautify docs, the "preserve" directive only works in javascript sections. I have tested this in the script tag of an ejs file and formatting the document does NOT change the indentation of the console.log statement. This worked without changing any settings at all, actually. I simply installed the extension, saved this file as index.ejs and observed that vscode had the language mode set to html.
My test page
// These comments DON'T work because they aren't in a javascript section of the code
/* beautify preserve:start */
<h1><%= title %></h1>
/* beautify preserve:end */
<ul>
</ul>
<script>
function log() {
// Without the beautify comments, format document will move console.log
// to align with this
/* beautify preserve:start */
console.log('hello');
/* beautify preserve:end */
}
</script>
I'm trying to allow javascript in rich text editor inputs in my Umbraco setup. I'm using Umbraco 7.2. I've enabled the script tag in tinyMceConfig.config so the editor no longer eats my script tags. The problem now is that my content is cut off.
For example, in my RTE I put:
<p>before</p>
<script>
alert('blam');
</script>
<p>after</p>
This get's transformed by TinyMCE to:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]></script>
<p>after</p>
The problem is the value of Umbraco.Field("myRte") ends up being:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]
It seems related to CDATA. Does anyone else have javascript in RTE working in Umbraco 7?
A possible workaround would be to create a macro that would allow you to insert a script into the RTE. The macro would have a single Textarea parameter where you would paste in your script tag, and you would simply render the parameter value as raw Html. However, it might be a good idea to check that the input is valid html before you attempt to render it on the page.
If you use a razor macro the partial view could look like this:
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#{
var script = Model.MacroParameters["script"].ToString();
}
#if (!script.IsNullOrWhiteSpace())
{
#Html.ValidateHtml(script)
}
Where ValidateHtml is an extension method to the Mvc HtmlHelper:
public static IHtmlString ValidateHtml(this HtmlHelper helper, string input)
{
if (!string.IsNullOrEmpty(input))
{
var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(input);
if (htmlDoc.ParseErrors.Count() == 0)
{
return new MvcHtmlString(input);
}
}
return null;
}
The helper method uses the Html Agility Pack and I got the code from an answer posted to another SO question.
I've tested this on an Umbraco 7.2.1 install and it works fine even if you select the "Render in rich text editor and the grid" option.
My solution is not write direct script in editor, write it in a test.js file after that include
<script src="https:/....test.js></script>
In tiniMceConfig.config file (config folder)
validElements tag, add this
,script[type|src|language]
so it will look like this
<![CDATA[+a[id|style|rel
.....
,bdo,button,script[type|src|language]]]>
Test and work on Umbraco 4.7.x. I'm not test on umbraco 7
I am currently trying to create a borderless chrome app with a custom "control panel" for closing/minimizing/maximizing.
I have 3 divs (#minimize, #maximize, #close) that act as the buttons. I am trying to handle the clicks with javascript obviously. I have main.js included in my html header which has a the code I want.
As for closing the window my code looks like this:
document.querySelector('#close').onclick = function() {
window.close();
}
That works like a charm.
As for maximizing the window I tried:
document.querySelector('#maximize').onclick = function() {
window.maximize();
}
Which does not work. What did work was:
document.querySelector('#maximize').onclick = function() {
window.moveTo(0,0)
window.resizeTo(screen.width,screen.height);
}
I guess I am missing the obvious. window.hide() also does not work and it is also impossible to call other AppWindow functions such as getBounds. Does anyone know what I am doing wrong here?
The window object you are trying to manipulate is not Chrome's AppWindow. Use chrome.app.window.current().maximize() etc.