NativeFlow CodeSense

This VS Code extension adds CodeSense and light visualization around nativeflowcss in JSX and TSX. You get completions, hover information, diagnostics with quick fixes, and extra handling for palette colors where the tooling can infer them.

Features

• Completions : Suggestions as you write NativeFlow Styles, including immediately after ..
• Hover : Previews NativeFlow tokens; set the tooltip to a pastel layout or plain JSON under nativeflowcss in Settings.
• Validation and quick fixes : Marks incomplete or unknown NativeFlow props; use the code action menu (Ctrl + ., or the lightbulb where it appears) for fixes or import suggestions when provided.
• Colors : Registers document colors and small inline decorations where palette-backed values are resolved.
• Hover highlight : Optional background on the NativeFlow token at the caret.

The extension does not register any commands; it enables itself in supported editors when Requirements are satisfied.

Completions

Hover details

Validation and quick fixes

With nativeflowcss.validationEnabled left on, JSX/TSX issues show standard squiggles. Trigger quick fixes from the gutter lightbulb or Ctrl+..

Supported languages

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Requirements

• Use a folder workspace (a single stray file outside a folder will not activate the extension).
• The project needs a dependency your settings recognize as NativeFlow CSS, commonly nativeflowcss listed in package.json. Scoped packages or forks go in nativeflowcss.packageNames.

If nothing in the workspace resolves to those names, the extension never starts.

Settings

Open VS Code Settings and search NativeFlow CSS, or edit settings.json directly:

Setting	Type	Default	Description
nativeflowcss.enabled	boolean	true	Turns all NativeFlow CodeSense features on or off
nativeflowcss.packageNames	array of strings	["nativeflowcss"]	npm specifiers counted as NativeFlow CSS (scopes and forks supported)
nativeflowcss.hoverTooltipStyle	"pastel" | "json"	"pastel"	How hover previews are formatted
nativeflowcss.hoverHighlightEnabled	boolean	true	Tints the active NativeFlow token
nativeflowcss.completionsEnabled	boolean	true	Supplies completions on prefix and after .
nativeflowcss.validationEnabled	boolean	true	Underlines bad or incomplete NativeFlow props in JSX/TSX

Links

• NativeFlow CSS CodeSense on the Visual Studio Marketplace (identifier jayowiee.nativeflowcss-codesense)

Documentation

For complete docs on NativeFlow, Read at nativeflow.js.org

Socials

Feel free to drop by at the Discord Server or at Github Discussions

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Donations