I have a css file in which there's a selector for class App-logo
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 75px;
}
The file is in resources/public directory.
In the resources directory, there's a file called testform.vtl (a velocity file), in which the following lines appear:
<div class="App-header" >
<img src="favicon.png" class="App-logo pull-left" alt="logo" />
<h2>Data Insight - Known Issues Console </h2>
</div>
When I run code inspection in Intellij, it gives me the warning Selector app-logo is never used. Why is this? Is there a configuration that I can use in Intellij to cause it to look at these vtl files (if this is actually the problem)?
The IDE only looks for CSS selector usages in stylesheets and HTML files/fragments; it won't inspect plain text files and files of unknown type. I've just checked - CSS usages are correctly found in Velocity templates:
Make sure to add *.vtl pattern to Velocity Template file type in Settings | Editor | File Types
Related
I had this problem:
How to preserve empty lines when formatting .vue files in VScode?
I solved it by telling VScode (bottom right corner) that a .vue file should be formatted as a .html file.
That fixed the formatting issue, but I lost syntax highlighting for vue attributes in the html tags.
I need to get VScode to format file-type .vue as .html, while preserving syntax highlighting.
How can that be done?
Syntax highlighting for .vue comes from extensions.
I tried Vetur extension and vue-beautify extension. They highlighted the syntax but didn't format the .vue file correctly (for me at least)
In tried to add the following line in the VScode's global settings.json
{
"[vue]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
But it didn't work for both of them.
Vetur just ignored the setting and formatted the .vue file following Prettier rules. (which you can't change in Vetur settings)
While with vue-beautify threw that there's no formatter installed for .vue files. Although I explicitly specified that I want to use the build in HTML formatter.
How can I force VScode to use the built in HTML formatter for .vue files, while still using all the rest of the features that "Vetur" or "vue-beautify" provide?
OR
How can I tell "Vetur" or "vue-beautify" extensions' "Prettier-html" module to preserve empty newlines?
UPDATE:
- tried "unibeautify".. but no support for "preserve-max-newlines" feature for vue
- and "beautify" - no support for vue at all.
- and "pretier" - no support for "preserve-max-newlines" for vue
Vetur currently doesn't support switching to the built-in HTML formatter, but you could request that as a new feature in Vetur's issues.
Since the root problem seems to be the collapsing of newlines, I propose different solutions that address only that problem:
Switch Vetur's HTML formatter to js-beautify-html, and configure it to preserve newlines
Surround the newlines with ignore-comments
Disable Vetur's HTML formatting
Option 1: Use js-beautify-html
In VS Code preferences, set Vetur's HTML formatter to js-beautify-html:
Then in settings.json (Choose Preferences: Open settings (JSON) from command palette), add the JSON block shown below. The key is to set max_preserve_newlines to a high number that allows your desired number of newlines.
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"max_preserve_newlines": 10000, // Maximum number of line breaks to be preserved in one chunk (0 disables)
"preserve_newlines": true // Whether existing line breaks before elements should be preserved
}
}
Option 2: Use ignore-comments
The advantages of ignore-comments:
Disables formatter/linter while also documenting intentional whitespace, which is important for readers/maintainers
Can be easily enabled/disabled per section of code
Vetur's default HTML formatter is prettyhtml, which internally uses prettier, so you could utilize Prettier's ignore-comments:
<div>
<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->
<div>foo</div>
<div>bar</div>
</div>
If you switch the HTML formatter to js-beautify-html, use the corresponding ignore-comments:
<div>
<!-- beautify ignore:start -->
<!-- beautify ignore:end -->
<div>foo</div>
<div>bar</div>
</div>
Option 3: Disable Vetur's HTML formatting
Setting Vetur's HTML formatter to none in settings would disable the formatter for HTML sections in *.vue files. While this resolves the unwanted formatting of collapsing newlines, it has the obvious side effect of disabling all formatting in Vue templates, which might be acceptable for your usage.
To tell VScode to format file-type A as file-type B
open your file in vscode
Ctrl+Shift+P (or View -> Command Palette from the menu)
and then type Change Language Mode
type the name of programming language (for exemple sql,C++ ...)
I get the same problem with *.html files as vue-html, in my VueJS project, I use separate files for html, ts and css and I configure my Visual Studio Code to detect *.html files as vue-html 'language type' from Vetur :
// VSCode user settings.json
"files.associations": {
"*.html": "vue-html"
},
So same as you, format doesn't work if langage is vue-html or Vue so I have to change from vue-html
to HTML langage to make format works but I loose the syntax highlighting.
To solve the problem here is my solution :
Install Beautify extension on VSCode
Add language type under the file type to match the same 'formatter style' :
// VSCode user settings.json
"beautify.language": {
"css": [
"css",
"scss" // Format scss laguage type as beautify do for css files
],
"html": [
"htm",
"html",
// this line below fix my issue
"vue-html", // Format my .html files configured as vue-html files as beautify do for HTML language
"vue" // Exemple to Format Vue langage as HTML files
]
},
Check Beautify docs for more infos about this params
I think it's exactly what you mean by "How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?"
I keep syntax highlighting for Vue template because my file is still considered as vue-html and I get the format style as an HTML file.
I'm trying to make use of the #extend of sass so that I don't mix markup and html together. As explained in this article.
In short, instead of writing
<div class="alert alert-primary>This is an alert!</div>
You'd instead write something like
<div class="banner">This is an alert!</div>
.banner {
#extend .alert;
#extend .alert-primary;
}
Such that styling and content stay nicely separated.
The problem: When using this with webpack (sass-loader) and components (e.g. Vue.js or Angular), I run into a problem where including a bootstrap partial will now result in the complete compilation of the entire bootstrap file into css.
This results into a class .btn[data-v-3614b62c] and another .btn[data-v-45ac961c] etc. for every component that uses the partial bootstrap/scss/_buttons.scss and that for all classes defined in that partial.
Even if I don't use it.
In the long run, this will be detrimental for the application since its size will increase rapidly and I image the browser will slow down with that many css classes to parse.
The question(s): How do I make sure sass doesn't duplicate the entire imported partial?
Can I enable some kind of tree shaking where it only includes the classes I use?
Do I have to change my file structure so that sass understands I only need certain classes inside the partial rather than everything?
Code example
This is a vue component using bootstrap
<template>
<form class="form">
<input type="text" class="input">
<button class="button-submit">Send</button>
<button class="button-cancel">Cancel</button>
</form>
</template>
<style lang="scss" scoped>
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
#import "node_modules/bootstrap/scss/root";
#import "node_modules/bootstrap/scss/buttons";
.form {
.button-submit {
#extend .btn;
#extend .btn-primary;
}
.button-cancel {
#extend .btn;
#extend .btn-danger;
}
}
</style>
This will result in the entire partial _buttons.scss to be compiled into css instead of only .form .button-submit and .form .button-cancel.
Live example
https://codesandbox.io/embed/musing-feynman-8w2kx.
To see the problem I have:
Right click on the example to the right and click Inspect
In the Elements tab, navigate to #document > html > head
At the bottom you'll have several style elements
Two of them will contain all the button css where only the [data-v-######] attribute is different and at the end are my couple of lines code.
Note that the same happens for production builds. The css is then simply bundled up in a single file, but duplicates are still around.
If you are #importing the same CSS rules into different components, then you will get the same rules duplicated across all modules. That's just how it works.
You should only be #importing modules that define abstract declarations like variables, mixins, functions, etc, not actual styles.
The only way you can de-duplicate the styles globally is if you use something like mini-css-extract-plugin to extract and combine all the CSS into a single file and then run it through something like cssnano which will discard duplicate rules (although with scoped CSS, this probably won't work).
Modules are typically built independently of other modules and there isn't a simple way to know if a rule has been declared already by a previous module. In development you may be using style-loader which operates on a per-module basis and injects styles into the webpage on demand; there's just no way it can work out which styles should be injected in case some particular style has already been injected by another component.
It just gets messy; keep it simple by not duplicating styles in the first place.
If you really want to use #extend, then make a separate .scss file which is the only module that #imports the bootstrap styles, and define all your extensions in there.
Having a trouble placing a background image in one of simple Vue.js project that I'm currently doing!
I've tried all the possible solutions that I could come up with. But no luck. That's why I'm here to have experts' help like you!
Having created the hero section, I tried to add a background image to that. Yes, the background image is imported to the right folder and the location of the folder is correctly written as well. However, once the compiler compiled the program, I get crickets! Nothing!
Here's the Sass code
.hero
background: url ('..../assets/clouds.jpg')
background-size: cover
background-color:#ffffff
And here's the HTML code for your reference
<div class = "home">
<section class="hero">
<div class="hero-body">
<div class=" container">
<h1 class="title"> {{heading}} </h1>
<div class="is-two-thids column is-paddingless">
<h2 class="subtitile is-4"> {{subheading}} </h2>
</div>
<a class="button is-large is-primary" id ="learn"> Learn More</a>
</div>
</div>
</section>
</div>
The funny thing is there's no error message shown. That's right, zero error messages.
This is the final product I received
For most of you out there, this should be a pretty simple fix. So, can you help this beginner out from this agony!
Thank you!
Edit: Got the following error message after adapting the change
background: url ('#/assets/clouds.jpg')
Edit 2: Sass file and its location.
It's location is src/router/mq.saas
Edit 3: Got the required one
Your issue is that ..../ is not a valid relative-path traversal symbol. Only ./ (current directory) or ../ (parent directory) are valid.
Assuming you've built the app with Vue CLI (v3), you should be able to use
background: url ('#/assets/clouds.jpg')
where # is configured as an alias for <projectRoot>/src.
See https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
Alternately, construct a valid relative path from your Sass file / Vue component.
For example, say you're in src/mq.sass and want to reference src/assets/clouds.jpg, the relative path would be
background: url('./assets/clouds.jpg')
I'm writing an IntelliJ plugin, which should recognize rythm engine code in .html files.
Rythm is a template engine an the syntax starts with #
I've already done the custom language plugin tutorial from the JetBrains doc.
So far I got Syntax Highlighting partially working for rythm.
If I would copy and paste the code below in a .rythm file everything would be well recognized. But then HTML wouldn't be recognized.
I tried the language injection from the IntelliLang plugin but now it recognizes the rythm code only between HTML tags.
In this example #i18n and #something would be recognized as rythm. But #rythmCode is still unhighlighted.
Any ideas how I can get it working even if #rythmCode is outside of HTML tags?
#rythmCode {
<li>
#i18n("xxx")
</li>
<li>
#something.getSomething():#something.getSomething()
</li>
}
#rythmCode() {
<div class="row">
<div class="col-md-6 word-wrap">
#something.getSomething(): #something.getSomething()
</div>
<div class="col-md-6 align-right">`
edit:
Finally it works. Now I want to implement a formatter. How can I implement a HTML formatter for the HTML part and a Rythm formatter for the Rythm part?
edit 2:
HTML formatter works. Now I need a bit help with the Rythm Formatting. I think something is wrong with my .bnf file.
As we also missed Rythm template engine support in IntelliJ we worked on a plugin which now supports:
syntax highlighting
brace matcher
code completion for basic rythm keywords (e.g. #import, ...)
and HTML formatting (autoformatting in IntelliJ will no longer destroy templates)
Its not jet available in the Jetbrains plugin repo (but will be in the near future) but you can just download the jar and install the plugin from disk.
Also its open source: Rythm Engine Detector R.E.D GitHub
I have deployed fancybox v2.0.4 on my RoR v3.0.3 web app to create a photo gallery. I've been able to get fancy box to product a large image when a thumbnail is clicked, but am having several issues with the appearance and behavior not working as expected.
1st issue - I can't seem to get the fancybox buttons to appear. I've gone into the jquery.fancybox-buttons.css and changed the paths for the various "background-image: url" to point to the fancybox folder in the public/images folder (standard RoR). Here is an example:
background-image: url('./images/fancybox/fancybox_buttons.png');
My first suspicion is that I am referencing this incorrectly, but I've tried every relative path iteration I can think of.
2nd issue - The default div that shows fancybox image keeps getting tucked behind the div that has the image_tags in it. I have changed the z-index in the fancybox css files to be greater than the z-index in the other divs on the page. I can't seem to change this at all. Here is the default fancybox div I am referring to:
<div class="fancybox-wrap fancybox-default fancybox-opened" style="display: block; overflow-x: visible; overflow-y: visible; height: auto; width: 486px; position: fixed; top: 20px; left: 468px; ">....</div>
3rd issue - I am unable to get any of the drop shadows or other "stock" css effects to appear. I have checked that the source code is pointing to the appropriate css files. I have placed all the fancybox css files in the standard RoR stylesheets folder and all the .js files in the standard javascript folder. In my Application.html.erb file I have explicitly called for these javascript libraries and stylesheets inside my tags.
OK, I found the problems that were preventing this from working:
The path for the fancybox_sprite.png and all the other urls in the jquery.fancybox.css file need to be as follows (assuming you are placing the images in the default "public/images" folder in a standard RoR application:
background-image: url('/images/fancybox_sprite.png');
I had conflicting jquery-.min.js files in the javascripts folder.
Case closed.