Question 225339 in CSS Question posted in
Some basic documentation can be found here.

Css – How to get VSCode to suggest / autocomplete the React className, given my custom classes on a <div>?

I have a stylesheet with a bunch of classes. How can I get it to autocomplete in VSCode so that it autocompletes the className attribute on any div or native HTML element? Right now it’s not doing anything.

I have styles defined in styles/base.css like this:

.border-solid {
  border-style: solid;
}

.border-dotted {
  border-style: dotted;
}

.border-width-1 {
  border-width: 1px;
}

.border-width-2 {
  border-width: 2px;
}

.border-width-4 {
  border-width: 4px;
}

I am in a Next.js project with VSCode settings.json like this:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"],
  "eslint.nodePath": "./node_modules/eslint",
  "emmet.showExpandedAbbreviation": "never"
}

Is there any possible way to wire it up so it can somehow pick up my class names and autocomplete them? If I need to duplicate my class names and put them somewhere else to get autocomplete working, I am fine with that too.

If it requires a lot of work (i.e. too much for an SO answer), if you could outline the key things that I would have to do that would be great.

Ideally it would show me a TypeScript error if I use an incorrect or undefined class name.

Tags:

2

Answers


  1. 0

    you can use the extension Complete from File

    Manually or use a script that extracts the class selectors from the CSS files and put them in a separate file, use that file in the configuration of the extension.

    Login or Signup to reply.
  2. 0

    I don’t it is possible yet in VS code to share suggestions across files but for what you can do I think that if you want to get that kind of suggestions like feel you should use css modules

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search