Skip to content

Tarrowren/css-class-intellisense

Repository files navigation

css-class-intellisense

Build Status

Html/Vue/Jsx/PHP id/class attribute completion

Features

  • Html/Vue/Jsx/PHP id/class attribute completion (Include Vue/Jsx imported CSS/SCSS/LESS file)
  • Jump to definition or reference
  • Rename (May conflict with other extensions, cannot currently be resolved, use with care)
  • Limited language support for web extensions (issues)

Usage

Global

Create the cssconfig.json file to specify global CSS:

{
  "globalCssFiles": ["https://getbootstrap.com/docs/5.2/dist/css/bootstrap.css", "../main.css"]
}

Using the include and exclude properties:

{
  "globalCssFiles": ["https://getbootstrap.com/docs/5.2/dist/css/bootstrap.css", "../main.css"],
  "include": ["**/*.{vue,tsx}"],
  "exclude": ["**/*.html"]
}

Embed

<!DOCTYPE html>
<html>
  <head>
    <style>
      .hello {
      }
    </style>
  </head>
  <body>
    <div class="hello"></div>
  </body>
</html>
<template>
  <div class="hello"></div>
</template>

<style>
.hello {
}
</style>

Link

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.css" />
  </head>
  <body>
    <div class="accordion"></div>
  </body>
</html>

Import

import "./App.scss";

export default function App() {
  return <div className="hello"></div>;
}
<template>
  <div class="hello"></div>
</template>

<script>
import "./App.css";
</script>