{"id":2243,"date":"2021-12-05T22:35:20","date_gmt":"2021-12-05T19:35:20","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2243"},"modified":"2021-12-05T22:37:25","modified_gmt":"2021-12-05T19:37:25","slug":"visual-studio-code-extensions-for-react-developer","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/","title":{"rendered":"Visual Studio Code Extensions For React Developer"},"content":{"rendered":"\n<p>In this post, I will introduce <strong>Visual Studio Code Extensions <\/strong>that will make our work easier when developing with <strong>Reactjs<\/strong>.<\/p>\n\n\n\n<h3>1. Auto Rename Tag<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"371\" height=\"71\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext1.png\" alt=\"\" class=\"wp-image-2247\"\/><figcaption>Auto Rename Tag<\/figcaption><\/figure><\/div>\n\n\n\n<p>It is a extension that allows you to easily edit HTML open and close tags at the same time.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1440\" height=\"938\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/usage.gif\" alt=\"\" class=\"wp-image-2255\"\/><figcaption>Html Tag de\u011fi\u015ftirme \u00f6rne\u011fi<\/figcaption><\/figure><\/div>\n\n\n\n<h3>2. Bracket Pair Colorizer<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"481\" height=\"67\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext2.png\" alt=\"\" class=\"wp-image-2249\"\/><figcaption>Bracket Pair Colorizer<\/figcaption><\/figure><\/div>\n\n\n\n<p>We use regular brackets ( ), curly braces { } and square brackets [ ] a lot when writing code. This plugin colors these marks, making it easier to find missing closures.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"625\" height=\"119\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/example.png\" alt=\"\" class=\"wp-image-2262\"\/><figcaption>Open Close Braces<\/figcaption><\/figure><\/div>\n\n\n\n<h3>3. VS Code ES7 React\/Redux\/React-Native\/JS snippets<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"551\" height=\"69\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext3.png\" alt=\"\" class=\"wp-image-2250\"\/><figcaption>VS Code ES7 React\/Redux\/React-Native\/JS snippets Extensions<\/figcaption><\/figure><\/div>\n\n\n\n<p>With this extension, it allows us to easily create code snippets with short descriptions. We can easily create the following code block by typing <strong>rafce<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import React from 'react'\n\nconst $1 = () =&gt; {\n  return &lt;div&gt;$0&lt;\/div&gt;\n}\n\nexport default $1<\/pre><\/div>\n\n\n\n<h3>4. GitLens &#8212; Git supercharged<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"882\" height=\"67\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext4.png\" alt=\"\" class=\"wp-image-2251\"\/><figcaption>GitLens Extension<\/figcaption><\/figure>\n\n\n\n<p>With the GitLens extension, it is an extension that will help you easily understand the history of the code, who changed it, why it was changed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"747\" height=\"610\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/revision-navigation.gif\" alt=\"\" class=\"wp-image-2267\"\/><\/figure>\n\n\n\n<h3>5. Prettier &#8211; Code formatter<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"450\" height=\"66\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext5.png\" alt=\"\" class=\"wp-image-2252\"\/><figcaption>Prettier Eklentisi<\/figcaption><\/figure><\/div>\n\n\n\n<p>It is an extension that allows us to read and understand our code more easily by formatting it.<\/p>\n\n\n\n<h3>6. Thunder Client<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"489\" height=\"59\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext6.png\" alt=\"\" class=\"wp-image-2253\"\/><figcaption>Thunder Client<\/figcaption><\/figure><\/div>\n\n\n\n<p>It is an extension that we can easily make Rest requests in Visual Studio Code without using Postman and test Rest APIs.<\/p>\n\n\n\n<p>Good luck \u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, I will introduce Visual Studio Code Extensions that will make our work easier when developing with Reactjs. 1. Auto Rename Tag It is a extension that allows you to easily edit HTML open and close tags at the same time. 2. Bracket Pair Colorizer We use regular brackets ( ), curly braces [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[50],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual Studio Code Extensions For React Developer - blog website<\/title>\n<meta name=\"description\" content=\"In this post, I will introduce Visual Studio Code Extensions that will make our work easier when developing with Reactjs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Studio Code Extensions For React Developer - blog website\" \/>\n<meta property=\"og:description\" content=\"In this post, I will introduce Visual Studio Code Extensions that will make our work easier when developing with Reactjs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-05T19:35:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-05T19:37:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext1.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/vsc_ext1.png\",\"width\":371,\"height\":71},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/\",\"name\":\"Visual Studio Code Extensions For React Developer - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/#primaryimage\"},\"datePublished\":\"2021-12-05T19:35:20+00:00\",\"dateModified\":\"2021-12-05T19:37:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"In this post, I will introduce Visual Studio Code Extensions that will make our work easier when developing with Reactjs.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/05\/visual-studio-code-extensions-for-react-developer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Studio Code Extensions For React Developer\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2243"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2243"}],"version-history":[{"count":32,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions"}],"predecessor-version":[{"id":2288,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions\/2288"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}