CSS Selector Support
Visual Studio Marketplace Installs
A Visual Studio Code extension that provides HTML class name completion for CSS, Less, Sass, Stylus, and Vue files. It intelligently scans your workspace for class definitions in HTML, JSX, TSX, and Vue files and provides you with instant autocompletion.
Features
- Smart Autocompletion: Get instant autocompletion for your CSS class names in CSS, Less, Sass, Stylus, and Vue files.
- Flexible File Scanning: By default, the extension scans for files in the same directory as your stylesheet. You can also configure it to scan your entire workspace or specific files.
- Caching for Performance: Class names are cached to provide you with instant autocompletion without any lag.
- Real-time Updates: The extension uses a file watcher to automatically update the cache when you create, delete, or modify your files.
- Configurable: You can customize the file extensions to be scanned, so you can tailor the extension to your project's needs.
- Vue Support: It will provide class name of current file if in
.vue file.
Supported File Types
The extension will scan the following file types for class definitions:
- HTML (
.html, .htm)
- JSX (
.jsx)
- TSX (
.tsx)
- Vue (
.vue)
You can get autocompletion in the following file types:
- CSS (
.css)
- Less (
.less)
- Sass (
.scss, .sass)
- Stylus (
.styl, .stylus)
- Vue (
.vue)
Configuration
You can configure the file extensions to be scanned by modifying the cssselectorsupport.include setting in your settings.json file.
"cssselectorsupport.include": [
"html",
"htm",
"jsx",
"tsx",
"vue"
]
By default, the extension will scan for files in the same directory as the stylesheet you are editing. To scan other files, you can use the cssselectorsupport.sourceFiles setting. This is useful if you want to limit the search to a specific directory or set of files.
"cssselectorsupport.sourceFiles": [
"src/**/*.html",
"components/**/*.jsx"
]
Usage
- Install the extension from the Visual Studio Marketplace.
- Open a project with HTML, JSX, TSX, or Vue files.
- Open a CSS, Less, Sass, Stylus, or Vue file.
- Type a
. and you will see a list of available class names.
Contributing
Any type of contribution and discussion is welcome.
License
This project is licensed under the MIT License. See the LICENSE.md file for details.
