"EL - React CSS IntelliSense" is a Visual Studio Code extension that provides IntelliSense support for CSS class names within React files (JSX/TSX).
Each project folder in the workspace has its own class name list (cache). The extension won't automatically update the class name lists, and initially, the class name lists will be empty for all project folders. Use the "EL - CSS Class IntelliSense: Refresh Cache" command to refresh the class names list for the current project folder whenever needed.
By default, the extension will recursively search in the src folder relative to your project directory to locate all CSS class names in CSS, SCSS, SASS, and LESS files (you can override this with extension settings).
Features
CSS Class Name Autocompletion: As you type className="" or className='' in React files (javascriptreact and typescriptreact), the extension provides autocompletion for class names found in your workspace.
"EL - CSS Class IntelliSense: Refresh Cache" Command: Refresh the cache of class names for the current folder. A status bar item is added for this command.
"EL - CSS Class IntelliSense: Trigger Suggestions" Command: Manually trigger suggestions.
By default, keyboard shortcuts won't be assigned to these two commands. You can assign them through VS Code's built-in command Preferences: Open Keyboard Shortcuts.
Extension Settings
This extension contributes the following directory (or workspace in a single-folder workspace) settings:
el-cssClassIntellisense.paths: An array of path configurations for searching CSS class names.
Each path configuration is an object that has two properties:
path: A string that specifies the absolute or relative path of a directory or file.
searchSubdirectories: An optional property that specifies whether to recursively search all subdirectories (if the path points to a file, this will be ignored). The default value is false.
The default is an empty array (in this case, the search will fall back to a recursive search in the src folder relative to your project directory).
To configure this setting, open the settings UI (Ctrl + , or Cmd + ,) and search for "EL - CSS Class IntelliSense: Paths" (or open settings.json if you already have it—located in the .vscode folder at the root of your project directory).
Example:
{
// rest of your settings.json file ...
"el-cssClassIntellisense.paths": [
{"path": "src/components/componentA.css"},
{"path": "src/folderA", "searchSubdirectories": true},
{"path": "src/folderB"}
]
}
This will search for class names in:
src/components/componentA.css (direct file).
src/folderA (and all its subdirectories - recursive).
src/folderB (only direct files, no subdirectories).
Release Notes
1.0.0
Initial release of "EL - React CSS IntelliSense"
Added CSS class name autocompletion for React files.
Added the Refresh Cache command for manually updating the class name cache.
Added the Trigger Suggestions command for manually triggering the suggestions.# el-vscode-extension-react-css-intellisense
