I'm using Tailwindcss for my scss files which introduces a new command #apply. But the problem is Sublime highlights this (presumably as an error or unrecognized syntax). How do I just turn off that single highlight so it won't appear as a glaring error for all my #apply rules?
Syntax highlighting in Sublime is driven by syntax definitions that allow Sublime to recognize the language and highlight it as appropriate. This is done either in a tmLanguage (older TextMate compatible) XML PLIST file or a sublime-syntax (new form with more capabilities) JSON file.
Essentially the syntax definition boils down to a list of regular expression rules and a description of how and when to apply them in order to recognize the language. The syntax that you're using is for SCSS which doesn't recognize the #apply directive and thus marks it as invalid.
So there's no simple setting or toggle that you can make that will stop this from happening and you have to instead do one of three things:
Modify the syntax definition to know that #apply is valid so that it doesn't highlight as invalid code
Modify your color scheme to not use obnoxious colors for invalid code in SCSS files.
Use an alternate syntax that either knows about #apply or doesn't mark code as invalid with a specific scope
The first of these is not particularly straight forward because it requires knowledge of how the #apply syntax works and how to write and modify syntax definitions in Sublime.
The second option is fairly simple to pull off; basically you would add a color scheme rule that matches the scope source.css invalid.illegal and color it like plain text instead of the colors that your color scheme is using. However it's not possible to target this only to the #apply type lines, so you would lose being told about other invalid code that's actually invalid.
For the third option, there is the Syntax Highlighting for Sass package, which also includes a syntax definition for SCSS which doesn't have a problem with the #apply directive:
This package is much newer than the one you're currently using so you may see some things visually change colors from what you're used to seeing since this syntax may use different scopes than the old package does for the same constructs; the guidelines for what scopes to use have evolved a lot in the last couple of years, for example.
You may also want to peek at the README for the package as well, which outlines things that may require additional setup if you're coming from the older package.
Related
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.
I have intellij 2017.1 and the Freemarker syntax is not recognized (and no intellisense) in my HTML when I use the inferior and superior sign for example <#if>
But it does recognize it when I use the new [#if]
When I tried to follow this link I did not have any option of choosing the Freemarker template language.
I can't just change all of the occurrences to the new way of writing it because it's a huge project.
Example for the following screenshot, it should give me the intellisense for <#if> but it does not
When I use the new styling (starting from 2.3.4) it does give me the intellisense
Any help?
The < and > of FreeMarker tags confuses the editor, so the solution is to use alternative syntax, instead of < use lt and instead of <= use <.
Reference: https://freemarker.apache.org/docs/app_faq.html#faq_alternative_syntax
I am trying to make a syntax highlighting for Vue.js. But it does not work with :attr, at all.
(?!v-for)(v-.*) and #[a-z].* works as well. But this does not work even like
\ automatically deleted after saving
Don't need anymore. Now it officialy supported in new phpstorm/webstorm.
I recently attended a user group meeting where the IntelliJ representative was demonstrating version 13.
He demonstrated how to switch the code completion view of a file. I do not exactly remember what the file extension of this particular file was, probably java.
The concept was that if the file is html with embedded javascript he could then switch the code completion between html and javascript with a shortcut. If he says treat the file as html then all code in file was treated for code completion purposes as html, and vice versa for javascript.
Does anybody know what shortcut he might have been using to enable the language switch?
Sounds like you may be referring to the IntelliLang feature. IntelliJ IDEA can be aware of other languages embedded within a file.
A simple example is in an HTML file that has CSS and JavaScript.
Notice when I am inside the HTML markup:
or inside an HTML element:
The code complete shows HTML completion options. However, when I am inside the style attribute, I get CSS code completion:
I also get CSS code completion if I am inside a <style> element. So even though I am in an HTML file, I see CSS code completion because of my location.
Same case with JavaScript. When I invoke code completion inside a <script> element, I get JavaScript completion, even though I am in an HTML file.
Anytime IntelliJ IDEA can determine that another embedded language is present, it provides, via IntelliLang, the appropriate syntax highlighting, error highlighting, and code completion. The same holds true for Java. Notice here that IDEA knows the method I am competing takes an SQL statement and therefore highlights the String value using SQL highlighting, and provides SQL code completion:
So even though I am in a .java file, I get SQL code completion. The reason is that IntelliLang comes pre-configured knowing the embedded language of some methods. You modify them, or add more, in File > Settings > [Project Settings] > Language Injections.
In addition, you can use an annotation to tell IntelliJ IDEA (as well as developers looking at the code) that a String must be valid in a particular language. For example, I can annotate a String field, variable, or parameter, to indicate it must be valid HTML:
Notice I get HTML syntax highlighting, HTML code completions, and the CSS color shows in the left gutter. If I annotate a method parameter, then any time I call the method, I get the appropriate syntax highlighting, code completion, and error/warning highlighting:
The #Language annotation is inside the annotations.jar that is contained in the redist directory inside the IntelliJ IDEA installation directory. It is also available in maven central, or IDEA will offer to attach it as a Library if you use the annotation without it being attached.
IntelliLang and the #Language annotation supports a large number of languages. Just use code Completion inside the quotes after typing #Language("") to see a list. (Inline search works in the list as well.) One of the most useful is Regexp. For example, if you have a method that expects the string passed in to be a valid Regular Expression, annotating it as such will give anyone that calls it Regex code completion and error highlighting if they are passing in an invalid Regex pattern. Even for developers using other IDEs it is useful as a form of documentation.
As for a shortcut to change the the language on the fly for code completion, the only thing I can think that you might be referring to is the "Inject Language" intention. If I am entering a String value, and I bring up the quick-fix/intention menu via Alt+Enter, I am given an option to inject a language:
If I select that, IntelliJ IDEA will ask me what language I want to use:
After making my selection, IntelliJ IDEA will give me temporary language injection (including code completion) for the selected language.
It also gives me an option to add the #Language annotation for permanent injection.
To the best of my knowledge (as a 10 year IntelliJ IDEA user) that is the only way to switch code completion language types. So hopefully that is what you are looking for. To me, IntelliLang is one of the coolest features in IntelliJ. (It actually started as a third party plug-in and JetBrains then absorbed it into the product.)
I'm using Doxygen for generating documentation in my programming projects. And while I find it quite easy to configure and use I can't seem to find a way to hide the source references it adds to the HTML output.
I'm using these two directives in the configuration file:
SOURCE_BROWSER = NO
VERBATIM_HEADERS = NO
But it only seems to hide the "Definition at line of file ."
What I want removed is what's in the red rectangle below:
Is there a directive to also hide the source code it references? (Other than doing the hack'ish thing and remove it with CSS or jQuery)
Make sure your setting on INLINE_SOURCES is set to NO.
Description from the manual - it looks like you have this YES
Setting the INLINE_SOURCES tag to YES will include the body of functions, classes and enums directly into the documentation.