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>
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'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
I'm using JSDoc to document my javascript API.
I have an #example where I exhibit a minimized loader script (similar to the Google Analytics script). The loader script loads additional javascript from https://<server>/myProduct/lib/script.js.
My JSDoc documentation is bundled with myProduct, so there are aways /myProduct/lib/script.js and /myProduct/docs/ side-by-side. However, myProduct can be hosted by my customers anywhere, so I don't know what the <server> is.
I would like to be able to use document.location.href to detect current browser URL, and display a working loader script in my #example, so that customer can simply copy & paste a working script from documentation without having to manually edit the <server> part.
My question is: Does JSDoc offer any means to dynamically inject content into #example?
I could just manually edit the JSDoc output and include some custom javascript manually, which replaces <server> with the actual current server on run-time. However, this would be tedious to do every time my documentation updates.
No, JsDoc doesn't provide for injecting external content, and while it is certainly possible to create a JsDoc plugin to include external content during document generation, I don't think this would get you where you need to be.
I think the simplest answer would be to post-process the output of JsDoc to add a simple script, like
<script>
// retrieve the hostname from the current url.
const getServiceHostName = () =>
document.location.href.replace(/http:\/\/([\/]+)\/.+$/, '$1');
// replace the content of the span#service-host with the current hostname.
document.onload = function () {
document.getElementById("service-host").textContent=getServiceHostName();
};
</script>
to your html files just above the </body> tag.
Then, in the example content, insert a <span id="service-host"></span> where you'd like the service hostname to appear.
Another approach might be to take advantage of the fact that JsDoc passes the content attached to the #description tag directly into the html output.
So, this appears to do the expected:
/**
* Hostname: "<span id="service-host">hostname</span>"
*
* <script src="https://code.jquery.com/jquery-3.6.0.min.js"
* integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
* crossorigin="anonymous"></script>
*
* <script>
* $(document).ready(function() {
* $("#service-host").html(document.location.href);
* });
* </script>
*
* #name How-To-Monkey-Patch-JsDoc
*
*/
Note that the content of #example is wrapped in <pre><code>...</code></pre> in the html output which will definitely cause you problems, but it should be easy to post-process the html inline using the code above, by adding some recognizable token (perhaps [[HOSTNAME]]) into the example content and on document load, replace it with the desired value.
Please note also that this approach has the possibility of opening your docs to security issues, which is why I'd use the first solution above.
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
When I generate CSS or JavaScript files using PHP I like to use .js.php or .css.php file extensions. so that I know what's going on.
Is there a way of associating these "compound" file extensions to their respective languages?
I don't use NetBeans or PHP, but the following trick helped me in a similar setting:
<?php if(0) { ?><script><?php } ?>
# code goes here
<?php if(0) { ?></script><?php } ?>
Simply surround the js code with <script> or <style> tags that don't get rendered. No need to configure any special associations, assuming the editor is smart enough about HTML.
What I usually do is condense such "compound" extensions into one, following the tradition of condensing .tar.gz into .tgz.