{"id":38554,"date":"2024-10-25T11:58:56","date_gmt":"2024-10-25T08:58:56","guid":{"rendered":"https:\/\/vipestudio.com\/?p=38554"},"modified":"2024-10-25T11:58:56","modified_gmt":"2024-10-25T08:58:56","slug":"top-vs-code-extensions-to-supercharge-your-css-workflow","status":"publish","type":"post","link":"https:\/\/vipestudio.com\/en\/top-vs-code-extensions-to-supercharge-your-css-workflow\/","title":{"rendered":"Top VS Code Extensions to Supercharge Your CSS Workflow"},"content":{"rendered":"<p>One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. With tons of developers creating extensions, <strong>the functionality is literally endless<\/strong>! Here are some of the best extensions in VS Code for writing CSS.<\/p>\n<h2>HTML CSS Support<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ecmel.vscode-html-css#review-details\" target=\"_blank\" rel=\"ugc nofollow noopener\">HTML CSS Support<\/a> (and the next extension listed) <strong>provides intellisense in your HTML files<\/strong> based on the CSS that is included in your project or referenced remotely. Here\u2019s a full list of features:<\/p>\n<ul>\n<li>Class attribute completion<\/li>\n<li>Id attribute completion<\/li>\n<li>Supports Zen Coding completion for class and id attributes<\/li>\n<li>Scans workspace folder for css and scss files<\/li>\n<li>Supports remote css files<\/li>\n<\/ul>\n<p>One thing that really stands out about this one is that you can specify <strong>remote CSS files to cache<\/strong> as well. You can do this by adding the following setting. This example is referring to the Bootstrap 4 CSS file.<\/p>\n<pre><code>\"css.remoteStyleSheets\": [\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-alpha.6\/css\/bootstrap.min.css\"]<\/code><\/pre>\n<h2>Intellisense for CSS Class Names<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Zignd.html-css-class-completion\" target=\"_blank\" rel=\"ugc nofollow noopener\">Intellisense for CSS Class Names<\/a> provides similar functionality to the extension above. This one will also automatically pull classes from CSS referenced in your HTML files. These class definitions will also be available <strong>via intellisense when using Emmet<\/strong> as well!<\/p>\n<p>At any point, you can trigger a re-cache of the classes from your CSS files by opening up the Command Palette.<\/p>\n<h2>Autoprefixer<\/h2>\n<p>Having to prefix certain CSS properties to ensure browser support can be an extreme hassle. If it weren\u2019t for the workflows already configured with Create React App, Angular CLI, etc., I would completely forget to add the vendor prefixes.<\/p>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=mrmlnc.vscode-autoprefixer\" target=\"_blank\" rel=\"ugc nofollow noopener\">Autoprefixer<\/a> will <strong>automatically add vendor prefixes<\/strong> to make sure your app looks as good as possible in different browsers. It\u2019s crazy simple. Open the Command Palette and call \u201cAutoprefixer CSS\u201d.<\/p>\n<h2>CSS Peek<\/h2>\n<p>If you\u2019re anything like me, I hate having to toggle over to my .css file to check the properties attached to a class or id. With <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=pranaygp.vscode-css-peek\" target=\"_blank\" rel=\"ugc nofollow noopener\">CSS Peek<\/a>, you can <strong>view a hover image of your CSS from within your HTML file<\/strong>.<\/p>\n<p>This extension also <strong>turns class names and ids into a hyperlink<\/strong> that takes you directly to that class or id definition in your CSS!<\/p>\n<h2>Prettier &#8211; Code Formatter<\/h2>\n<blockquote><p>Never worry about formatting again. Set up Prettier once, and it takes care of the rest!<\/p><\/blockquote>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" target=\"_blank\" rel=\"ugc nofollow noopener\">Prettier &#8211; Code Formatter<\/a> is incredibly popular for auto-formatting your JavaScript, but did you know it <strong>auto-formats CSS<\/strong> as well? Well, it does, and it\u2019s awesome!<\/p>\n<p>You can set this up to run on save automatically or manually if you choose.<\/p>\n<h2>Bootstrap 4, Font Awesome 4, Font Awesome 5 Free &amp; Pro snippets<\/h2>\n<p>Sure, not every project uses Bootstrap or Font Awesome, but a ton of them do. That\u2019s why I figured it was worth sharing this <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=thekalinga.bootstrap4-vscode\" target=\"_blank\" rel=\"ugc nofollow noopener\">extension<\/a> which <strong>provides intellisense for Bootstrap 4, Font Awesome 4, and Font Awesome 5.<\/strong><\/p>\n<p>There are so many classes in Bootstrap that it\u2019s 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!<\/p>\n<p>To activate the snippets for Bootstrap, use \u201cB4\u201d.<\/p>\n<p>and \u201cFA5\u201d for Font Awesome 5.<\/p>\n<h2>Recap<\/h2>\n<p>There you go, some of the best CSS extensions for Visual Studio Code. If you think we\u2019ve missed anything, comment below and share your favorites!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most impressive parts of Visual Studio Code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":38555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[113],"tags":[],"class_list":["post-38554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-wordpress-development"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/38554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/comments?post=38554"}],"version-history":[{"count":1,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/38554\/revisions"}],"predecessor-version":[{"id":38557,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/38554\/revisions\/38557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media\/38555"}],"wp:attachment":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=38554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/categories?post=38554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/tags?post=38554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}