VSCode / Auto Close in *.nunjucks - html

Is there a way to activate the html auto closing in *.nunjucks-files? It only works in *.html-files for me. I found no plugin for this.

I've dealt with this issue too. The solution I found was downloading this extension Auto Close Tag. You can configure it's "auto-close-tag.activationOnLanguage" setting to include any language, such as "nunjucks".
It's my understanding that you need to also download a language support extension for Nunjucks. This is an extension that allows you to pick Nunjucks in Select Language Mode in VSCode. Personally, I like this one: Nunjucks by ronnidc, but you can use the one that you like.
The only caveat is that the name for Nunjucks in VSCode (the one you see when you select language mode) needs to match up with the name you have in the "auto-close-tag.activationOnLanguage" settings. For me it's "nunjucks"; case-sensitive.

Related

Can Visual Studio Code use Emmet completion in razor .cshtml files

I'm using Visual Studio Code (1.17.1, on MacOS 10.13 AND Windows 10) developing an asp.net core mvc web app using razor templating.
Visual Studio Code supports Emmet (https://code.visualstudio.com/docs/editor/emmet)
My issue is that Emmet works correctly in HTML files, but will not work in razor CSHTML files.
I've found:
To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language ids for both sides of the mapping.
https://code.visualstudio.com/docs/editor/emmet
but it doesn't indicate where to find a list of "language ids". I tried searching for it, but you can imagine what happens when you search for programming language id!
Is there a way to tell Emmet in VS Code to treat cshtml files as html files? Is there any other way to get this to work (besides renaming the files, which is another solution out there)?
According to this link, the corresponding language for *.cshtml files is razor, thus you need to specify it in the emmet mappings as follows:
"emmet.includeLanguages": {
"razor": "html"
}
updated:
Press Ctrl+K than M (Ctrl+K,M) than select highlighter from the dropdownlist you want this is a common shortcut. very useful. even works for any file types. ie. create a new file and code some xml or what language you want than Ctrl+K,M you can specify/override ide hilighter on the fly. very useful shortcut. try it. you won't forget Ctrl+K,M. one of most useful hotkey combination I ever use in vscode. by this way code-completion wakes up and works as language you selected.
in vscode > settings.json
I added the related codes mentionel above. emmet worked for cshtml files.
"emmet.includeLanguages": {
"razor":"html",
"aspnetcorerazor":"html"
}

Custom code snippet for WebStorm and PhpStorm

I use custom code snippet for Sublime Text like custom comments, function, reusable block code, CDN and more.. but I could not do that in WebStorm and PhpStorm IDE.
Here is my building block code snippet (comments) for Sublime Text:
/*============================
comments
============================*/
and this code blocks for HTML5 comments
<!-----------------------
comments
----------------------->
Moreover I'm new user for JetBrains software. Can I use custom code snippet above in JetBrains software ?
It's called Live Templates in JetBrains IDEs.
Available at Settings/Preferences | Editor | Live Templates.
You can use existing Live Templates as is, alter them to your needs or create your own.
Creating own is better be done in own group -- they will be stored in separate config file so easier to share, no possible conflicts with built-in ones (easier to update between versions etc.). It also makes perfect sense to use separate group per language -- the same abbreviation can be used for different languages/context but abbreviation within the same group must be unique.
BTW -- I'd say -- do not edit built-ins at all -- just disable specific built-in template and create your own version of it in separate group. This way you can always see what fix/change devs have made in new IDE version etc.
Full official tutorial/how-to is available here: https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm
You may also be interested in other articles:
https://confluence.jetbrains.com/display/PhpStorm/Tutorials
in particular (since you have used Sublime in the past): https://confluence.jetbrains.com/display/PhpStorm/PhpStorm+for+Users+of+Text+Editors
Finally I get a tips ! PhpStorm allows you to create your own live templates (code snippets) to optimise your workflows.
Open the settings dialog and head into Editor | Live Templates, you can see the available live templates grouped by language. To add a new template click the + (plus) button and select Live Template. Specify the abbreviation (the short bit of text you type that will be expanded to the full code snippet) and a description.
Then provide the full code snippet in the Template text field. You can include variables in the template in the format $<variable name>$, which will allow you to provide values when the template is expanded. PhpStorm recognises $END$ as a special variable indicating the final position of the cursor after the template has been expanded and values have been provided for all variables.
Next click the Define warning text to specify which language the template is for and optionally the context it is available in.
Now the template is ready to be used. Open a file and type the abbreviation that was specified earlier, then hit Tab to expand the template. The cursor will be positioned on the first variable, provide a value then hit Tab to keep moving through all available variables. The final position of the cursor will be the location of the $END$ variable.
Further Reading
Creating & Editing Live Templates
I don't think you can do this, however you can add custom tags in Settings > Editor > TODO.
//TODO & //FIXME are already implemented.
But this custom tags are not working for HTML.
Maybe you can find an extension to do that in Settings > Plugins.

Visual studio code comment in HTML files

I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.
In JS or CSS files the key bindings work just fine and produce the expected result.
So how can i get the proper type of comments in HTML files?
Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.
I've just installing VSCode 1.1.1 and try to put a comment in an new html file
To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.
Hope that help you
If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:
"comment HTML": {
"prefix": "chtml",
"body": ["<!-- $1 -->"],
"description": "Comment HTML line"
}
You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}
Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.
Maybe this is a workarround, but it works excellent for me. Hope it helps!
https://code.visualstudio.com/docs/customization/userdefinedsnippets
For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / )
(commenting them with {% comment %})
List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):
Hugo Language and Syntax Support
Djaneiro
Nunjucks
Tornado
Sublime Babel
Babel
Twig
Django by Baptiste Darthenay (v1.0.0)
(Feel free to edit this answer and add yours)
You may need to restart code after disabling your extension (I did).
In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut
This will open two files beside each other like in the screenshot below:
here you can change or create your own shortcuts.
Like I just replaced Ctrl+KU to Ctrl+/
Hope this will work for you !!
For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)
For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.
Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.
Chances are one of the extensions in the bundle of that extension pack is causing the issue
Click (Ctrl + K C) to comment the html.
Click (Ctrl + K U) to uncomment html.
For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.
You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.

