{"id":6834,"date":"2019-10-05T11:56:51","date_gmt":"2019-10-05T11:56:51","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=6834"},"modified":"2019-10-05T11:56:53","modified_gmt":"2019-10-05T11:56:53","slug":"useful-visual-studio-code-extensions-for-web-developer","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/useful-visual-studio-code-extensions-for-web-developer\/","title":{"rendered":"Useful Visual Studio Code Extensions."},"content":{"rendered":"\n<p style=\"text-align:center\">1 :-<strong><a rel=\"noreferrer noopener\" aria-label=\"Visual Studio Code HTML Snippets (opens in a new tab)\" href=\"https:\/\/www.google.com\/search?client=firefox-b-d&amp;q=beautify+vs+code+extension\" target=\"_blank\">Visual Studio Code HTML Snippets<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Default.png\" alt=\"\" class=\"wp-image-6835\" width=\"103\" height=\"103\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Default.png 120w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Default-80x80.png 80w\" sizes=\"auto, (max-width: 103px) 100vw, 103px\" \/><figcaption> <strong><em>HTML Snippets <\/em><\/strong><\/figcaption><\/figure>\n\n\n\n<p>This extension adds rich language support for the HTML Markup to VS Code, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Full HTML5 Tags<\/li><li>Colorization<\/li><li>Snippets<\/li><li>[partially implemented] Quick Info<\/li><li>description mentions if tag deprecated<\/li><\/ul>\n\n\n\n<p style=\"text-align:center\">2:-<strong><a rel=\"noreferrer noopener\" aria-label=\" Visual Studio Code  Beautify css\/sass\/scss\/lessSnippets (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=michelemelluso.code-beautifier\" target=\"_blank\"> Visual Studio Code  Beautify css\/sass\/scss\/less Snippets<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.-beautifyDefault.png\" alt=\"\" class=\"wp-image-6836\" width=\"116\" height=\"116\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.-beautifyDefault.png 256w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.-beautifyDefault-150x150.png 150w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.-beautifyDefault-250x250.png 250w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.-beautifyDefault-80x80.png 80w\" sizes=\"auto, (max-width: 116px) 100vw, 116px\" \/><figcaption><em> <\/em><strong><em>Beautify<\/em><\/strong><em> <\/em><\/figcaption><\/figure>\n\n\n\n<p><strong>Beautify css, sass and less code (extension for Visual Studio Code)<\/strong><\/p>\n\n\n\n<p>Command &#8220;beautify.format&#8221;<\/p>\n\n\n\n<p>If you beautify other languages \u200b\u200bthe code\/text will be beautified to Visual Studio Code&#8217;s default formatter.<\/p>\n\n\n\n<p style=\"text-align:center\">3:- <strong><a rel=\"noreferrer noopener\" aria-label=\"Bootstrap 4, Font awesome 4, Font Awesome 5 Free &amp; Pro snippets (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=thekalinga.bootstrap4-vscode\" target=\"_blank\">Bootstrap 4, Font awesome 4, Font Awesome 5 Free &amp; Pro snippets<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.bootstrap.png\" alt=\"\" class=\"wp-image-6840\" width=\"99\" height=\"99\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.bootstrap.png 128w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.bootstrap-80x80.png 80w\" sizes=\"auto, (max-width: 99px) 100vw, 99px\" \/><figcaption><strong><em>Bootstrap 4<\/em><\/strong><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"usage\">Usage:-<\/h4>\n\n\n\n<p>To use the bootstrap snippets, open a HTML file, and start typing <code>b4-<\/code>, followed by pressing <code>Ctrl+Space<\/code>. A list of bootstrap snippets will show up<\/p>\n\n\n\n<p>To use font awesome 4 snippets, open a HTML file, and start typing <code>fa4-<\/code>, the editor will show you all the snippets<\/p>\n\n\n\n<p>To use font awesome 5 free snippets, open a HTML file, and start typing <code>fa5-<\/code>, the editor will show you all the snippets<\/p>\n\n\n\n<p>To use font awesome 5 pro snippets, open a HTML file, and start typing <code>fa5p-<\/code>, the editor will show you all the snippets<\/p>\n\n\n\n<p>The detailed list of supported actions are listed below under documentation section<\/p>\n\n\n\n<p>Here are the conventions that will make it easy to lookup templates<\/p>\n\n\n\n<p>If a template trigger starts with <code>@<\/code> variation, this snippet targets the attribute of an html element in your markup. Think of <code>@<\/code> as <code>html attribute<\/code><\/p>\n\n\n\n<p>\nVisual studio code plugin containing Bootstrap 4, Font awesome 4 &amp; \nFont Awesome 5 Free &amp; Pro snippets. This plugin works in both in the\n stable &amp; the insiders build\n\n<\/p>\n\n\n\n<p style=\"text-align:center\">4:- <a rel=\"noreferrer noopener\" aria-label=\"Laravel 5 Snippets extension for Visual Studio Code. (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=onecentlin.laravel5-snippetshttps:\/\/marketplace.visualstudio.com\/items?itemName=onecentlin.laravel5-snippets\" target=\"_blank\"><strong>Laravel 5 Snippets extension for Visual Studio Code.<\/strong><\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Laravel.png\" alt=\"\" class=\"wp-image-6838\" width=\"134\" height=\"134\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Laravel.png 128w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.Laravel-80x80.png 80w\" sizes=\"auto, (max-width: 134px) 100vw, 134px\" \/><figcaption> <strong><em>Laravel   5 Snippets<\/em><\/strong> <\/figcaption><\/figure>\n\n\n\n<p> This extension adds Snippets support for the Laravel to VS Code<\/p>\n\n\n\n<p><strong>Support Snippet<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Auth<\/li><li>Broadcast<\/li><li>Cache<\/li><li>Config<\/li><li>Console<\/li><li>Cookie<\/li><li>Crypt<\/li><li>DB<\/li><li>Event<\/li><li>Form (<a href=\"https:\/\/packagist.org\/packages\/laravelcollective\/html\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel Collective Form\/Html<\/a> needs to be installed and available as <code>blade<\/code> snippets)<\/li><li>Hash<\/li><li>Helper<\/li><li>Log<\/li><li>Mail &#8211; Contains <code>Mail::<\/code> and <code>Mailable::<\/code> prefix for mail related settings<\/li><li>Passport (Laravel v5.3 &#8211; <a href=\"https:\/\/laravel.com\/docs\/5.3\/passport\" target=\"_blank\" rel=\"noreferrer noopener\">API Authentication<\/a>)<\/li><li>Redirect<\/li><li>Relation<\/li><li>Request<\/li><li>Response<\/li><li>Route<\/li><li>Schema &#8211; Contains <code>Schema::<\/code> and <code>Column::<\/code> prefix for database related settings<\/li><li>Session<\/li><li>Storage<\/li><li>Str<\/li><li>View<\/li><\/ul>\n\n\n\n<p style=\"text-align:center\">5:-  <strong><a rel=\"noreferrer noopener\" aria-label=\"PHP code intelligence for Visual Studio Code. (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=bmewburn.vscode-intelephense-client\" target=\"_blank\">PHP code intelligence for Visual Studio Code.<\/a><\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.php_.png\" alt=\"\" class=\"wp-image-6839\" width=\"131\" height=\"131\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.php_.png 128w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/Microsoft.VisualStudio.Services.Icons_.php_-80x80.png 80w\" sizes=\"auto, (max-width: 131px) 100vw, 131px\" \/><figcaption> <strong><em>PHP Intelephense<\/em><\/strong><\/figcaption><\/figure>\n\n\n\n<p>Intelephense is a high performance PHP language server packed full of essential features for productive PHP development.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fast camel\/underscore case <strong>code completion (IntelliSense)<\/strong>.  Offering detailed suggestions for document, workspace and built-in  symbols and keywords. Automatic addition of use declarations.<\/li><li>Detailed <strong>signature (parameter) help<\/strong> for document, workspace and built-in constructors, methods, and functions.<\/li><li>Rapid workspace wide <strong>go to definition<\/strong> support.<\/li><li>Workspace wide <strong>find all references<\/strong>.<\/li><li>Fast camel\/underscore case <strong>workspace symbol search<\/strong>.<\/li><li>Full <strong>document symbol search<\/strong> that also powers <strong>breadcrumbs<\/strong> and <strong>outline<\/strong> UI.<\/li><li>Multiple <strong>diagnostics<\/strong> for open files via an error tolerant parser and powerful static analysis engine.<\/li><li>Lossless PSR-12 compatible <strong>document\/range formatting<\/strong>. Formats combined HTML\/PHP\/JS\/CSS files too.<\/li><\/ul>\n\n\n\n<p>If want to know more about any Extension please Leave a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1 :-Visual Studio Code HTML Snippets This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags Colorization Snippets [partially implemented] Quick Info description mentions if tag deprecated 2:- Visual Studio Code Beautify css\/sass\/scss\/less Snippets Beautify css, sass and less code (extension for Visual Studio Code) Command &#8220;beautify.format&#8221; If&#8230;<\/p>\n","protected":false},"author":14,"featured_media":6845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5201],"tags":[568,5358,4459,5359,5203,177,1076,5360,5357],"class_list":["post-6834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-bootstrap","tag-css","tag-html","tag-js","tag-laravel","tag-php","tag-plugins","tag-snippets","tag-vscode"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/6834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=6834"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/6834\/revisions"}],"predecessor-version":[{"id":6844,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/6834\/revisions\/6844"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/6845"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=6834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=6834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=6834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}