Using Prettier for formatting .ejs files in VS Code - visual-studio-code

I want to use prettier for formatting my ejs files by adding custom rules.
Right now I am using files associations of html for ejs files.
I have added the following code in the settings.json file:
"files.associations": {
"*.ejs": "html"
},

Unfortunately Prettier does not currently support EJS. The list of supported languages are listed in their docs https://prettier.io/docs/en/index.html
However, they do support plugins so someone could add support https://prettier.io/docs/en/plugins.html

Very late to the party, I know, but I have just installed this https://marketplace.visualstudio.com/items?itemName=j69.ejs-beautify, added the necessary properties to the settings.JSON file and upon reload, it works beautifully.
EDIT
This now formats the EJS file, with all indentation correct, resulting in a much easier to read and edit EJS file.

Related

Turning off misidentified "Experimental decorators" linting errors in cshtml/Razor template files (VSCode)

I have a legacy system that uses Razor templating.
When I open *.cshtml files in VSCode, I get linting errors reported in VSCode even though it's ultimately valid JavaScript.
Here's an easy example: Whatever linter it is complains I'm using "experimental decorators". I'm not.
Experimental support for decorators is a feature that is subject to change in a future release.
Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.`
It's a Razor comment, which is completely legit here:
#* If MathJax wasn't successfully loaded from cdn1, use the second: *#
I have eslint installed. I use that to lint "real" JavaScript files. That, with the VSCode eslint extension, works perfectly. And I don't mind having JavaScript linting in html, but whatever's running doesn't seem to be eslint.
I tried essentially following the instructions in the error & creating a jsconfig.json file with an ignore in it, but this did not seem to work either.
{
"compilerOptions": {
"target": "es6"
},
"exclude": ["**/*.cshtml"]
}
Perhaps I borked the glob? (I tried a few -- just *.cshtml, ./**/*.cshtml).
At any rate, I have no idea what's doing this linting. I searched my settings file (in raw JSON) for javascript and js and didn't find an obvious culprit there.
What linter is this? How do I make it cshtml aware? Or how do I turn linting off for *cshtml (and in this way, at least, my question is different than this question) completely?
Answering my own question for now with a workaround/less than perfect solution...
Looks like the setting to kill it is:
"html.validate.scripts": false,
I would still prefer to have scripts validated in a Razor template-aware way.
How to edit settings directly
Add this text to settings by...
Typing ctrl-p (cmd-p on macOS),
Typing JSON, and
Selecting Preferences: Open Settings (JSON).
Paste the snippet into the file that was opened.
Note: These reported errors may have been complicated by my mapping *.cshtml to *.html for it to otherwise be treated as html:
"files.associations": {
"*.cshtml": "html"
},
I have not yet tried removing that mapping to see if the script validation would continue.
Hat-tip
Hat-tip to this answer, which mentioned:
You can disable JavaScript build-in validation with "javascript.validate.enable": false in settings.json and then enable either ESLint or JSHint extensions to fine-tune errors and validations.
Just needed to edit that to its html equivalent.

Disable linting for specific JSON file

In VSCode is there any way to disable linting for a specific JSON file? Here are some extra words to make StackOverflow happy.
It's not exactly what I wanted, but if you are willing to accept some limitations this kind of works:
Add the following to your settings:
"files.associations": {
"your_specific_file.json": "plain"
}
It's probably best to add it to Workspace or Folder settings rather than global settings. It eliminates linting errors for that file. The downsides are:
All files with that name in the workspace/folder have linting disabled.
You also lose syntax highlighting etc. VSCode treats it as plain text.

VS Code -- commenting .jsx syntax

I checked previous questions on SO here and here and VS Code's issues here and here.
I still don't know how I can comment jsx syntax in VS Code by cmd + /. I tried syntax JavaScript React and JavaScript Babel and add:
"files.associations": {
"*.js": "javascriptreact"
},
into user settings. Nothing helped. When I check Developer Tools, there are no error messages.
recording
If you have Babel ES6/ES7 plugin installed, disable it. Editor comments .jsx syntax by // instead of {/*. You see see the issue here.
It works for me, Remember Atom has this behavior, but VSCode looks a bit intelligent around this area.
I have no custom file associations defined. Also I am on the latest version of VsCode. Make sure you have no additional addins that takeover and change the behavior

Sublime Text 3 - SASS (scss) autocomplete variables from another files

I have two files:
variables.scss:
$my_var: #fff;
module.scss:
#import 'variables';
.body { background: $my_var;}
And Visual Studio provides me nice hints - when I'm typing $my in module.scss I see all variables from imported files that matches to $my.
Simple.
But Sublime Text 3 autocompletes only variables from module.scss, not from other imported files. I have installed All Autocomplete package, it doesn't work... Any ideas? It is important feature for me...
Question was answered here: Sass support for sublime text 3
From that link:
You can install Emmet (formerly Zen Coding), it is an extremely powerful tool to do css (and scss), example :
I type bi and press tab and it gives me : background-image: url(|); (with the | your cursor).
If you are interested, please take a look at this:
Emmet for sublime, and all the abbreviation (Emmet is very good with HTML too -- look what is happening when you type, for example, nav>ul>li...)
Now, how to make it works with scss:
The answer is here
You have to install the package sass-textmate-bundle for scss and do what I have wrote.
If you need sass and not scss, check this answer, especially the second response from Alexander Ekdahl
I had the same issue. This is what fixed the problem for me:
Have an active tab with SASS (SCSS) file and then go to Preferences > Settings - More > Syntax Specific - User
Paste this "word_separators": "./\\()\"':,.;<>~!##%^&*|+=[]{}`~?"
Save and profit.
Hope it helps. There is this github issue if you want to have more information.
I got this working using the AllAutocomplete plugin
The biggest drawback to using this plugin is that the file that it reads the variables from has to be open. Unfortunately I haven't found any better way to achieve this.
Sublime text 3 support?
This plugin didn't work for me out of the box with ST3. I had to make a small modification to the user settings file to get it to work.
"word_separators": "./\\()\"':,.;<>~!##%^&*|+=[]{}`~?",
Adding this to your user sublime settings file should do the trick. Here is the github issue where this originated from.
https://github.com/alienhard/SublimeAllAutocomplete/issues/18

How do I make Notepad++ show autocomplete when working on .less files?

Is there a way to make Notepad++ autocomplete the CSS properties when working with LESS, like it does when working with CSS files?
Notepad++ supports autocomplete via the xml files in its ./plugins/API directory.
Download your LESS.xml or Here and add it to the directory, or better follow the instructions in the page.