Is it possible to get autocomplete or suggestions or intellisense or something for CSS when developing in React?
For example, when I write something like this I want to be able to see all the possibilities for that CSS property. I know that I can get this if I use .css files but sometimes I want to use inline CSS for something and it's really annoying that I have to google every time to see what I can use.
Maybe you can use this. (Similiar to StyleSheet.create() in React Native):
https://github.com/sutanlab/react-styles-hook
I don't think there is some extension that will help you because CSS keeps getting better day by day. So, the maximum you can achieve is create a cheatsheet and use that for every project.
You can install IntelliSense for CSS class names in HTML by Zignd. It is VS Code extension that loads your CSS on program launch and provides autocomplete for that.
If you are using Styled-Components then try using this Extension:
Extension Name: vscode-styled-components by Julien Poissonnier
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
Open VSCode Settings and search for "css: enabled languages". Click in the "Edit in settings.json" link and add the following text to the json file:
...
"window.zoomLevel": 2,
"css.enabledLanguages": ["html", "jsx"]
}
After doing this, press Shift+Ctrl+P and find the command "Cache CSS class definitions". This worked for me. Now I can see Bootstrap classes, for example, inside my jsx code.
I do not think it is necessary since most of the time, if you are using too many CSS, you are going to have modularity and have external css file. But for you, how about temporarily changing "Language Mode" to css. This may need extra clicks, but it will give you CSS auto-completions or suggestions in Visual Studio Code.
You can simply use JSDoc for this purpose. Take for example the following snippet:
/**
* @type {import("react").CSSProperties}
*/
const padStyle = {
bottom: '20vh',
right: '20vw'
}
export default padStyle
Vs code understands the JSDoc annotation and voila:
