[{"data":1,"prerenderedAt":673},["ShallowReactive",2],{"/articles/vs-code-extensions":3,"content-query-KjuTuQPmDs":393},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"image":16,"readingTime":17,"body":18,"_type":387,"_id":388,"_source":389,"_file":390,"_stem":391,"_extension":392},"/articles/vs-code-extensions","articles",false,"","Must-Have VS Code Extensions for Web Developers","Enhance your coding experience with these essential Visual Studio Code extensions for web development.","20/07/2023",[12,13,14,15],"VS Code","Extensions","Web Development","Programming","https://portfolio-hughherschell.vercel.app/articles/vs-code-extensions.png","4",{"type":19,"children":20,"toc":361},"root",[21,30,36,45,61,72,82,95,104,113,126,135,144,157,166,175,188,197,206,219,228,237,250,259,268,281,290,299,312,321,330,336,341,347],{"type":22,"tag":23,"props":24,"children":26},"element","h2",{"id":25},"introduction",[27],{"type":28,"value":29},"text","Introduction",{"type":22,"tag":31,"props":32,"children":33},"p",{},[34],{"type":28,"value":35},"Visual Studio Code (VS Code) is one of the most popular Integrated Development Environments (IDEs) among web developers, thanks to its lightweight nature, extensive features, and vibrant ecosystem of extensions. Extensions can significantly enhance your productivity, streamline your workflow, and provide powerful tools for various programming tasks. Here’s a curated list of must-have VS Code extensions for web development.",{"type":22,"tag":31,"props":37,"children":38},{},[39],{"type":22,"tag":40,"props":41,"children":44},"img",{"alt":42,"src":43},"preview","/articles/vs-code-extensions.png",[],{"type":22,"tag":46,"props":47,"children":49},"h3",{"id":48},"_1-night-owl",[50,52],{"type":28,"value":51},"1. ",{"type":22,"tag":53,"props":54,"children":58},"a",{"href":55,"rel":56},"https://marketplace.visualstudio.com/items?itemName=sdras.night-owl",[57],"nofollow",[59],{"type":28,"value":60},"Night Owl",{"type":22,"tag":31,"props":62,"children":63},{},[64,70],{"type":22,"tag":65,"props":66,"children":67},"strong",{},[68],{"type":28,"value":69},"Description",{"type":28,"value":71},": Night Owl is a beautifully crafted theme that is easy on the eyes, especially for night owls who work late into the evening. Its cool color palette provides excellent contrast for readability without straining your eyes.",{"type":22,"tag":31,"props":73,"children":74},{},[75,80],{"type":22,"tag":65,"props":76,"children":77},{},[78],{"type":28,"value":79},"Why You Need It",{"type":28,"value":81},": A comfortable theme helps reduce eye strain during long coding sessions, improving focus and productivity.",{"type":22,"tag":46,"props":83,"children":85},{"id":84},"_2-auto-rename-tag",[86,88],{"type":28,"value":87},"2. ",{"type":22,"tag":53,"props":89,"children":92},{"href":90,"rel":91},"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag",[57],[93],{"type":28,"value":94},"Auto Rename Tag",{"type":22,"tag":31,"props":96,"children":97},{},[98,102],{"type":22,"tag":65,"props":99,"children":100},{},[101],{"type":28,"value":69},{"type":28,"value":103},": This extension automatically renames paired HTML and XML tags, making it easier to maintain code.",{"type":22,"tag":31,"props":105,"children":106},{},[107,111],{"type":22,"tag":65,"props":108,"children":109},{},[110],{"type":28,"value":79},{"type":28,"value":112},": It saves time and reduces errors by ensuring that when you change one tag, the corresponding tag is updated automatically.",{"type":22,"tag":46,"props":114,"children":116},{"id":115},"_3-bracket-pair-colorizer",[117,119],{"type":28,"value":118},"3. ",{"type":22,"tag":53,"props":120,"children":123},{"href":121,"rel":122},"https://marketplace.visualstudio.com/items?itemName=BracketPairColorDLW.bracket-pair-color-dlw",[57],[124],{"type":28,"value":125},"Bracket Pair Colorizer",{"type":22,"tag":31,"props":127,"children":128},{},[129,133],{"type":22,"tag":65,"props":130,"children":131},{},[132],{"type":28,"value":69},{"type":28,"value":134},": This extension allows you to colorize matching brackets, making it easier to visualize code structure.",{"type":22,"tag":31,"props":136,"children":137},{},[138,142],{"type":22,"tag":65,"props":139,"children":140},{},[141],{"type":28,"value":79},{"type":28,"value":143},": It helps you quickly identify nested code blocks, improving readability and making it easier to debug complex code.",{"type":22,"tag":46,"props":145,"children":147},{"id":146},"_4-indent-rainbow",[148,150],{"type":28,"value":149},"4. ",{"type":22,"tag":53,"props":151,"children":154},{"href":152,"rel":153},"https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow",[57],[155],{"type":28,"value":156},"Indent Rainbow",{"type":22,"tag":31,"props":158,"children":159},{},[160,164],{"type":22,"tag":65,"props":161,"children":162},{},[163],{"type":28,"value":69},{"type":28,"value":165},": Indent Rainbow colorizes indentation levels, helping you visualize the structure of your code at a glance.",{"type":22,"tag":31,"props":167,"children":168},{},[169,173],{"type":22,"tag":65,"props":170,"children":171},{},[172],{"type":28,"value":79},{"type":28,"value":174},": It’s particularly useful for languages like JavaScript and Python, where indentation is crucial for structure and readability.",{"type":22,"tag":46,"props":176,"children":178},{"id":177},"_5-live-server",[179,181],{"type":28,"value":180},"5. ",{"type":22,"tag":53,"props":182,"children":185},{"href":183,"rel":184},"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",[57],[186],{"type":28,"value":187},"Live Server",{"type":22,"tag":31,"props":189,"children":190},{},[191,195],{"type":22,"tag":65,"props":192,"children":193},{},[194],{"type":28,"value":69},{"type":28,"value":196},": Live Server launches a local development server with live reload capability for static and dynamic pages.",{"type":22,"tag":31,"props":198,"children":199},{},[200,204],{"type":22,"tag":65,"props":201,"children":202},{},[203],{"type":28,"value":79},{"type":28,"value":205},": It allows you to see changes in real-time as you code, making the development process faster and more efficient.",{"type":22,"tag":46,"props":207,"children":209},{"id":208},"_6-multiple-cursor-case-preserve",[210,212],{"type":28,"value":211},"6. ",{"type":22,"tag":53,"props":213,"children":216},{"href":214,"rel":215},"https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve",[57],[217],{"type":28,"value":218},"Multiple Cursor Case Preserve",{"type":22,"tag":31,"props":220,"children":221},{},[222,226],{"type":22,"tag":65,"props":223,"children":224},{},[225],{"type":28,"value":69},{"type":28,"value":227},": This extension allows you to preserve the case of text when using multiple cursors.",{"type":22,"tag":31,"props":229,"children":230},{},[231,235],{"type":22,"tag":65,"props":232,"children":233},{},[234],{"type":28,"value":79},{"type":28,"value":236},": It enhances productivity by enabling you to edit multiple lines simultaneously while maintaining the original text case.",{"type":22,"tag":46,"props":238,"children":240},{"id":239},"_7-path-intellisense",[241,243],{"type":28,"value":242},"7. ",{"type":22,"tag":53,"props":244,"children":247},{"href":245,"rel":246},"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense",[57],[248],{"type":28,"value":249},"Path Intellisense",{"type":22,"tag":31,"props":251,"children":252},{},[253,257],{"type":22,"tag":65,"props":254,"children":255},{},[256],{"type":28,"value":69},{"type":28,"value":258},": Path Intellisense provides autocompletion for file paths, making it easier to navigate your project structure.",{"type":22,"tag":31,"props":260,"children":261},{},[262,266],{"type":22,"tag":65,"props":263,"children":264},{},[265],{"type":28,"value":79},{"type":28,"value":267},": It saves time and reduces errors when linking files and resources in your code.",{"type":22,"tag":46,"props":269,"children":271},{"id":270},"_8-prettier-code-formatter",[272,274],{"type":28,"value":273},"8. ",{"type":22,"tag":53,"props":275,"children":278},{"href":276,"rel":277},"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode",[57],[279],{"type":28,"value":280},"Prettier - Code Formatter",{"type":22,"tag":31,"props":282,"children":283},{},[284,288],{"type":22,"tag":65,"props":285,"children":286},{},[287],{"type":28,"value":69},{"type":28,"value":289},": Prettier is an opinionated code formatter that supports many languages and formats code according to specified rules.",{"type":22,"tag":31,"props":291,"children":292},{},[293,297],{"type":22,"tag":65,"props":294,"children":295},{},[296],{"type":28,"value":79},{"type":28,"value":298},": It helps maintain consistent code style across your projects, improving readability and maintainability.",{"type":22,"tag":46,"props":300,"children":302},{"id":301},"_9-material-icon-theme",[303,305],{"type":28,"value":304},"9. ",{"type":22,"tag":53,"props":306,"children":309},{"href":307,"rel":308},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[57],[310],{"type":28,"value":311},"Material Icon Theme",{"type":22,"tag":31,"props":313,"children":314},{},[315,319],{"type":22,"tag":65,"props":316,"children":317},{},[318],{"type":28,"value":69},{"type":28,"value":320},": This extension changes the default file icons to a Material Design style, making it visually appealing and easier to identify file types.",{"type":22,"tag":31,"props":322,"children":323},{},[324,328],{"type":22,"tag":65,"props":325,"children":326},{},[327],{"type":28,"value":79},{"type":28,"value":329},": A visually organized project structure aids in quickly locating files, enhancing your overall coding experience.",{"type":22,"tag":46,"props":331,"children":333},{"id":332},"conclusion",[334],{"type":28,"value":335},"Conclusion",{"type":22,"tag":31,"props":337,"children":338},{},[339],{"type":28,"value":340},"Integrating these must-have extensions into your Visual Studio Code setup can greatly enhance your web development workflow. From improving code readability to streamlining the coding process, these tools are essential for any developer looking to optimize their productivity. Happy coding! 😊",{"type":22,"tag":46,"props":342,"children":344},{"id":343},"additional-resources",[345],{"type":28,"value":346},"Additional Resources",{"type":22,"tag":31,"props":348,"children":349},{},[350,352,359],{"type":28,"value":351},"For more information and to explore other extensions, visit the ",{"type":22,"tag":53,"props":353,"children":356},{"href":354,"rel":355},"https://marketplace.visualstudio.com/vscode",[57],[357],{"type":28,"value":358},"Visual Studio Code Marketplace",{"type":28,"value":360},".",{"title":7,"searchDepth":362,"depth":362,"links":363},2,[364],{"id":25,"depth":362,"text":29,"children":365},[366,369,371,373,375,377,379,381,383,385,386],{"id":48,"depth":367,"text":368},3,"1. Night Owl",{"id":84,"depth":367,"text":370},"2. Auto Rename Tag",{"id":115,"depth":367,"text":372},"3. Bracket Pair Colorizer",{"id":146,"depth":367,"text":374},"4. Indent Rainbow",{"id":177,"depth":367,"text":376},"5. Live Server",{"id":208,"depth":367,"text":378},"6. Multiple Cursor Case Preserve",{"id":239,"depth":367,"text":380},"7. Path Intellisense",{"id":270,"depth":367,"text":382},"8. Prettier - Code Formatter",{"id":301,"depth":367,"text":384},"9. Material Icon Theme",{"id":332,"depth":367,"text":335},{"id":343,"depth":367,"text":346},"markdown","content:articles:vs-code-extensions.md","content","articles/vs-code-extensions.md","articles/vs-code-extensions","md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":394,"image":16,"readingTime":17,"body":395,"_type":387,"_id":388,"_source":389,"_file":390,"_stem":391,"_extension":392},[12,13,14,15],{"type":19,"children":396,"toc":658},[397,401,405,411,420,428,436,445,453,461,470,478,486,495,503,511,520,528,536,545,553,561,570,578,586,595,603,611,620,628,636,640,644,648],{"type":22,"tag":23,"props":398,"children":399},{"id":25},[400],{"type":28,"value":29},{"type":22,"tag":31,"props":402,"children":403},{},[404],{"type":28,"value":35},{"type":22,"tag":31,"props":406,"children":407},{},[408],{"type":22,"tag":40,"props":409,"children":410},{"alt":42,"src":43},[],{"type":22,"tag":46,"props":412,"children":413},{"id":48},[414,415],{"type":28,"value":51},{"type":22,"tag":53,"props":416,"children":418},{"href":55,"rel":417},[57],[419],{"type":28,"value":60},{"type":22,"tag":31,"props":421,"children":422},{},[423,427],{"type":22,"tag":65,"props":424,"children":425},{},[426],{"type":28,"value":69},{"type":28,"value":71},{"type":22,"tag":31,"props":429,"children":430},{},[431,435],{"type":22,"tag":65,"props":432,"children":433},{},[434],{"type":28,"value":79},{"type":28,"value":81},{"type":22,"tag":46,"props":437,"children":438},{"id":84},[439,440],{"type":28,"value":87},{"type":22,"tag":53,"props":441,"children":443},{"href":90,"rel":442},[57],[444],{"type":28,"value":94},{"type":22,"tag":31,"props":446,"children":447},{},[448,452],{"type":22,"tag":65,"props":449,"children":450},{},[451],{"type":28,"value":69},{"type":28,"value":103},{"type":22,"tag":31,"props":454,"children":455},{},[456,460],{"type":22,"tag":65,"props":457,"children":458},{},[459],{"type":28,"value":79},{"type":28,"value":112},{"type":22,"tag":46,"props":462,"children":463},{"id":115},[464,465],{"type":28,"value":118},{"type":22,"tag":53,"props":466,"children":468},{"href":121,"rel":467},[57],[469],{"type":28,"value":125},{"type":22,"tag":31,"props":471,"children":472},{},[473,477],{"type":22,"tag":65,"props":474,"children":475},{},[476],{"type":28,"value":69},{"type":28,"value":134},{"type":22,"tag":31,"props":479,"children":480},{},[481,485],{"type":22,"tag":65,"props":482,"children":483},{},[484],{"type":28,"value":79},{"type":28,"value":143},{"type":22,"tag":46,"props":487,"children":488},{"id":146},[489,490],{"type":28,"value":149},{"type":22,"tag":53,"props":491,"children":493},{"href":152,"rel":492},[57],[494],{"type":28,"value":156},{"type":22,"tag":31,"props":496,"children":497},{},[498,502],{"type":22,"tag":65,"props":499,"children":500},{},[501],{"type":28,"value":69},{"type":28,"value":165},{"type":22,"tag":31,"props":504,"children":505},{},[506,510],{"type":22,"tag":65,"props":507,"children":508},{},[509],{"type":28,"value":79},{"type":28,"value":174},{"type":22,"tag":46,"props":512,"children":513},{"id":177},[514,515],{"type":28,"value":180},{"type":22,"tag":53,"props":516,"children":518},{"href":183,"rel":517},[57],[519],{"type":28,"value":187},{"type":22,"tag":31,"props":521,"children":522},{},[523,527],{"type":22,"tag":65,"props":524,"children":525},{},[526],{"type":28,"value":69},{"type":28,"value":196},{"type":22,"tag":31,"props":529,"children":530},{},[531,535],{"type":22,"tag":65,"props":532,"children":533},{},[534],{"type":28,"value":79},{"type":28,"value":205},{"type":22,"tag":46,"props":537,"children":538},{"id":208},[539,540],{"type":28,"value":211},{"type":22,"tag":53,"props":541,"children":543},{"href":214,"rel":542},[57],[544],{"type":28,"value":218},{"type":22,"tag":31,"props":546,"children":547},{},[548,552],{"type":22,"tag":65,"props":549,"children":550},{},[551],{"type":28,"value":69},{"type":28,"value":227},{"type":22,"tag":31,"props":554,"children":555},{},[556,560],{"type":22,"tag":65,"props":557,"children":558},{},[559],{"type":28,"value":79},{"type":28,"value":236},{"type":22,"tag":46,"props":562,"children":563},{"id":239},[564,565],{"type":28,"value":242},{"type":22,"tag":53,"props":566,"children":568},{"href":245,"rel":567},[57],[569],{"type":28,"value":249},{"type":22,"tag":31,"props":571,"children":572},{},[573,577],{"type":22,"tag":65,"props":574,"children":575},{},[576],{"type":28,"value":69},{"type":28,"value":258},{"type":22,"tag":31,"props":579,"children":580},{},[581,585],{"type":22,"tag":65,"props":582,"children":583},{},[584],{"type":28,"value":79},{"type":28,"value":267},{"type":22,"tag":46,"props":587,"children":588},{"id":270},[589,590],{"type":28,"value":273},{"type":22,"tag":53,"props":591,"children":593},{"href":276,"rel":592},[57],[594],{"type":28,"value":280},{"type":22,"tag":31,"props":596,"children":597},{},[598,602],{"type":22,"tag":65,"props":599,"children":600},{},[601],{"type":28,"value":69},{"type":28,"value":289},{"type":22,"tag":31,"props":604,"children":605},{},[606,610],{"type":22,"tag":65,"props":607,"children":608},{},[609],{"type":28,"value":79},{"type":28,"value":298},{"type":22,"tag":46,"props":612,"children":613},{"id":301},[614,615],{"type":28,"value":304},{"type":22,"tag":53,"props":616,"children":618},{"href":307,"rel":617},[57],[619],{"type":28,"value":311},{"type":22,"tag":31,"props":621,"children":622},{},[623,627],{"type":22,"tag":65,"props":624,"children":625},{},[626],{"type":28,"value":69},{"type":28,"value":320},{"type":22,"tag":31,"props":629,"children":630},{},[631,635],{"type":22,"tag":65,"props":632,"children":633},{},[634],{"type":28,"value":79},{"type":28,"value":329},{"type":22,"tag":46,"props":637,"children":638},{"id":332},[639],{"type":28,"value":335},{"type":22,"tag":31,"props":641,"children":642},{},[643],{"type":28,"value":340},{"type":22,"tag":46,"props":645,"children":646},{"id":343},[647],{"type":28,"value":346},{"type":22,"tag":31,"props":649,"children":650},{},[651,652,657],{"type":28,"value":351},{"type":22,"tag":53,"props":653,"children":655},{"href":354,"rel":654},[57],[656],{"type":28,"value":358},{"type":28,"value":360},{"title":7,"searchDepth":362,"depth":362,"links":659},[660],{"id":25,"depth":362,"text":29,"children":661},[662,663,664,665,666,667,668,669,670,671,672],{"id":48,"depth":367,"text":368},{"id":84,"depth":367,"text":370},{"id":115,"depth":367,"text":372},{"id":146,"depth":367,"text":374},{"id":177,"depth":367,"text":376},{"id":208,"depth":367,"text":378},{"id":239,"depth":367,"text":380},{"id":270,"depth":367,"text":382},{"id":301,"depth":367,"text":384},{"id":332,"depth":367,"text":335},{"id":343,"depth":367,"text":346},1731090035407]