I am using Visual Studio Code with Classic ASP project. In Sublime Text, Emmet was working. I am having trouble trying to get Emmet working in VS Code.
Does anyone know the settings to get VS Code + Classic ASP pages working with Emmet?
According to Emmet in VSCode - Emmet abbreviations in other file types
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 identifiers for both sides of the mapping.
For example:
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade"
}
There is a great extension at : https://www.itnota.com/making-visual-studio-code-colorize-classic-asp-code/
To add Classic ASP pages (*.asp) to use Emmet, you need to add the following setting changes. Settings are accessed via File > Preferences > Settings menu item. (Cntl + comma)
"files.associations": {
"*.asp": "html"
},
OR
"emmet.includeLanguages": {
"asp": "html"
}
Using emmet.includeLanguages did not work as Classic ASP is not a recognized Included Language.
Best solution is similar to #ravi-ram above, but set:
"files.associations": {
"*.asp": "asp"
},
"emmet.includeLanguages": {
"asp": "html"
}
This way you get emmet completion for both ASP and HTML within .asp files
Related
I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:
As I am extremely new to programming I might just be overlooking some obvious issue so please bare with me.
I wanted to use custom snippets to extend the already existing ones to speed up my future workflow.
I created a snippets.json file, which contains this code
{
"html": {
"snippets": {
"page": "header>h1^main+footer{${0:©}}",
"a:link": "a[href='http://${0}']"
}
},
"css": {
"snippets": {}
}
}
when typing page, then pressing tab (or ctrl+e) in my HTML file, it doesn't output the Markdown, instead it just prints header>h1^main+footer{}
I put the a:link in there because it's a snippet that already exists within Emmet to test if the issue was with my custom snippets file.
And yes, the issue persists, instead of giving me the Markdown it only says a[href='http://']
Inside the Atom settings are 2 checkboxes:
Format Line Breaks
Use Emmet Comments
I have checked and unchecked both individually and together, nothing has resolved the Problem.
Settings inside of Atom
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
I am using Visual Studio Code (on a Mac) to write AngularJS style HTML. When I insert an inline expression for a CSS value, I get the annoying red Intellisense error, as shown in the screenshot below. Also, please note that I have disabled all extensions to ensure that none were the cause of my issue.
The main question is this: how do I disable the CSS errors in VSCode for Mac?
Thanks for any suggestions!
open your settings.json file by cmd+shift+p OR crl+shift+p and typing setting.json
in that file add this line
"html.validate.styles": false
VSCode is still very new to me, but after some tinkering I found an option that disables all CSS validation rules. I set the value to false and the errors are now longer showing up. The setting in your settings.json file should appear as as follows:
{
"folders": [
{
"path": "/Users/Paulie/Desktop/AngularPractice"
}
],
"settings": {
"css.validate": false
}
}
I'd like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?
It's working fine with JavaScript but strangely not with CSS.
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..
an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally
Wasted an hour finding the best option.
Just putting it together, for easy reading and choosing one them.
Notes:
CSS and SASS/SCSS/LESS are all related
HTML, Javascript, Typescript, JSON - VS code is already formatting
CSS and related - VS code is not formatting as of today
Options:
To format css/sass/scss/less:
Prettier
All css related supported, and not others, I choose this, it works great.
To format JavaScript/TypeScript/CSS:
Beautify css/sass/scss/less
but, already JS, TS are supported by VS code
To format JS, CSS, HTML, JSON file (wraps js-beautify)
JS-CSS-HTML Formatter
but, already JS, HTML, JSON are supported by VS code
To format CSS
CSS Formatter
but, only CSS supported, not all the related - not maintained 6+ months
To format:
Press Alt + Shift + F in VS Code, after installing Prettier.
I recommend using Prettier as it's very extensible but still works perfectly out of the box:
1. CMD + Shift + P -> Format Document
or
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
EDIT: Prettier has become vastly more popular and standardized since I first posted this answer. It has gone so far as to even be used directly in the build flows of most modern frontend projects. I strongly encourage users looking to format their code use the Prettier VSCode extension, which tries to use the same settings configured by said build flows.
After opening local bootstrap.min.css in visual studio code, it looked unindented.
Tried the commad ALT+Shift+F but in vain.
Then installed
CSS Formatter extension.
Reloaded it and ALT+Shift+F indented my CSS file with charm.
Bingo !!!
There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.
You can snatch it from GitHub and adapt it yourself, should you feel like it too.
Maybe a little bit late to the party but this might help users using prettier. Just add this line to the setting.json file.
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Save and all should be good now
Go to Files menu -> Preference -> Extentions
Then type CSS Formatter wait for it to load and click install
Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose
Beautify (Github) & Prettier (Github) are the best plugin for web development in Visual Studio Code.
To format the code in Visual Studio when you want, press:
(Ctrl + K) & (Ctrl + F)
The auto formatting rules can be found and changed in:
Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)
For the CSS language the options are unfortunately very limited.
You can also make some changes in: .../ Text Editor / All Languages