Get VSCode intellisense to only show React Native properties when editing a styled-component?

Viewed 989

In VSCode, when using Styled-Components in a React Native project, we can add missing auto-complete properties by creating a js/tsconfig.json file with the following.

{
  "compilerOptions": {
    "plugins": [
      {
        "NOTE": "https://github.com/microsoft/typescript-styled-plugin/issues/58",
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "aspect-ratio",
            "box-shadow",
            "elevation",
            "margin-vertical",
            "margin-horizontal",
            "padding-horizontal",
            "padding-vertical",
            "resize-mode",
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "text-align-vertical",
            "tint-color"
          ]
        }
      }
    ]
  }
}

This fixes linting errors when using React Native specific properties.

But the auto-complete is still filled with web-only properties.

web css properties in react native project

From time to time I find myself accidentally using one of these web properties while in a React Native project. I'd love for the auto-complete to only show valid React Native properties.

How?

0 Answers
Related