Visual Studio Code CSS Intellisense for HTML
commit
HTML id and class attribute completion for Visual Studio Code.
Features
HTML id and class attribute completion
Supports completion from in file defined styles
Supports specifying remote and local style sheets
Supports any language for completion
Supports go to definition for selectors
Validates class attributes on demand
Supported Languages
Supported languages can be configured with the css.enabledLanguages global setting.
By default html is enabled:
{
"css.enabledLanguages": ["html"]
}
Extension can be configured to support any language where it makes sense such as
nunjucks, twig, mustache, vue, typescript etc. You should also install
corresponding language extension which registers the specific language id in VS
Code.
This setting is application scoped and changing the setting requires restarting VS
Code.
Specifying Style Sheets
Remote and local style sheets with optional glob patterns and variable
substitutions can be specified in VS Code settings per workspace folder
in .vscode/settings.json and will suggest in all configured languages within that
workspace folder.
Glob patterns for local style sheets can have the following syntax:
Pattern Matches
* zero or more characters in a path segment
? one character in a path segment
** any number of path segments, including none
{} group conditions like **/*.{css,scss}
[] a range of characters like [0-9] or negate [!0-9]
The following variable substitutions are supported for local style sheets as well:
Variable Substitution
${fileBasename} Current file's basename
${fileBasenameNoExtension} Current file's basename with no extension
${fileExtname} Current file's extension
Examples
Configuration depends on your layout of the project. The following most basic setup
will suggest from all css files in project's src folder:
.vscode/settings.json
{
"css.styleSheets": ["src/**/*.css"]
}
Bootstrap
If Bootstrap npm module is used with additional scss the following can be a
starting point:
.vscode/settings.json
{
"css.styleSheets": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/**/*.scss"
]
}
or in case of Bootstrap CDN with additional plain css:
.vscode/settings.json
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"src/**/*.css"
]
}
All of Bootstrap's class selectors with additional user defined styles in the
project will be available for completion in html files.
Lit
Enable typescript or javascript in global settings depending on your usage and
restart VS Code:
{
"css.enabledLanguages": ["html", "typescript"]
}
Component's static styles will be available for completion elsewhere in the
component. If you need to use some base styles in every component you can specify
as follows:
.vscode/settings.json
{
"css.styleSheets": ["src/base-styles.ts"]
}
Variable substitution can be used to refer to a related css file. If you are
working on my-component.ts and your css is in my-component-css.ts then a suitable
setup can be:
.vscode/settings.json
{
"css.styleSheets": ["**/${fileBasenameNoExtension}-css.ts"]
}
Vue
Install your favorite Vue language extension from Marketplace which registers vue
language id then enable vue in global settings and restart VS Code:
{
"css.enabledLanguages": ["html", "vue"]
}
Styles defined in component's <style> section will be available for completion in
component's <template> section.
Angular
Variable substitution can be used for Angular development:
.vscode/settings.json
{
"css.styleSheets": ["**/${fileBasenameNoExtension}.css"]
}
With this setup, styles defined in e.g. app.component.css will be available in
app.component.html.
Go to Definition
Go to definition for id and class selectors for local style sheets are supported.
Selecting Go to Definition from context menu (F12 or ⌘ click) on a selector will
open the local style sheet which the selector is defined.
Commands
Validate class selectors
Validates all class selectors in the active editor. Auto validation can be
configured in extension settings globally or per workspace.
Clear style sheets cache
Clears style sheets cache.
Sponsor
Github Sponsors
Buy me a coffee
Installation
Extension can be installed from Visual Studio Code Marketplace.
Visual Studio Code HTML Snippets
DISABLING THIS EXTENSION AS IT CURRENTLY CONFLICTS WTH EXISTING VS CODE HTML
EXTENSION
This extension adds rich language support for the HTML Markup to VS Code,
including:
Full HTML5 Tags
Colorization
Snippets
[partially implemented] Quick Info
description mentions if tag deprecated
Update 5
Disabling this extension as its functionality has been absorbed by VS Code main
html extension.
Update 4
Removed all languages, only HTML Remains.
Added FAQ in end of page.
Update 3
added php, js, and jsreact as languages where the snippets work by default.
Update 2
fixed a bug with line cursor on vscode 1.5.1
Update 1
removed deprecated tags [acronym, applet, basefont, center, dir, font, frame,
frameset, noframes, strike, tt]
fixed LI tag issue, you couldn't add new line in the tags
Todo
[on-going]Improve syntax layout.
[on-going]Add support for Tab to end of line.
[on-going]Populate Tags with properties.
Using
Type part of a snippet, press enter, and the snippet unfolds.
Snippets named as the tag without braces
div --> <div></div>
doc --> <!DOCTYPE html>
a --> <a href=""></a>
alt text
Installation
Install Visual Studio Code 0.10.1 or higher
Launch Code
From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
Select Install Extension
Type HTML-Snippets
Choose the extension
Reload Visual Studio Code
FAQ
How to enable the snippets on a file other than html?
Add the following code to the project settings.json or global settings.json :
"files.associations": {
// extension name : html
"*.ejs": "html",
"*.js": "html"
}
the above code will allow html snippet to work on .ejs and .js files, amend to fit
your needs.
Please Read this answer. Make extension work in languages other than HTML
How can I report an issue?
The easiest way is to start a git issue, I will attempt to answer ASAP else I hope
someone else will answer.
Contact
If you find any issue or have a suggestion please tweet me on @m_abusaid
I am unable to respond to comments on the store page, please use appropriate
channels github/twitter to reach me. Thank you
License
MIT License, refer to license file.
Source
Github
** Enjoy!**
Live Server
Live Server loves 💘 your multi-root workspace
Live Server for server side pages like PHP. Check Here
[For 'command not found error' #78]
VSCode Marketplace Total Installs Avarage Rating
Travis branch Appveyor branch GitHub license
Launch a local development server with live reload feature for static & dynamic
pages.
Live Server Demo VSCode
Shortcuts to Start/Stop Server
[NOTE: In case if you don't have any .html or .htm file in your workspace then you
have to follow method no 4 & 5 to start server.]
Open a project and click to Go Live from the status bar to turn the server on/off.
Go Live Control Preview
Right click on a HTML file from Explorer Window and click on Open with Live Server.
Explorer Window Control.
Open a HTML file and right-click on the editor and click on Open with Live Server.
Edit Menu Option Preview
Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You
can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C]
Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open
With Live Server to start a server or type Live Server: Stop Live Server to stop a
server.
Features
A Quick Development Live Server with live browser reload.
Start or Stop server by a single click from status bar.
Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
Support for excluding files for change detection.
Hot Key control.
Customizable Port Number, Server Root, default browser.
Support for any browser (Eg: Firefox Nightly) using advance Command Line.
Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].
Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ
Section]
Use preferable host name (localhost or 127.0.0.1).
Customizable Supporting Tag for Live Reload feature. (Default is Body or head)
SVG Support
https Support.
Support for proxy.
CORS Enabled
Multi-root workspace supported.
Support for any file even dynamic pages through Live Server Web Extension.
Installation
Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver.
Settings
All settings are now listed here Settings Docs.
FAQs
All FAQs are now listed here FAQ Docs
What's new ?
Version 5.6.1 (17.04.19)
Fixed Extension host terminated unexpectedly [#431]
Version 5.6.0 (17.04.19)
[NEW] Intregation of Browser Preview with Live Server [#352 - Thanks to Kenneth
Auchenberg]
[NEW] Fallback to random port If given port is busy. [#330 - Thanks to Ali Almohaya
]
[FIXES] Moved to vscode-chokidar lib for #285.
Doc Fixes [#388 - Thanks to Ted Silbernagel]
Version 5.5.1 (12.02.19)
[Fixes] Fixed Extension host terminated unexpectedly for MacOS. [#285]
Version 5.5.0 (12.02.19)
[Fixes] Fixed ignoreFiles settings [#255]
Attempt to fix high cpu load [#278]
Changelog
To check full changelog click here.
Special Thanks To Maintainers
A special thanks to Max Schmitt, Joydip Roy & Ayo Adesugba for contributing their
valueable time on this project.
Max Schmitt Joydip Roy Ayo Adesugba
LICENSE
This extension is licensed under the MIT License
