Post

6 Awesome CSS Extensions for VS Code

Updated on September 15, 2020
    author

    James Quick

    6 Awesome CSS Extensions for VS Code

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. With tons of developers creating extensions, the functionality is literally endless! Here are some of the best extensions in VS Code for writing CSS.

    Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development!

    HTML CSS Support

    HTML CSS Support (and the next extension listed) provides intellisense in your HTML files based on the CSS that is included in your project or referenced remotely. Here’s a full list of features.

    • Class attribute completion

    • Id attribute completion

    • Supports Zen Coding completion for class and id attributes

    • Scans workspace folder for css and scss files

    • Supports remote css files

    One thing that really stands out about this one is that you can specify remote CSS files to cache as well. You can do this by adding the following setting. This example is refering the Bootstrap 4 CSS file.

    "css.remoteStyleSheets": [
      "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    ]
    

    Intellisense for CSS Class Names

    Intellisense for CSS Class Names provides similar functionality to the extension above. This one will also automatically pull classes from CSS referenced in your HTML files. This class definitions will also be available via intellisense when using Emmet as well!

    At any point, you can trigger a re-cache of the classes from your CSS files by opening up the Command Palette.

    Autoprefixer

    Having to prefix certain CSS properties to ensure browser support can be an extreme hassle. If it weren’t for the workflows already configured with Create React App, Angular CLI, etc. I would completely forget to add the vendor prefixes.

    Autoprefixer will automatically add vendor prefixes to make sure your app looks as good as possible in different browsers. It’s crazy simple. Open the Command Palette and call “Autoprefixer CSS”.

    CSS Peek

    If you’re anything like me, I hate having to toggle over to my .css file to check the properties attached to a class or id. With CSS Peek, you can view a hover image of your CSS from within you HTML file.

    This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS!

    Prettier - Code Formatter

    Never worry about formatting again. Setup Prettier once, and it takes care of the rest!

    Prettier - Code Formatter is incredibly popular for auto-formatting your JavaScript, but did you know it auto-formats CSS as well? Well, it does, and it’s awesome!

    Here’s a before (with terrible format).

    …and after (with BEAUTIFUL formatting)!

    You can set this up to run on save automatically or manually if you choose.

    Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

    Sure, not every project uses Bootstrap or Font Awesome, but a ton of them do. That’s why I figured it was worth sharing this extension which provides intellisense for Bootstrap 4, Font Awesome 4, and Font Awesome 5.

    There are so many classes in Bootstrap that it’s impossible to memorize them all. Same with working with Font Awesome. I have to look up the syntax every time I want to add an icon, but not anymore!

    To activate the snippets for Bootstrap use “B4”.

    and “FA5” for Font Awesome 5.

    Recap

    There you go, some of the best CSS extensions for Visual Studio Code. If you think we’ve missed anything, comment below and share your favorites!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about our products


    About the authors
    Default avatar
    James Quick

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    1 Comments
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    I recommend replacing both Intellisense for CSS Class Names and CSS peek with 1 extension CSS Navigation.

    https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel