VSCodeでstyled-jsxの入力補完をする

参照したページ

シンタックスハイライト

• identifier: blanu.vscode-styled-jsx
• 参考リンク: styled-jsx - Visual Studio Marketplace

入力補完

• identifier: Divlo.vscode-styled-jsx-languageserver
• 参考リンク: styled-jsx Language Server - Visual Studio Marketplace

インストールする

「styled-jsx - Visual Studio Marketplace」をインストールすると、シンタックスハイライトされます。

上記のシンタックスハイライトをインストールした後、「styled-jsx Language Server - Visual Studio Marketplace」をインストールすると入力補完されるようになりました。

どうも styled-jsx Language Server だけでは駄目そうだったので、両方インストールしました。

例えば Example.jsx の中で以下のように記述しています。

import { FC } from 'react';
import css from 'styled-jsx/css';

export const Template: FC = () => {
  return (
    <div className="template">
      <div className="text">TemplateText</div>
      <style jsx>{styles}</style>
    </div>
  );
};

const styles = css`
  .template {
    background: #dfd;
  }

  .text {
    color: #0f0;
  }
`;