Disable rule in sonar

I want to disable a rule from Sonar so it doesn't show the results in the web page.
In my case I want to hide (or not capture) the results about trailing comments.
Is it posible to configure it somewhere?
Thanks.
The right way to do is to put something like this on sonar-project.properties file per project:
sonar.issue.ignore.multicriteria=e1,e2
# tab characters should not be used
sonar.issue.ignore.multicriteria.e1.ruleKey=squid:S00105
sonar.issue.ignore.multicriteria.e1.resourceKey=**/*.java
# right curly braces should be on a new line
sonar.issue.ignore.multicriteria.e2.ruleKey=squid:RightCurlyBraceStartLineCheck
sonar.issue.ignore.multicriteria.e2.resourceKey=**/*.java
There are docs here on how to ignore specific rules for specific files, which links to an example of how to search for specific rules, by language. This page on baeldung goes into additional detail better than the docs
You have to remove this rule in the quality profile that you are using to analyse your project.
Please refer to the documentation that describes all this: Quality Profiles in Sonar.
In web interface for particular rule just press Deactivate button:
Adding to #Vladmir's answer in a new answer as I am not able to comment.
You can not modify the built-in profiles. If you don't see the option of Deactivate, then copy the profile and set it as default. Now you will see the options to activate/deactivate.
An additional note for people ending up on this thread. I tested this quite a lot and finally found that setting common rules (anything that starts with "common-xxxx") from scanner side (pom, command line etc) will be ignored and it wont work. The language specific rules can be passed line arguments and thats why the "squid:S00105" rule is getting ignored correctly. Here is the issue link on the SonarQube JIRA board and it says that it "wont be fixed".
https://jira.sonarsource.com/browse/SONAR-8230
Here is the link to my answer: https://stackoverflow.com/a/60570763/1766402
on how to set it from UI.
You can't deactivate sonar way rules in a built-in profile. so you have to create your own profile by going to the Quality Profile section and choosing your desired language then click on the config icon the select copy with your favorite name and then you can change any rules in that
and then you can deactivate your considered rules
For Java, You can get sonarlint/sonarqube to ignore false-positives by just commenting //NOSONAR at the end of your code statement. As mentioned in my answer here

Syntax coloring of html files in eclipse

We use a custom cgi solution, which makes use of %-tags in html-files:
<% keyword some.stuff() %>
Does anyone know an easy way to get syntax coloring in eclipse for these tags?
HTML syntax coloring settings are in:
Preferences-Web-HTML files-Syntax coloring
Just change and apply your changes, and take a look at the preview window below to see what part is changed.
The reason I don't list the specific location of the setting you want, is that I cannot figure out what kind of code you are writing in your project. HTML files can contain a variety type of contents, like java code in .jsp and javascript, so you may have to check other syntax coloring settings related to the type of code you use. For example, .jsp syntax coloring settings are in:
Preferences-Web-JSP files-Syntax coloring
But the effect can show in a html file.
You can search syntax coloring in Eclipse Preferences window to get a full list of such settings.
My best bet would be Eclipse Colorer plug-in. It is a very elegant plugin based on extensive Colorer library.