{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/productivity/9-vs-code-extensions-you-need-to-avoid/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Upbeat Code","siteUrl":"https://www.upbeatcode.com"}},"mdx":{"id":"cd028d42-3e5b-518a-9a89-4947a7d4a205","excerpt":"If you’re using VS Code, I guarantee that you have  at least one of these extensions installed.  And to tell you the truth, they’re completely useless. They’re…","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"layout\": \"blog\",\n  \"title\": \"9 VS Code Extensions You Need To Avoid\",\n  \"subtitle\": \"Stop Wasting Your Time With These\",\n  \"category\": \"Productivity\",\n  \"description\": \"This article show 8 ways to sport a great React Developer.\",\n  \"author\": \"Bernard Bado\",\n  \"date\": \"2022-02-11T12:48:32.796Z\",\n  \"thumbnail\": \"vs-code-extensions-thumbnail.png\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"If you\\u2019re using VS Code, I guarantee that you have \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"at least one of these extensions installed.\"), \" And to tell you the truth, they\\u2019re completely useless.\"), mdx(\"p\", null, \"They\\u2019re just slowing down your IDE, feeding on your memory, making your life more complicated than it should be. But there is no reason to worry.\"), mdx(\"p\", null, \"After you read this article, you\\u2019ll know what these extensions are, what makes them useless, and hopefully, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"you\\u2019ll get rid of them for good.\")), mdx(\"p\", null, \"But first, let\\u2019s hear what makes me qualified to tell you about uninstalling extensions in your editor.\"), mdx(\"h3\", {\n    \"id\": \"my-relationship-with-vs-code\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#my-relationship-with-vs-code\",\n    \"aria-label\": \"my relationship with vs code permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"My Relationship With VS Code\"), mdx(\"p\", null, \"I\\u2019ve been using VSCode for a long time. And to this day, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"it is my favorite editor for coding\"), \" in any programming language.\"), mdx(\"p\", null, \"During my early days, I installed a lot of extensions to enhance its functionality. But as I kept installing more and more extensions, I noticed my editor is getting slower.\"), mdx(\"p\", null, \"These days, I only have the necessary extensions installed. And I can proudly say, my VS Code is running smoother than a baby\\u2019s bottom.\"), mdx(\"p\", null, \"With that being said, here\\u2019s why I think VS Code extensions are bad:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"They\\u2019re increasing CPU usage:\"), \" This one is self-explanatory.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"They slow you down:\"), \" Many extensions are being loaded when VS Code starts. This can slow down your start-up time if you have too many extensions installed.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"They duplicate VS Code built-in functionality:\"), \" Some of the extensions just do what can be done by VS Code itself.\")), mdx(\"h3\", {\n    \"id\": \"vs-code-extensions-to-avoid\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#vs-code-extensions-to-avoid\",\n    \"aria-label\": \"vs code extensions to avoid permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"VS Code Extensions to Avoid\"), mdx(\"p\", null, \"As I promised at the beginning of this article, here\\u2019s a list of extensions you can uninstall from VS Code.\"), mdx(\"div\", {\n    \"className\": \"admonition admonition-note alert alert--secondary\"\n  }, mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"admonition-heading\"\n  }, mdx(\"h5\", {\n    parentName: \"div\"\n  }, mdx(\"span\", {\n    parentName: \"h5\",\n    \"className\": \"admonition-icon\"\n  }, mdx(\"svg\", {\n    parentName: \"span\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\",\n    \"width\": \"14\",\n    \"height\": \"16\",\n    \"viewBox\": \"0 0 14 16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z\"\n  }))), \"note\")), mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"admonition-content\"\n  }, mdx(\"p\", {\n    parentName: \"div\"\n  }, \"Please note that extensions in this list are in no particular order. I don\\u2019t think one is worse than another. I just simply don\\u2019t use them all.\"))), mdx(\"h4\", {\n    \"id\": \"auto-close-tag\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#auto-close-tag\",\n    \"aria-label\": \"auto close tag permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Auto Close Tag\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 6,361,790 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"As a developer, I can\\u2019t imagine my life without this feature. And to be honest, I used this extension for a long time. The reason for that is VS Code didn\\u2019t support this functionality back in the day.\"), mdx(\"p\", null, \"But now it does! And it\\u2019s turned on by default. However, you can force this by setting your \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"settings.json\"), \" file as follows.\"), mdx(\"h6\", {\n    \"id\": \"settingsjson\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h6\",\n    \"href\": \"#settingsjson\",\n    \"aria-label\": \"settingsjson permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"settings.json\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"html.autoClosingTags\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"javascript.autoClosingTags\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"typescript.autoClosingTags\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h4\", {\n    \"id\": \"auto-rename-tag\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#auto-rename-tag\",\n    \"aria-label\": \"auto rename tag permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Auto Rename Tag\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 7,940,824 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"The story of this extension is pretty much the same as the one above. It wasn\\u2019t supported before, but now it is. However, it only works in HTML files at the moment. (There is also an open issue to add support for JSX files)\"), mdx(\"p\", null, \"To use this feature, you need to apply the following settings.\"), mdx(\"h6\", {\n    \"id\": \"settingsjson-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h6\",\n    \"href\": \"#settingsjson-1\",\n    \"aria-label\": \"settingsjson 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"settings.json\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"editor.linkedEditing\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h4\", {\n    \"id\": \"bracket-pair-colorizer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#bracket-pair-colorizer\",\n    \"aria-label\": \"bracket pair colorizer permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Bracket Pair Colorizer\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 7,442,552 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"As we can see from the number of installs, this extension received huge popularity. And it really deserved it.\"), mdx(\"p\", null, \"Bracket pair allows matching brackets to be identified with a similar color. This can be really helpful in many scenarios.\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"297px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"20.32967032967033%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAAsUlEQVQY032NW46CQBREWYfQDxonQaSjIgr4aFBpH/tf0DHMqB9m9OMkVcmpewOTJERhyCTLyfKMumlYrSp833M89TjnuN5u9P7Cwe05+TMX79m3Lbvdlp9kjOs62u5AWSwIjDGEkWCWKqzdkOY15dQgpEBKidb6xW+PY4bNkJVSCPHnPXuQPA4WVrJdZ1RlSj3XiIfwlOVbH/J/BHGsiSKJnQqa5YhqPqKww1f1cfSNOxD+dJL8omRfAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Original Source\",\n    \"title\": \"Original Source\",\n    \"src\": \"/static/75d4883412a2f31fbf083acd91e40983/9edad/bracket-pair-example.png\",\n    \"srcSet\": [\"/static/75d4883412a2f31fbf083acd91e40983/a51ee/bracket-pair-example.png 182w\", \"/static/75d4883412a2f31fbf083acd91e40983/9edad/bracket-pair-example.png 297w\"],\n    \"sizes\": \"(max-width: 297px) 100vw, 297px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n    \"))), mdx(\"p\", null, \"But as the author of this extension points out, this functionality is now supported by VS Code. In order to use it, you have to modify your \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"settings.json\"), \" accordingly.\"), mdx(\"h6\", {\n    \"id\": \"settingsjson-2\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h6\",\n    \"href\": \"#settingsjson-2\",\n    \"aria-label\": \"settingsjson 2 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"settings.json\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"editor.bracketPairColorization.enabled\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"editor.guides.bracketPairs\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"active\\\"\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h4\", {\n    \"id\": \"settings-sync\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#settings-sync\",\n    \"aria-label\": \"settings sync permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Settings Sync\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 3,006,307 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"If you\\u2019re using the editor on multiple devices. Or if you just want your settings to be saved, in case you\\u2019ll change the device. Setting synchronization helps tremendously in both cases.\"), mdx(\"p\", null, \"Of course, there is an extension to handle the settings sync. But VS Code supports settings sync across different machines. The settings are linked to a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/\"\n  }, \"Github\"), \" or \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.microsoft.com/es-es/\"\n  }, \"Microsoft\"), \" account. And you can configure what types of settings should be synced.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"726px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5e41f39c0889e125d9d204ce1f13ed41/21482/vscode-settings-sync.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"32.417582417582416%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAACE3AAAhNwEzWJ96AAAA20lEQVQY042PTW7CMBCFfZEu6r+QpAtIFDvO2AkhqK1QFyDgDr3/BV7lKVUXrRCLT8/yfH4jizZM6IfIBEqcPhBcPyCOW+z2r5jmhcnn7OTZj9NTwjjN8OOC9XSAWMUT0vKGYbuHTzu4OGPt6RtH2PhMvCVh00c0TGInF30cz+jer3g6fELYcASFgKZpUVc1U65KVGXFqZW+i1IKUipoKWHkM0RBZ3jnQBTRdQ51/YIqF9/SGPsw2liIIl7gnEMYCNYWULz1Fxa1gdYPFtpwQshfblt++Ef65+4eX9d5uZYYIj/2AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Captured by author\",\n    \"title\": \"Captured by author\",\n    \"src\": \"/static/5e41f39c0889e125d9d204ce1f13ed41/f8067/vscode-settings-sync.png\",\n    \"srcSet\": [\"/static/5e41f39c0889e125d9d204ce1f13ed41/a51ee/vscode-settings-sync.png 182w\", \"/static/5e41f39c0889e125d9d204ce1f13ed41/4e786/vscode-settings-sync.png 363w\", \"/static/5e41f39c0889e125d9d204ce1f13ed41/f8067/vscode-settings-sync.png 726w\", \"/static/5e41f39c0889e125d9d204ce1f13ed41/96e86/vscode-settings-sync.png 1089w\", \"/static/5e41f39c0889e125d9d204ce1f13ed41/21482/vscode-settings-sync.png 1350w\"],\n    \"sizes\": \"(max-width: 726px) 100vw, 726px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h5\", {\n    \"id\": \"captured-by-author\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#captured-by-author\",\n    \"aria-label\": \"captured by author permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Captured by author\"), mdx(\"h4\", {\n    \"id\": \"path-intellisense\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#path-intellisense\",\n    \"aria-label\": \"path intellisense permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Path Intellisense\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 6,345,124 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"This extension finds, parses, and provides code actions and code completion for all available imports. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"auto-completes file names\"), \" when we write import statements. And as a developer, I can\\u2019t say how much I like it. But there is something I don\\u2019t like.\"), mdx(\"p\", null, \"When you read the instructions to install this extension, it specifically says to disable auto-complete provided by VS Code. That makes me wonder, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"why can\\u2019t we just use the built-in auto-completion?\")), mdx(\"p\", null, \"It turns out we can, using the following settings.\"), mdx(\"h6\", {\n    \"id\": \"settingsjson-3\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h6\",\n    \"href\": \"#settingsjson-3\",\n    \"aria-label\": \"settingsjson 3 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"settings.json\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"typescript.suggest.paths\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"javascript.suggest.paths\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h4\", {\n    \"id\": \"npm\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#npm\",\n    \"aria-label\": \"npm permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NPM\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 4,692,787 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"This extension provides a way to run npm scripts defined in \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"package.json\"), \". The scripts can be run directly from your editor. I usually run the scripts directly from the console, but I can imagine this extension being useful.\"), mdx(\"p\", null, \"However, you can achieve the same thing in VS Code, by opening the npm scripts panel.\"), mdx(\"div\", {\n    \"style\": {\n      \"position\": \"relative\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1024px\"\n    }\n  }, \"\\n \", mdx(\"video\", {\n    parentName: \"div\",\n    \"loop\": true,\n    \"autoPlay\": true,\n    \"allowFullScreen\": \"true\",\n    \"muted\": \"true\",\n    \"height\": \"auto\",\n    \"poster\": \"undefined\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"left\": \"0\",\n      \"top\": \"0\"\n    }\n  }, \"\\n \", mdx(\"source\", {\n    parentName: \"video\",\n    \"src\": \"/bdac42d91f3ab378ada6d9280bc73ced/npm-scripts-example.mp4\",\n    \"type\": \"video/mp4\"\n  }), \"\\n       \"), \"\\n \"), mdx(\"h4\", {\n    \"id\": \"auto-import\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#auto-import\",\n    \"aria-label\": \"auto import permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Auto Import\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 1,988,281 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=steoates.autoimport\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"This extension \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"finds, parses, and provides code actions and code completion for all available imports.\"), \" It works for both \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.javascript.com/\"\n  }, \"JavaScript\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.typescriptlang.org/\"\n  }, \"TypeScript\"), \".\"), mdx(\"p\", null, \"What I like the most about this extension is that I don\\u2019t need it. In fact, it\\u2019s useless. We can achieve the same thing using the following VS Code settings.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"javascript.suggest.autoImports\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"typescript.suggest.autoImports\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"javascript.updateImportsOnFileMove.enabled\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"always\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"typescript.updateImportsOnFileMove.enabled\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"always\\\"\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h4\", {\n    \"id\": \"html-snippets\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#html-snippets\",\n    \"aria-label\": \"html snippets permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML Snippets\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 6,978,511 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"This extension helps you generate various HTML snippets. And to be honest, I don\\u2019t have to say much about it. Instead, let\\u2019s hear what the authors have to say about it.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Disable this extension as it currently conflicts with existing VS Code HTML extension (source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets\"\n  }, \"VS Code Marketplace\"), \")\")), mdx(\"p\", null, \"VS Code has built-in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://emmet.io/\"\n  }, \"Emmet\"), \" support, which means we can use all of the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.emmet.io/abbreviations/\"\n  }, \"Emmet abbreviations\"), \" available.\"), mdx(\"div\", {\n    \"style\": {\n      \"position\": \"relative\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1024px\"\n    }\n  }, \"\\n \", mdx(\"video\", {\n    parentName: \"div\",\n    \"loop\": true,\n    \"autoPlay\": true,\n    \"allowFullScreen\": \"true\",\n    \"muted\": \"true\",\n    \"height\": \"auto\",\n    \"poster\": \"undefined\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"left\": \"0\",\n      \"top\": \"0\"\n    }\n  }, \"\\n \", mdx(\"source\", {\n    parentName: \"video\",\n    \"src\": \"/b4d11d8164e871de727e3088081947c9/emmet-example.mp4\",\n    \"type\": \"video/mp4\"\n  }), \"\\n       \"), \"\\n \"), mdx(\"h4\", {\n    \"id\": \"lorem-ipsum\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#lorem-ipsum\",\n    \"aria-label\": \"lorem ipsum permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Lorem Ipsum\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCBE \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Installed:\"), \" 359,854 times\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDD17 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Link:\"), \" \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum\"\n  }, \"VS Code Marketplace\"))), mdx(\"p\", null, \"Lorem Ipsum is a handy extension that can generate dummy text when we need it. It saved me a lot of copy-pasting hours, but I don\\u2019t use it anymore, and there is a good reason for that.\"), mdx(\"p\", null, \"Lorem ipsum can also be generated using Emmet. And as we already know, Emmet has native support in VS Code.\"), mdx(\"p\", null, \"In order to generate the dummy text, you need to type \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"lorem\"), \" followed by the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"Tab\"), \" or \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"Enter\"), \" key.\"), mdx(\"div\", {\n    \"style\": {\n      \"position\": \"relative\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1024px\"\n    }\n  }, \"\\n \", mdx(\"video\", {\n    parentName: \"div\",\n    \"loop\": true,\n    \"autoPlay\": true,\n    \"allowFullScreen\": \"true\",\n    \"muted\": \"true\",\n    \"height\": \"auto\",\n    \"poster\": \"undefined\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"left\": \"0\",\n      \"top\": \"0\"\n    }\n  }, \"\\n \", mdx(\"source\", {\n    parentName: \"video\",\n    \"src\": \"/39409a8d25e089957d2950915e8d2707/lorem-ipsum-generator.mp4\",\n    \"type\": \"video/mp4\"\n  }), \"\\n       \"), \"\\n \"), mdx(\"h3\", {\n    \"id\": \"concluding-thoughts\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#concluding-thoughts\",\n    \"aria-label\": \"concluding thoughts permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Concluding Thoughts\"), mdx(\"p\", null, \"It\\u2019s necessary to keep our working environment free. And it\\u2019s important to make sure it\\u2019s running smoothly. By removing junk extensions, we can achieve both.\"), mdx(\"p\", null, \"In this article, I shared with you a list of extensions that are totally obsolete, no longer needed, and hence, should be deleted. Removing unnecessary extension is a good first step to achieving an organized environment. But it needs follow-through.\"), mdx(\"p\", null, \"To keep our environment clean, we should also evaluate each extension we\\u2019re about to install in the future. A good rule of thumb is to always check if VS Code is supporting the functionality you need.\"), mdx(\"div\", {\n    \"className\": \"admonition admonition-note alert alert--secondary\"\n  }, mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"admonition-heading\"\n  }, mdx(\"h5\", {\n    parentName: \"div\"\n  }, mdx(\"span\", {\n    parentName: \"h5\",\n    \"className\": \"admonition-icon\"\n  }, mdx(\"svg\", {\n    parentName: \"span\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\",\n    \"width\": \"14\",\n    \"height\": \"16\",\n    \"viewBox\": \"0 0 14 16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z\"\n  }))), \"note\")), mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"admonition-content\"\n  }, mdx(\"p\", {\n    parentName: \"div\"\n  }, \"VS Code team is adding features regularly, so it\\u2019s very likely that some feature that was missing before, was already integrated into the editor.\"))), mdx(\"p\", null, \"To sum everything up, here is the list of VS Code extension you should consider deleting:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Auto Close Tag\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Auto Rename Tag\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Bracket Pair Colorizer\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Settings Sync\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Path Intellisense\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Npm\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Auto Import\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"HTML Snippets\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Lorem Ipsum\")));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/productivity/9-vs-code-extensions-you-need-to-avoid/"},"frontmatter":{"title":"9 VS Code Extensions You Need To Avoid","date":"February 11, 2022","description":"This article show 8 ways to sport a great React Developer.","author":"Bernard Bado","thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/c86fa9bf92cf14108931235880e9e39d/c40af/vs-code-extensions-thumbnail.png","srcSet":"/static/c86fa9bf92cf14108931235880e9e39d/45534/vs-code-extensions-thumbnail.png 256w,\n/static/c86fa9bf92cf14108931235880e9e39d/f13a8/vs-code-extensions-thumbnail.png 512w,\n/static/c86fa9bf92cf14108931235880e9e39d/c40af/vs-code-extensions-thumbnail.png 1024w","sizes":"(min-width: 1024px) 1024px, 100vw"},"sources":[{"srcSet":"/static/c86fa9bf92cf14108931235880e9e39d/538fc/vs-code-extensions-thumbnail.webp 256w,\n/static/c86fa9bf92cf14108931235880e9e39d/97c23/vs-code-extensions-thumbnail.webp 512w,\n/static/c86fa9bf92cf14108931235880e9e39d/edfc6/vs-code-extensions-thumbnail.webp 1024w","type":"image/webp","sizes":"(min-width: 1024px) 1024px, 100vw"}]},"width":1024,"height":576}}}},"tableOfContents":{"items":[{"url":"#my-relationship-with-vs-code","title":"My Relationship With VS Code"},{"url":"#vs-code-extensions-to-avoid","title":"VS Code Extensions to Avoid","items":[{"url":"#auto-close-tag","title":"Auto Close Tag"},{"url":"#auto-rename-tag","title":"Auto Rename Tag"},{"url":"#bracket-pair-colorizer","title":"Bracket Pair Colorizer"},{"url":"#settings-sync","title":"Settings Sync"},{"url":"#path-intellisense","title":"Path Intellisense"},{"url":"#npm","title":"NPM"},{"url":"#auto-import","title":"Auto Import"},{"url":"#html-snippets","title":"HTML Snippets"},{"url":"#lorem-ipsum","title":"Lorem Ipsum"}]},{"url":"#concluding-thoughts","title":"Concluding Thoughts"}]}}},"pageContext":{"id":"cd028d42-3e5b-518a-9a89-4947a7d4a205","previousPostId":"ea407ba9-eaef-59a6-9e1f-ecdc42f3df68","nextPostId":"04c88931-c44b-54a5-83ad-d493627aa612"}},
    "staticQueryHashes": ["193347537","2011781112","2724007671","540547428","896317189","949666286"]}