Skip to content

vsc-extension-quickstart.md

Latest commit

 

History

History
159 lines (103 loc) · 2.93 KB

vsc-extension-quickstart.md

File metadata and controls

159 lines (103 loc) · 2.93 KB

CSS Modules Intellisense — Quickstart Guide

Welcome to the development environment for your CSS Modules Intellisense VS Code extension!

This guide walks you through setup, build, run, and packaging instructions to help you get productive fast.

🛠 Requirements

📦 Install Dependencies

From the root of your extension project, run:

npm install

🧪 Run the Extension

To launch the extension in a VS Code development window:

code .

Then press F5 in VS Code to open a new Extension Development Host window with your extension loaded.

🔁 Code Changes

Your main extension code lives in:

src/extension.ts

Run the compile script:

npm run compile

or, Run the pretest script:

npm run pretest

and, You can also run the watch script:

npm run watch

🧪 Testing (Optional)

We recommend using Mocha for writing extension tests.

Test entry point (if added):

src/test/

Run the test script:

npm run test

More info: Testing Extensions

📦 Package Your Extension

After building with npm run pretest, run:

vsce package

This generates a file like:

css-modules-intellisense-${version}.vsix

🚀 Install Locally

To test your .vsix locally:

code --install-extension css-modules-intellisense-${version}.vsix

🧾 Publish to Marketplace

  1. Create a publisher account

  2. Login:

    vsce login <your-publisher-name>

  3. Publish:

    vsce publish

📂 Project Structure

.
├── src/                      # TypeScript source code
├── dist/                     # Compiled JS output
├── package.json              # Extension manifest
├── README.md                 # Marketplace documentation
├── CHANGELOG.md              # Changelog / release notes
├── vsc-extension-quickstart.md  # This file
├── .vscode/                  # Debug config
└── tsconfig.json             # TypeScript configuration

🧠 Notes

  • Supports .module.css, .module.scss, and .module.less
  • Recognizes import styles from './file.module.css' usage
  • Lints missing class names
  • Supports Rename across both module and usage files
  • Supports Go-to-Definition across javascript and typescript files
  • Supports Autocomplete across script files through modules
  • Planned: Hover, Find References

Happy building with CSS Modules Intellisense! 🎉