{"id":2270,"date":"2021-12-05T22:27:32","date_gmt":"2021-12-05T19:27:32","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2270"},"modified":"2021-12-05T22:29:11","modified_gmt":"2021-12-05T19:29:11","slug":"react-gelistiriciler-icin-visual-studio-code-eklentileri","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/","title":{"rendered":"React Geli\u015ftiriciler \u0130\u00e7in Visual Studio Code Eklentileri"},"content":{"rendered":"\n<p>Bu yaz\u0131da Reactjs ile geli\u015ftirme yaparken i\u015fimizi kolayla\u015ft\u0131racak Visual Studio Code Eklentilerini tan\u0131taca\u011f\u0131m.<\/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>Html a\u00e7ma kapama taglerini ayn\u0131 anda kolayl\u0131kla d\u00fczenlemeyi sa\u011flayan bir eklentidir.<\/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>Kod yazarken &nbsp;normal parantez ( ), s\u00fcsl\u00fc parantez { } ve k\u00f6\u015feli parantez [ ]  i\u015faretlerini \u00e7ok kullan\u0131r\u0131z. Bu eklenti bu i\u015faretleri renklendirerek eksik kapatmalar\u0131 daha kolay bulmam\u0131z\u0131 sa\u011fl\u0131yor.<\/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>A\u00e7ma kapama <\/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 Eklentisi<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu eklenti ile k\u0131sa tan\u0131mlamalarla kod bloklar\u0131n\u0131 kolayl\u0131kla olu\u015fturmam\u0131z\u0131 sa\u011fl\u0131yor. <code><strong>rafce<\/strong><\/code> yazarak a\u015fa\u011f\u0131daki kod blo\u011funu kolayl\u0131kla olu\u015fturabiliriz.<\/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 Eklentisi<\/figcaption><\/figure>\n\n\n\n<p>Gitlens eklentisi ile kodun ge\u00e7mi\u015fini, kimi taraf\u0131ndan de\u011fi\u015ftirildi\u011fini neden de\u011fi\u015ftirildi\u011fi gibi  konular\u0131 rahatl\u0131kla anlamn\u0131za yard\u0131mc\u0131 olacak bir eklentidir.<\/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>Kodumuzu formatlayarak daha rahat okuyup anlamam\u0131z\u0131 sa\u011flayan bir eklentidir.<\/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>Rest isteklerini Postman kullanmadan Visual studio code i\u00e7inde rahatl\u0131kla yapabilece\u011fimiz ve apileri test edebilece\u011fimiz bir eklentidir.<\/p>\n\n\n\n<p>Ba\u015far\u0131lar dilerim &#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bu yaz\u0131da Reactjs ile geli\u015ftirme yaparken i\u015fimizi kolayla\u015ft\u0131racak Visual Studio Code Eklentilerini tan\u0131taca\u011f\u0131m. 1. Auto Rename Tag Html a\u00e7ma kapama taglerini ayn\u0131 anda kolayl\u0131kla d\u00fczenlemeyi sa\u011flayan bir eklentidir. 2. Bracket Pair Colorizer Kod yazarken &nbsp;normal parantez ( ), s\u00fcsl\u00fc parantez { } ve k\u00f6\u015feli parantez [ ] i\u015faretlerini \u00e7ok kullan\u0131r\u0131z. Bu eklenti bu i\u015faretleri renklendirerek [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[52],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Geli\u015ftiriciler \u0130\u00e7in Visual Studio Code Eklentileri - blog website<\/title>\n<meta name=\"description\" content=\"Bu yaz\u0131da Reactjs ile geli\u015ftirme yaparken i\u015fimizi kolayla\u015ft\u0131racak Visual Studio Code Eklentilerini tan\u0131taca\u011f\u0131m.\" \/>\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\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Geli\u015ftiriciler \u0130\u00e7in Visual Studio Code Eklentileri - blog website\" \/>\n<meta property=\"og:description\" content=\"Bu yaz\u0131da Reactjs ile geli\u015ftirme yaparken i\u015fimizi kolayla\u015ft\u0131racak Visual Studio Code Eklentilerini tan\u0131taca\u011f\u0131m.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-05T19:27:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-05T19:29:11+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\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/#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\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/\",\"name\":\"React Geli\\u015ftiriciler \\u0130\\u00e7in Visual Studio Code Eklentileri - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/#primaryimage\"},\"datePublished\":\"2021-12-05T19:27:32+00:00\",\"dateModified\":\"2021-12-05T19:29:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Bu yaz\\u0131da Reactjs ile geli\\u015ftirme yaparken i\\u015fimizi kolayla\\u015ft\\u0131racak Visual Studio Code Eklentilerini tan\\u0131taca\\u011f\\u0131m.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/05\/react-gelistiriciler-icin-visual-studio-code-eklentileri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Geli\\u015ftiriciler \\u0130\\u00e7in Visual Studio Code Eklentileri\"}]},{\"@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\/2270"}],"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=2270"}],"version-history":[{"count":2,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2270\/revisions"}],"predecessor-version":[{"id":2272,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2270\/revisions\/2272"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}