{"id":5462,"date":"2020-12-08T14:18:42","date_gmt":"2020-12-08T05:18:42","guid":{"rendered":"https:\/\/learningbox.co.jp\/?p=5462"},"modified":"2020-12-08T14:18:42","modified_gmt":"2020-12-08T05:18:42","slug":"blog_vscode-extensions","status":"publish","type":"post","link":"https:\/\/learningbox.co.jp\/en\/2020\/12\/08\/blog_vscode-extensions\/","title":{"rendered":"Here are some recommended extensions for VSCode that I'm personally glad I put in!"},"content":{"rendered":"<p>I'm Tanimoto of development.<br \/>\nIn this article, I'd like to introduce a few extensions for vscode that I'm personally glad to have included.<br \/>\nI have tried to introduce the benefits on a personal level.<br \/>\nEffective when developing with a team<b>GitLens - Git supercharged, Prettier - Code formatter<\/b>but I've omitted them this time. Snippets that change depending on the language are also omitted.<\/p>\n<p class=\"mokujimidasi\">Click here for table of contents<\/p>\n<ul class=\"mokuji\">\n<li>1.Material Icon Theme <\/li>\n<li>2. Bracket Pair Colorizer 2<\/li>\n<li>3. Extra.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><b>Material Icon Theme<\/b><\/h2>\n<p class=\"well\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-43-45.jpg\" alt=\"Material Icon Theme\" width=\"876\" height=\"348\" class=\"alignnone size-full wp-image-5525\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-43-45.jpg 876w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-43-45-300x119.jpg 300w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-43-45-768x305.jpg 768w\" sizes=\"auto, (max-width: 876px) 100vw, 876px\" \/>\n<\/p>\n<p>This extension is an extension that can change the icon of the folder and the file.<br \/>\nDepending on the file extension, file name, or folder name, the corresponding icon will be displayed in the sidebar.<br \/>\nIt is easy to understand at a glance what kind of file it is because it is displayed with an icon.<\/p>\n<p><b>\u25bc Material Icon Theme Off<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/1-1-291x300.jpg\" alt=\"\" width=\"291\" height=\"300\" class=\"alignnone size-medium wp-image-5475\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/1-1-291x300.jpg 291w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/1-1.jpg 587w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/p>\n<p><b>\u25bc Material Icon Theme on<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/1-2-273x300.jpg\" alt=\"\" width=\"273\" height=\"300\" class=\"alignnone size-medium wp-image-5473\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/1-2-273x300.jpg 273w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/1-2.jpg 591w\" sizes=\"auto, (max-width: 273px) 100vw, 273px\" \/><\/p>\n<p>By enabling the Material Icon Theme, you will be able to see the icons in the folder.<br \/>\nRather than using the default settings, setting a theme makes it easier to understand what files and folders are there at a glance.<\/p>\n<p>Because the number of folders also increases when the scale becomes large, visibility improves when an icon is displayed in a folder, and it is very convenient for the organization of information.<br \/>\nI think it is good to display it to your liking because you can customize it in the setting such as adding an icon.<br \/>\n&nbsp;<\/p>\n<h2>Bracket Pair Colorizer 2<\/h2>\n<p class=\"well\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-24-07.jpg\" alt=\"Bracket Pair Colorizer 2\" width=\"1204\" height=\"325\" class=\"alignnone size-full wp-image-5520\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-24-07.jpg 1204w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-24-07-300x81.jpg 300w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-24-07-1024x276.jpg 1024w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_10-24-07-768x207.jpg 768w\" sizes=\"auto, (max-width: 1204px) 100vw, 1204px\" \/>\n<\/p>\n<p>This extension is designed to make scopes easier to read. It is an extension that shows the paired parentheses in the source code with color, which I find useful when the nesting gets deep.<\/p>\n<p><b>\u25bcBracket Pair Colorizer 2 off<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/2-1-272x300.png\" alt=\"\" width=\"272\" height=\"300\" class=\"alignnone size-medium wp-image-5478\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2-1-272x300.png 272w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2-1.png 331w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><\/p>\n<p><b>\u25bcBracket Pair Colorizer 2-on<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/2-2-279x300.png\" alt=\"\" width=\"279\" height=\"300\" class=\"alignnone size-medium wp-image-5480\" srcset=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2-2-279x300.png 279w, https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2-2.png 344w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/p>\n<p>() and {} are now colored, and the { at the start of the scope and the } at the end are connected by a line.<br \/>\nWhen you're actually writing the code, I think sometimes the nesting can get really deep. Personally, this makes it easier to see. You can change the color of the parentheses by setting!<br \/>\n&nbsp;<\/p>\n<h2><b>Extra.<\/b><\/h2>\n<p>I can't recommend this extension without giving it away, because it varies very much from person to person, but it is an introduction that there is also such a thing.<\/p>\n<p>It's called<span style=\"font-size: 2rem;font-weight: bold\">Power Mode<\/span>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/tatsuno-system.co.jp\/wp-content\/uploads\/2020\/12\/\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-2.gif\" alt=\"\" width=\"800\" height=\"217\" class=\"alignnone size-full wp-image-5493\" \/><\/p>\n<p><span style=\"font-size: 2rem;font-weight: bold\">power<\/span>I feel that the<br \/>\nVery energetic.<br \/>\nEvery time I type a single letter, I'm impressed.<\/p>\n<p>in this way<span style=\"font-size: 2rem;font-weight: bold\">power<\/span>However, there are two points to note.<br \/>\nThe first is that every time an effect is displayed, the text and lines wobble. It becomes very difficult to see. It makes it impossible to type properly.<br \/>\nSecondly, it may freeze on machines with low specs. Please note that the faster you type, the more effects you will see and the more your CPU usage will jump.<\/p>\n<p>How was it?<br \/>\nIf there is an extension that you have never touched before, please try it.<\/p>","protected":false},"excerpt":{"rendered":"\u958b\u767a\u306e\u8c37\u5143\u3067\u3059\u3002 \u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001\u500b\u4eba\u7684\u306b\u5165\u308c\u3066\u3088\u304b\u3063\u305fvscode\u306e\u62e1\u5f35\u6a5f\u80fd\u3092\u3044\u304f\u3064\u304b\u3054\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059 [&hellip;]","protected":false},"author":17,"featured_media":5516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"vkexunit_cta_each_option":"0","footnotes":""},"categories":[6,7,40],"tags":[57,56,58,55],"class_list":["post-5462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-7","category-40","tag-bracket-pair-colorizer-2","tag-material-icon-theme","tag-power-mode","tag-vscode"],"acf":[],"jetpack_featured_media_url":"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/12\/2020-12-08_9-47-39.jpg","jetpack_shortlink":"https:\/\/wp.me\/pgMrZ4-1q6","_links":{"self":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/5462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/comments?post=5462"}],"version-history":[{"count":45,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/5462\/revisions"}],"predecessor-version":[{"id":5529,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/5462\/revisions\/5529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media\/5516"}],"wp:attachment":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media?parent=5462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/categories?post=5462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/tags?post=5462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}