I'm using Prettier with pretty-quick and do not agree with how it formats HTML. I know I can exclude by globs but can I exclude by language so that the HTML in my Vue files are untouched?
No. It's not possible. HTML is considered the "main language" of a .vue file, JS and CSS "embedded". You can only disable formatting for embedded languages by the --embedded-language-formatting off option. As for template tags, the only way to keep them unformatted is to put <!--prettier-ignore--> in front of each of them.
Related
I need to add a license header into all .vue files in the project. What is the proper placement for it and what tags should be used?
Should it be with <!-- --> tags or /* */ ?
Should it be in the beginning of the file or inside the script part?
The Vue SFC Specification states that .vue files use HTML-like syntax, and top-level comments must have the HTML comment syntax too (<!-- -->).
A *.vue file is a custom file format that uses HTML-like syntax to describe a Vue component.
[...]
For top-level comments, use HTML comment syntax: <!-- comment contents here -->
I think license headers meant to be inserted at the beginning of the file so developers can see it early after opening it, so I would place it there.
(Though I would suggest to rethink whether you really need to do this.)
I am using custom seperators/tags for template variables in HTML code. My tags are "{[{" "}]}". Can I make IntelliJ IDEA (or WebStorm) ignore completely what is inbetween them? If it matters, it is Go template language with custom tags.
Example :
<div title="{[{.T.T "error"}]}!"></div>
Gets marked as error because of the quotes inside the quotes. It also disables the ability for proper auto indentation or code formatting.
Another example, in this case JavaScript in an HTML document :
<script>
{[{if .Data.User}]}
var userData = {[{.Data.User}]};
{[{end}]}
</script>
This marks the quotes themselves as error.
I don't want IntelliJ to check the template code, just ignoring everything between the brackets would be enough.
No, you can't. IntelliJ IDEA builds a complete parse tree for the entire file, and it is not able to ignore arbitrary chunks of the file.
What you can do is either write a plugin that will be able to parse your template syntax, or change the syntax you use so that it matches more closely an existing template library already supported by IntelliJ IDEA.
I have no preference so far as to which markdown renderer to use (although I'm currently using MMMarkdown)
I would like to style the actual markdown (leaving markdown syntax in place) rather than render the markdown to a separate pane/window.
How should I go about achieving this?
For example:
# Heading -> should display as a heading but with the # still there, not as <h1>Heading</h1>
Thanks
PEG Markdown Highlight does everything that I needed. It also provides a nice style template format for switching between markdown syntax styles.
I'm using IntelliJ with the handlebars plugin. One of the nice things about this plugin is the code assist. However, the only way to get this functionality is by assigning html file type to handlebars, so I lose all the features of having .html files associated with HTML default for IJ. Is there any way to have html files associated to both the handlebars AND HTML?
Handlebars is a template language. Currently IntelliJ doesn't support injection of template languages. It should help you. Please vote for http://youtrack.jetbrains.com/issue/IDEA-106449
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.