WebStorm is not auto-completing the Emotion Styled Components

While using @emotion/styled in WebStorm, I have noticed that there is no Intellisense for autocomplete within my style object. However, Typescript does seem to be checking to some extent:

const StepTimer = styled.button({
  borderRadius: 50,
  height: '30px',
  blorg: 3, // No TS error for unknown key
  display: 1 // TS error for incorrect value type
})

Interestingly, when using VSCode on the same computer, I do get autocomplete suggestions inside the object, although not for values (e.g., options for display's value like block, inline, are missing).

I am wondering if there might be a setting that needs adjusting. For reference, I am working on a Mac.

typescriptwebstormemotion

Answer №1

Even after a year, WebStorm still does not support object syntax (despite claiming to support JSX in language settings). While you can get IntelliSense for property names, values are not supported, similar to the experience in VSCode.

However, template string syntax does provide auto-completion for CSS properties:

const StepTimer = styled.button`
  border-radius: 50px;
  height: 30px;
  blorg: 3;
  display: 1;
`

Note that using blorg will trigger an Unknown property warning, and using display: 1 will result in a Mismatched property value error in WebStorm.

This syntax also allows for color highlights and customization of styles based on properties:

const Button = styled.button`
  color: ${({variant}) => variant === 'secondary' ? `white` : `#434449`};
  background-color: ${({variant}) => variant === 'secondary' ? `#3f51b5` : `#f1f2f7`};
`

https://i.sstatic.net/snvPb.png

Answer №2

A great way to tackle this problem is by utilizing WebStorm's handy Styled Components plug-in

Answer №3

To determine if your project is utilizing ReactJSX as its JS version, follow these steps:

1. Navigate to Webstorm Preferences and locate the 

Languages & Frameworks > Javascript
section. Ensure that there is a JavaScript Language version configuration present. Choose React JSX from the dropdown menu.

2. Just a friendly reminder: Press cmd + , for quick access to the Preferences dialog.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

encountering a problem integrating react-dropzone into a project using react-16.13.1

I'm having an issue adding the package https://www.npmjs.com/package/react-dropzone to my TypeScript React project using Yarn as the package manager. I ran the command yarn add @types/react-dropzone, but it ended up installing a deprecated package h ...

javascriptreactjstypescriptreact-dropzone

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

I am currently working on developing a versatile wrapper component for Apollo GraphQL results. The main objective of this wrapper is to wait for the successful completion of the query and then render a component that has been passed as a prop. The componen ...

reactjstypescriptgenericsreact-apolloreact-functional-component

Using System.import in my code is triggering a cascade of errors in my console

I incorporate the System module in my component. export class LoginComponent { constructor() { System.import('app/login/login.js'); } } The file loads successfully, however, TypeScript compiler raises an error Error:(10, 9) TS2 ...

typescriptangular

Put an end to the endless game of defining TypeScript between Aurelia CLI and Visual Studio 2017 builds

I am encountering TypeScript errors in my Visual Studio build for an Aurelia project within a .NET Core project. The errors include 'Build:Cannot find name 'RequestInit'', 'Build:Cannot find name 'Request'', and &apo ...

typescriptvisual-studio-2017aurelia

Struggling to retrieve the ID from the API within the Angular and .NET Core component

Currently, I am working on a test project to enhance my knowledge of Angular. However, I have encountered an issue where the student's id fetched from the service is null. To handle the data, I have implemented a StudentController. Below is a snippet ...

c#angulartypescript

Steps to create a clickable row with color change in Angular 4

How do I make an entire row clickable and change the row color when a checkbox is clicked? This is my HTML file: <section class="others"> <div class="sub-header">Others</div> <p class="text-center" *ngIf="otherTests.length === 0"> ...

javascripthtmlangulartypescript

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

javascripthtmlangulartypescript

TypeScript is unable to identify the data type of class members

I am working with a class called Colors: export class Colors { constructor( private domainColors: string[] = ['#F44336', '#FDB856', '#59CA08', '#08821C'], private numberRange: [number | string, number | string] = [-1 ...

typescript

The compatibility issues between Karma and Jasmine testing configurations cause errors during the Ionic packaging process

I've recently added testing to my ionic app using karma + jasmine, along with a typescript pre-processor. Below are the dependencies I have, most of which were added specifically for testing: "devDependencies": { "@ionic/app-scripts": "1.0.0", ...

angulartypescriptionic-frameworkjasminekarma-runner

Looking for a way to make certain pages in Vue3 accessible without authentication using KeyCloak-js

Currently, I am integrating keycloak-js adapter into a Vue 3 Application. The challenge I am facing is with the system's public pages, which prevent me from calling Keycloak immediately. Even though I have set up a button to trigger the login page, th ...

typescriptvue.jsvuejs3keycloakkeycloak-js

Issue with <BrowserRouter>: TS2769: No suitable overload for this call available

I encountered this error and have been unable to find a solution online. As a beginner in typescript, I am struggling to resolve it. The project was originally in JavaScript and is now being migrated to TypeScript using ts-migrate. I am currently fixing er ...

reactjstypescript

Learn how to dynamically import external modules or plugins using the import() functionality of TypeScript 2.4 within the production script generated by Angular CLI

Utilizing the typescript 2.4 [import()][1] feature has proven to be effective for dynamically loading modules. Testing this functionality has shown positive results, especially when importing modules and components located within the same directory. Howev ...

javascriptangulartypescriptimport

What is the process for integrating unit tests from external sources into an Angular project following an upgrade to version 15

As of Angular v15, the require.context function has been removed from the test.ts configuration file. I used to rely on require.context to expose tests outside of the Angular project to Karma. Now that it's no longer available: const contextGlobal = ...

angulartypescriptjasminekarma-jasminekarma-runner

Resolve the Typescript issue that occurs while modifying MuiDataGrid within createTheme

I am trying to customize my DataGridPro table, which is a MUI component, within the theme. However, when I add MuiDataGrid to the components object, I encounter a TypeScript error: Object literal may only specify known properties, and 'MuiDataGrid&apo ...

typescriptmaterial-ui

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

Can someone please explain the meaning of this error message? I'm new to Angular and currently using Angular 8. This error is appearing on my console. ERROR TypeError: Cannot read property 'invalid' of undefined at Object.eval [as updat ...

htmlangulartypescriptwebangular8

Having trouble with SVG Circles - Attempting to create a Speedometer design

Trying to implement a speedometer in one of the components of my Vue project, but encountering an issue. When I input 0 into my progress calculation for determining the stroke fill, it overlaps with the background circle instead of staying within its bound ...

typescriptvue.jsmathsvg

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

javascriptreactjstypescriptusecallback

Exploring the syntax of typescript when using createContext

Just starting out with typescript and I have some questions. Could someone break down the syntax used in this code snippet for me? What is the significance of having two groups containing signIn, signOut, and user here? Is the first group responsible fo ...

javascriptreactjstypescript

An issue has occurred with attempting to access the 'phone' property of a null value. This error is at the root of the problem and needs to

I have implemented a function to retrieve all clients from an API: this.ws.getallclients().subscribe( client => { this.client = client.map((clients) => { this.filteredOptions = this.addsale.controls['client_id'].valueChanges. ...

angulartypescript

Prevent methods from being called in a Typescript class after they have already

I encountered a scenario where I need to exclude certain methods from the return type of a class method once they have been called. Consider a class named Setup with methods step1, step2, and step3. class Setup { step1() { return this; } ...

javascripttypescripttypescript-typingsecmascript-next