{"id":3477,"date":"2017-07-23T10:00:43","date_gmt":"2017-07-23T10:00:43","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3477"},"modified":"2017-07-23T10:03:30","modified_gmt":"2017-07-23T10:03:30","slug":"format-code-every-save-visual-studio-code","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/quick-tips\/format-code-every-save-visual-studio-code\/","title":{"rendered":"How to Format Code on Every Save in Visual Studio Code?"},"content":{"rendered":"<p>This is a quick tip on how to format (prettify) the code every time you save a certain file in Visual Studio Code.<\/p>\n<p>First, go to:<\/p>\n<pre class=\"\">Code -&gt; Preferences -&gt; Settings<\/pre>\n<p><a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33.png\" rel=\"lightbox[3477]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3553\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33-1024x456.png\" alt=\"Screen Shot 2017-07-23 at 11.48.33\" width=\"800\" height=\"356\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33-1024x456.png 1024w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33-300x134.png 300w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33-768x342.png 768w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.48.33.png 1064w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Second, enter the following in your user settings object on the right:<\/p>\n<pre class=\"\">\"editor.formatOnSave\": true<\/pre>\n<p><a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39.png\" rel=\"lightbox[3477]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3554\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39-1024x331.png\" alt=\"Screen Shot 2017-07-23 at 11.50.39\" width=\"800\" height=\"259\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39-1024x331.png 1024w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39-300x97.png 300w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39-768x248.png 768w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-23-at-11.50.39.png 1838w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>You can search for any setting and see its default settings on the left-hand side. If you want to change it, just copy it in the object on the right-hand side, change the value, save, and you&#8217;re done. Now your HTML and JavaScript files will re-indent nicely on every save.<\/p>\n<blockquote><p>Btw, even though I&#8217;m a paying user of Sublime Text 3, I must admit I&#8217;m liking Visual Studio Code more every day. How&#8217;s the situation with you guys? Are you also a long-time ST3 user and have tried VSC? If so, I&#8217;d like to hear your thoughts about it&#8230;<\/p><\/blockquote>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to <a href=\"https:\/\/twitter.com\/hashtag\/Format?src=hash\">#Format<\/a> Code on Every Save in Visual Studio <a href=\"https:\/\/twitter.com\/hashtag\/Code?src=hash\">#Code<\/a>? <a href=\"https:\/\/t.co\/keI3ktj5Pg\">https:\/\/t.co\/keI3ktj5Pg<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/889063083422953472\">July 23, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a quick tip on how to format (prettify) the code every time you save a certain file in Visual Studio Code. First, go to: Code -&gt;&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3556,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-3477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quick-tips"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":4,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":3559,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3477\/revisions\/3559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3556"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}