DEV Community

Cover image for 🚀 FSCSS Extension for VS Code is Now Live
FSCSS tutorial for FSCSS tutorial

Posted on

🚀 FSCSS Extension for VS Code is Now Live

I'm excited to announce that the FSCSS Support extension for VS Code is now available on the Visual Studio Marketplace!

Making developer experience smoother inside VS Code.

The extension provides syntax highlighting and tooling for .fscss files.

Install the Extension

You can install it directly from the marketplace:

https://marketplace.visualstudio.com/items?itemName=Figsh.fscss

Or search “FSCSS” inside VS Code extensions.

✨ Features

The extension currently includes:

  • FSCSS syntax highlighting
  • Support for .fscss and .xfscss files
  • FSCSS snippets
  • Custom language icon
  • Grammar support for the FSCSS syntax

This makes it easier to write and explore FSCSS directly in VS Code.

What is FSCSS?

FSCSS (Figured Shorthand Cascading Style Sheets) is a CSS-inspired system designed to make stylesheets shorter, more expressive, and more programmable.

Example:

@define button(){
  padding: 10px;
  background: blue;
  color: white;
}

.btn{
  @button()
}
Enter fullscreen mode Exit fullscreen mode

Project Repository

The extension source code is available here:

https://github.com/Figsh/fscss-vscode-extension

Feel free to explore, suggest improvements, or contribute.

What's Next?

Future improvements may include:

  • IntelliSense for FSCSS functions
  • auto-completion
  • FSCSS → CSS compile helpers
  • improved syntax rules

If you try the extension, I'd love to hear your feedback.

Happy coding!

Top comments (0)