Quickly create a .module.css
or .module.scss
file for the currently open JavaScript/TypeScript file — and automatically insert the correct import
statement.
- 📄 Create a CSS/SCSS module next to the active file with one command.
- 🎨 Choose file type (
.module.css
or.module.scss
or.css
and.scss
) via a quick pick. - 📝 Automatic import insertion into your JS/TS/JSX/TSX file.
- 🛡️ Duplicate-safe — won’t overwrite an existing module or add duplicate imports.
- 🎯 Smart import placement — inserted after
use client
/use strict
directives and existing imports. - 🚫 Language check — only runs for JS/TS files.
-
Open a
.js
,.jsx
,.ts
, or.tsx
file in VS Code. -
Run the command:
- Press
Ctrl+Shift+P
/Cmd+Shift+P
- Search for Create CSS Module for Current File
- Press
-
Pick
.module.css
or.module.scss
in the menu. -
The file is created next to your current file, and an
import styles from './YourFile.module.css';
is added automatically.
If you’re editing:
src/components/Button.tsx
and run Create CSS Module choosing .module.scss
, the extension will create:
src/components/Button.module.scss
and insert:
import styles from './Button.module.scss';
at the top of Button.tsx
.
Command | Description |
---|---|
Create CSS Module for Current File | Creates a css file next to the open file and inserts the import. |
- Visual Studio Code 1.103.0 or higher
- JavaScript/TypeScript file open in the editor
Would you like me to also make you a CHANGELOG.md
so it’s fully Marketplace-compliant? That plus this README will make vsce package
happy without warnings.