Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>styled-jsx Language ServerNew to Visual Studio Code? Get it now.
styled-jsx Language Server

styled-jsx Language Server

Divlo

|
22,515 installs
| (2) | Free
Language server for styled-jsx
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vscode-styled-jsx-languageserver

Main GitHub Repo.

Language server for styled-jsx.

Features

  • CSS code completion

    css-completion

  • Hovers

    hover

  • Color picker

    color-picker

  • Quick fixes

    quick-fixes

  • Multiple <style jsx/> tags in file

    multiple-styled-jsx

  • External styles styled-jsx/css

    external-styles

How it works

It converts template literals to language which can be detected by language server.

Consider this component:

const Button = (props) => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        display: inline-block;
        font-size: 2em;
      }
    `}</style>
    <style jsx>{`
      button {
        padding: ${'large' in props ? '50' : '20'}px;
        position: relative;
        background: ${props.theme.background};
      }
    `}</style>
  </button>
)

All the surrounding JSX will be removed, leaving just the CSS:

button {
  display: inline-block;
  font-size: 2em;
}

button {
  position: relative;
}

The reason for this is to preserve line numbers for the language server in order to correctly propose completions, underline problems and highlight symbols.

Caveats

  • Template literal expressions are replaced with whitespace.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft