All Projects → zignd → Html Css Class Completion

zignd / Html Css Class Completion

Licence: mit
🍫 Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Html Css Class Completion

Pythonvscode
This extension is now maintained in the Microsoft fork.
Stars: ✭ 2,013 (+1056.9%)
Mutual labels:  visual-studio-code, intellisense
Vscode Cordova
A Visual Studio Code extension providing intellisense, debug, and build support for Cordova and Ionic projects.
Stars: ✭ 267 (+53.45%)
Mutual labels:  intellisense, extension
vscode-gitignore
A simple extension for Visual Studio Code that lets you pull .gitignore files from the https://github.com/github/gitignore repository
Stars: ✭ 44 (-74.71%)
Mutual labels:  extension, visual-studio-code
Vscode Twitch Highlighter
This is a VS Code extension that will allow your Twitch chat to highlight a line of code via a command message. Example: `!line 8 server.js`. See master branch README.md for more details
Stars: ✭ 169 (-2.87%)
Mutual labels:  visual-studio-code, extension
Web Accessibility
A Visual Studio Extension for Web accessibility
Stars: ✭ 55 (-68.39%)
Mutual labels:  visual-studio-code, extension
vscode-kafka
Apache Kafka® extension for Visual Studio Code
Stars: ✭ 64 (-63.22%)
Mutual labels:  extension, visual-studio-code
Aura Theme
💅 A beautiful dark theme for your favorite apps.
Stars: ✭ 159 (-8.62%)
Mutual labels:  visual-studio-code, extension
emulator
Run Android emulator and iOS simulator easily from VScode!
Stars: ✭ 60 (-65.52%)
Mutual labels:  extension, visual-studio-code
Vscode Simple Vim
Vim extension for VSCode
Stars: ✭ 38 (-78.16%)
Mutual labels:  visual-studio-code, extension
Vscode Intelephense
PHP intellisense for Visual Studio Code
Stars: ✭ 872 (+401.15%)
Mutual labels:  visual-studio-code, intellisense
Netlify
A VS Code extension that displays your Netlify build statuses and more!
Stars: ✭ 23 (-86.78%)
Mutual labels:  extension, visual-studio-code
Vscode Matlab
MATLAB support for Visual Studio Code
Stars: ✭ 114 (-34.48%)
Mutual labels:  visual-studio-code, extension
VscOdooSnippets
Odoo Snippets for Visual Studio Code
Stars: ✭ 29 (-83.33%)
Mutual labels:  extension, visual-studio-code
vscode-open-in-github
Visual Studio Code Extension — Open file in GitHub
Stars: ✭ 35 (-79.89%)
Mutual labels:  extension, visual-studio-code
Code D
Fully featured D language extension for Visual Studio Code using Serve-D
Stars: ✭ 202 (+16.09%)
Mutual labels:  visual-studio-code, extension
Vs Freemarker
FreeMarker language colorization extension for Visual Studio Code
Stars: ✭ 17 (-90.23%)
Mutual labels:  visual-studio-code, extension
Micropy Cli
Micropython Project Management Tool with VSCode support, Linting, Intellisense, Dependency Management, and more!
Stars: ✭ 112 (-35.63%)
Mutual labels:  visual-studio-code, intellisense
Vscode Mjml
This repo is archived. MJML preview, lint, compile for Visual Studio Code.
Stars: ✭ 138 (-20.69%)
Mutual labels:  visual-studio-code, extension
Vscode Remote Release
Visual Studio Code Remote Development: Open any folder in WSL, in a Docker container, or on a remote machine using SSH and take advantage of VS Code's full feature set.
Stars: ✭ 2,256 (+1196.55%)
Mutual labels:  visual-studio-code
Vscode Auto Rename Tag
Automatically rename paired HTML/XML tag
Stars: ✭ 161 (-7.47%)
Mutual labels:  visual-studio-code

IntelliSense for CSS class names in HTML

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

Features

  • Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in the file types listed in the Supported Language Modes section);
  • Supports external stylesheets referenced through link elements in HTML files;
  • Command to manually re-cache the class definitions used in the autocompletion;
  • User Settings to override which folders and files should be considered or excluded from the caching process.

Supported Language Modes

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)
  • Django template (django-html)

Extended Support for Other Language Modes

It's possible to specify which language modes will have autocompletion. There are three settings for this feature:

  • html-css-class-completion.HTMLLanguages is for language modes based on HTML, the ones you have the class attribute;
  • html-css-class-completion.CSSLanguages currently is for languages like CSS, Sass and Scss, this one is not very useful right now because it only supports the @apply function;
  • html-css-class-completion.JavaScriptLanguages is for JavaScript based languages supporting the class or className attribute.

The language modes listed in the previous section are already defined as default values in these settings, and you can add new ones or remove the already defined ones as necessary.

Specific Support

  • "@apply" directive in CSS, SASS and SCSS Files for Tailwind CSS;
  • "className" and "class" in TypeScript React, JavaScript and JavaScript React language modes;
  • Emmet abbreviations support triggered by typing a "." (comes disabled by default, check the User Settings topic for more information).

Contributions

You can request new features and contribute to the extension development on its repository on GitHub. Look for an issue you're interested in working on, comment on it to let me know you're working on it and submit your pull request! :D

What's new in version 1.20 (Dec 19, 2020)

  • Settings to allow users to specify which language modes will have autocompletion;
  • Fix interpretation of classes defined inside media queries.

Check out the changelog for the current and previous updates.

Usage

If there are HTML or JS files on your workspace, the extension automatically starts and looks for CSS class definitions. In case new CSS classes are defined, or new CSS files are added to the workspace, and you also want auto-completion for them, just hit the lightning icon on the status bar. Also, you can execute the command by pressing Ctrl+Shift+P(Cmd+Shift+P for Mac) and then typing "Cache CSS class definitions."

More User Settings

The extension supports a few user settings, changes to these settings will be automatically recognized and the caching process will be re-executed.

Folders and Files

You can change the folders and files the extension will consider or exclude during the caching process by setting the following user settings:

  • "html-css-class-completion.includeGlobPattern" (default: "**/*.{css,html}")
  • "html-css-class-completion.excludeGlobPattern" (default: "")

Emmet

Emmet support comes disabled by default, the reason behind this choice is because it the current implementation simply triggers completion when you type a "." (period) and this behavior might be considered a little annoying, but it might change in the future.

Currently it supports the following languages (those are language identifier): "html", "razor", "php", "blade", "vue", "twig", "markdown", "erb", "handlebars", "ejs", "typescriptreact", "javascript", "javascriptreact".

  • "html-css-class-completion.enableEmmetSupport" (default: false)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].