VS Code - enable autoClosingTags option in .vue files - vue.js

The html.autoClosingTags option in VS code lets me type '' - and voila, '' is now inserted with the cursor inside those two tags. But this only works in .html files.
I´m working on a vue project, and would like this feature to also be available in my .vue files (and any other files with html content actually).
Is this possible?

Use the Auto Close Tag extension:
This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.
Features
Automatically add closing tag when you type in the closing bracket of the opening tag
After closing tag is inserted, the cursor is between the opening and closing tag
Set the tag list that would not be auto closed
Automatically close self-closing tag
Support auto close tag as Sublime Text 3
Use Keyboard Shortcut or Command Palette to add close tag manually

Related

Edit structure tool for mustache file in Intellij IDEA

Having opened the Intellij IDEA mustash file, I want to open its structure (Structure tool). And the Handlebars tab is always selected first, not HTML tab.
This is very annoying.
Is there a way to make HTML tab autoselected?
1

IntelliJ/PyCharm - where do I change what happens when I double click a file?

I want PyCharm (IntelliJ) to display HTML-files in a browser, not open them in an editor, when I double click them in the project browser. Googling for a solution didn't return anything useful. Is this possible? How?
(This request also applies to PNG and some other filetypes but HTML is my main need at the moment)
Both IDEA and PyCharm are editors, and they will default to editing; that is, they will open the HTML file and allow you to edit it instead of displaying any kind of web page.
If you want to see the rendered HTML, you can hover to the top right corner and select one of the browsers recognized by IntelliJ and installed on your system to open it in a browser then. Be aware that this may not render things correctly if you rely on a language-specific functionality (like JSP, Jinja2 templates or Less) to generate code on your behalf.

In Cloud9 IDE how to beautify HTML code inside Javascript strings?

In Cloud9 IDE you can automatically format HTML codes, or Javascript codes. But once in a while you need to do the formatting not compatible with the containing file type. For example, when you are authoring a web component widget, you need to provide a template, which is HTML structures, in the form of a string variable residing inside a Javascript file. Currently the IDE simply ignore this patch of code, treating it as plain text strings. How can I format the HTMLs in this case? Thanks.
The IDE only supports one file format per file, so either Javascript or HTML or PHP, etc. Templating languages like Handlebars, Blade, or others that combine HTML with other languages are not supported for auto-formatting.
If you'd like to format these files, you'll need to do one of the following:
Use a CLI utility that supports the file type you're trying to cleanup.
Copy/paste the HTML into a .html file, format it there, then paste it back into your original file.
I'd advise you use #1 because #2 doesn't sound fun. The CLI utility you install/use will depend on what types of files you're actually trying to beautify.

How to Disable the Insertion of semicolon in PhpStorm Upon Code Completion

When writing a CSS property the code-completion feature of PhpStorm automatically inserts a semicolon at the end of the line. I find that annoying when I map grid areas and other long-value properties..
Is there an option to prevent code-completion from auto inserting that semicolon?
Try changing the Live Template settings (Editor > Live Templates) and open the 'Zen CSS' section.
For each abbreviation there is a template text,
here you can remove the semicolons for the abbreviations you have this issue with.
As far as I know there is no blanket option to remove all semicolons in the live templates build in.
Also, as far as I can see Zen CSS templates are used for regular CSS files but I have no idea if Zen CSS is just regular CSS or a specific language/style.

WebStorm Smarty highlighting

Is there an way to make WebStorm highlight Smarty templates? Either through plugin or some other means?
Also note, I need this for WebStorm, not PhpStorm or some other version; I don't need autocomplete or anything else -- just highlights.
Files have .tpl extension and so far I'm treating them as HTML files and I am looking for options to increase code readability with coloring.
I have tried following based on the comments:
However, resulting .tpl file still looks like