[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"article-vs-code-extension-for-better-developer-experience":3,"authors":383},{"id":4,"title":5,"author":6,"body":7,"date":373,"description":374,"extension":375,"meta":376,"navigation":377,"path":378,"seo":379,"stem":380,"thumbnail":381,"__hash__":382},"article\u002Farticle\u002Fvs-code-extension-for-better-developer-experience.md","VS Code Extension For Better Developer Experience","ashwin",{"type":8,"value":9,"toc":367},"minimark",[10,14,19],[11,12,13],"p",{},"Today Let's look at some of the VS Code extension that will power up you developer experience.",[15,16,18],"h2",{"id":17},"live-server","Live Server",[20,21,27,30,40,43,47],"image-responsive",{"imageurl":22,"alt":18,"className":23,":width":25,":height":25,"tag":26},"https:\u002F\u002Fi.imgur.com\u002FPo1oqJ4.png",[24],"md-image","'60'","div",[11,28,29],{},"This allows us to automatically reload the page when you change the code in your IDE",[11,31,32,33],{},"Link: ",[34,35,39],"a",{"href":36,"rel":37},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ziishaned.livereload",[38],"nofollow","Live server",[41,42],"br",{},[15,44,46],{"id":45},"quokkajs","Quokka.js",[20,48,51,54,60,62,66],{"imageurl":49,"alt":46,"className":50,":width":25,":height":25,"tag":26},"https:\u002F\u002Fwallabyjs.gallerycdn.vsassets.io\u002Fextensions\u002Fwallabyjs\u002Fquokka-vscode\u002F1.0.294\u002F1591156282718\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,52,53],{},"Quokka.js is automagically compute the results you are typing and print the results in the IDE itself.",[11,55,32,56],{},[34,57,46],{"href":58,"rel":59},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=WallabyJs.quokka-vscode",[38],[41,61],{},[15,63,65],{"id":64},"code-spell-checker","Code Spell Checker",[20,67,70,73,79,81,85],{"imageurl":68,"alt":65,"className":69,":width":25,":height":25,"tag":26},"https:\u002F\u002Fstreetsidesoftware.gallerycdn.vsassets.io\u002Fextensions\u002Fstreetsidesoftware\u002Fcode-spell-checker\u002F1.9.0\u002F1589974448396\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,71,72],{},"This spell checker will report some common spelling errors. This works well with camel case code.",[11,74,32,75],{},[34,76,65],{"href":77,"rel":78},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=streetsidesoftware.code-spell-checker",[38],[41,80],{},[15,82,84],{"id":83},"gitlens","GitLens",[20,86,89,92,98,100,104],{"imageurl":87,"alt":84,"className":88,":width":25,":height":25,"tag":26},"https:\u002F\u002Feamodio.gallerycdn.vsassets.io\u002Fextensions\u002Feamodio\u002Fgitlens\u002F10.2.1\u002F1581370309622\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,90,91],{},"GitLens supercharges the git capabilities built int VS Code. It helps you to visualize code authorrship at a glance via Git Blame annotations.",[11,93,32,94],{},[34,95,84],{"href":96,"rel":97},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=eamodio.gitlens",[38],[41,99],{},[15,101,103],{"id":102},"prettier-code-formatter","Prettier (Code Formatter)",[20,105,109,112,118,120,124],{"imageurl":106,"alt":107,"className":108,":width":25,":height":25,"tag":26},"https:\u002F\u002Fesbenp.gallerycdn.vsassets.io\u002Fextensions\u002Fesbenp\u002Fprettier-vscode\u002F5.0.0\u002F1591108979949\u002FMicrosoft.VisualStudio.Services.Icons.Default","Prettier",[24],[11,110,111],{},"Pretteir is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules",[11,113,32,114],{},[34,115,107],{"href":116,"rel":117},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=esbenp.prettier-vscode",[38],[41,119],{},[15,121,123],{"id":122},"eslint","ESLint",[20,125,128,131,137,139,143],{"imageurl":126,"alt":123,"className":127,":width":25,":height":25,"tag":26},"https:\u002F\u002Fdbaeumer.gallerycdn.vsassets.io\u002Fextensions\u002Fdbaeumer\u002Fvscode-eslint\u002F2.1.5\u002F1587372149666\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,129,130],{},"ESLint is a static code analysis tool for identifying problematic patterns found in JS Code. Rules in ESLint are configurable.",[11,132,32,133],{},[34,134,123],{"href":135,"rel":136},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=dbaeumer.vscode-eslint",[38],[41,138],{},[15,140,142],{"id":141},"vscode-icons","VSCode Icons",[20,144,147,150,157,159,163],{"imageurl":145,"alt":142,"className":146,":width":25,":height":25,"tag":26},"https:\u002F\u002Fvscode-icons-team.gallerycdn.vsassets.io\u002Fextensions\u002Fvscode-icons-team\u002Fvscode-icons\u002F10.1.1\u002F1586677542724\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,148,149],{},"This will provide icons next to file names in a tree view based on file extensions.\nThis makes it much easier to identify files at glance.",[11,151,32,152],{},[34,153,156],{"href":154,"rel":155},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=vscode-icons-team.vscode-icons",[38],"VSCode-Icons",[41,158],{},[15,160,162],{"id":161},"live-sass-compiler","Live Sass Compiler",[20,164,167,170,177,179,183],{"imageurl":165,"alt":162,"className":166,":width":25,":height":25,"tag":26},"https:\u002F\u002Fritwickdey.gallerycdn.vsassets.io\u002Fextensions\u002Fritwickdey\u002Flive-sass\u002F3.0.0\u002F1531332580258\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,168,169],{},"This extension helps you to compile\u002Ftranspile your SASS\u002FSCSS files to CSS files in real time with a live browser reload.",[11,171,32,172],{},[34,173,176],{"href":174,"rel":175},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ritwickdey.live-sass",[38],"Live-Sass-Compiler",[41,178],{},[15,180,182],{"id":181},"js-es6-code-snippets","JS (ES6) Code Snippets",[20,184,187,190,197,199,203],{"imageurl":185,"alt":182,"className":186,":width":25,":height":25,"tag":26},"https:\u002F\u002Fxabikos.gallerycdn.vsassets.io\u002Fextensions\u002Fxabikos\u002Fjavascriptsnippets\u002F1.8.0\u002F1587489699375\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,188,189],{},"This extension contains code snippets for javascript in ES6 syntax (supports both Typescript & Javascript).",[11,191,32,192],{},[34,193,196],{"href":194,"rel":195},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=xabikos.JavaScriptSnippets",[38],"JS-Code-Snippets",[41,198],{},[15,200,202],{"id":201},"browser-preview","Browser Preview",[20,204,207,210,217,219,223],{"imageurl":205,"alt":202,"className":206,":width":25,":height":25,"tag":26},"https:\u002F\u002Fauchenberg.gallerycdn.vsassets.io\u002Fextensions\u002Fauchenberg\u002Fvscode-browser-preview\u002F0.6.7\u002F1587959208888\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,208,209],{},"Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug with.",[11,211,32,212],{},[34,213,216],{"href":214,"rel":215},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=auchenberg.vscode-browser-preview",[38],"Browser-Preview",[41,218],{},[15,220,222],{"id":221},"path-intellisense","Path Intellisense",[20,224,227,230,237,239,243],{"imageurl":225,"alt":222,"className":226,":width":25,":height":25,"tag":26},"https:\u002F\u002Fchristian-kohler.gallerycdn.vsassets.io\u002Fextensions\u002Fchristian-kohler\u002Fpath-intellisense\u002F2.2.0\u002F1591375562003\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,228,229],{},"This will autocomplete path and filenames in your code.",[11,231,32,232],{},[34,233,236],{"href":234,"rel":235},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=christian-kohler.path-intellisense",[38],"Path-Intellisense",[41,238],{},[15,240,242],{"id":241},"bracket-pair-colorizer","Bracket Pair Colorizer",[20,244,247,250,256,258,262],{"imageurl":245,"alt":242,"className":246,":width":25,":height":25,"tag":26},"https:\u002F\u002Fcoenraads.gallerycdn.vsassets.io\u002Fextensions\u002Fcoenraads\u002Fbracket-pair-colorizer-2\u002F0.1.4\u002F1590484682253\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,248,249],{},"This exetension allows matching brackets to be identified with colors. The user can define which characters to match and which colors to use.",[11,251,32,252],{},[34,253,242],{"href":254,"rel":255},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=CoenraadS.bracket-pair-colorizer-2",[38],[41,257],{},[15,259,261],{"id":260},"vim","VIM",[20,263,266,269,275,277,281],{"imageurl":264,"alt":261,"className":265,":width":25,":height":25,"tag":26},"https:\u002F\u002Fvscodevim.gallerycdn.vsassets.io\u002Fextensions\u002Fvscodevim\u002Fvim\u002F1.14.5\u002F1590120945246\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,267,268],{},"VS Code VIM is a Vim emulator for VS Code, bringing the power of Vim to your text editor.",[11,270,32,271],{},[34,272,261],{"href":273,"rel":274},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=vscodevim.vim",[38],[41,276],{},[15,278,280],{"id":279},"todo-highlighter","TODO Highlighter",[20,282,285,288,295,297,301],{"imageurl":283,"alt":280,"className":284,":width":25,":height":25,"tag":26},"https:\u002F\u002Fgruntfuggly.gallerycdn.vsassets.io\u002Fextensions\u002Fgruntfuggly\u002Ftodo-tree\u002F0.0.176\u002F1590014671644\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,286,287],{},"Highlight TODO, FIXME and other annotations within your code.",[11,289,32,290],{},[34,291,294],{"href":292,"rel":293},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Gruntfuggly.todo-tree",[38],"TODO-Highlighter",[41,296],{},[15,298,300],{"id":299},"es6-string-html-highlighter","ES6 String HTML Highlighter",[20,302,305,308,315,317,321],{"imageurl":303,"alt":280,"className":304,":width":25,":height":25,"tag":26},"https:\u002F\u002Ftobermory.gallerycdn.vsassets.io\u002Fextensions\u002Ftobermory\u002Fes6-string-html\u002F2.1.0\u002F1601971700872\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,306,307],{},"Highlight HTML inside ES6 syntax.",[11,309,32,310],{},[34,311,314],{"href":312,"rel":313},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Tobermory.es6-string-html",[38],"ES6 String HTML",[41,316],{},[15,318,320],{"id":319},"color-highlight","Color Highlight",[20,322,325,328,334,336,340,346],{"imageurl":323,"alt":320,"className":324,":width":25,":height":25,"tag":26},"https:\u002F\u002Fnaumovs.gallerycdn.vsassets.io\u002Fextensions\u002Fnaumovs\u002Fcolor-highlight\u002F2.3.0\u002F1499789961213\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,326,327],{},"This extension styles CSS\u002FWeb colors found in your document so you can see what colors they are, without needing to open the page.",[11,329,32,330],{},[34,331,320],{"href":332,"rel":333},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=naumovs.color-highlight",[38],[41,335],{},[15,337,339],{"id":338},"settings-sync","Settings Sync",[341,342,343],"blockquote",{},[11,344,345],{},"Honourable mention",[20,347,350,353,360,362],{"imageurl":348,"alt":339,"className":349,":width":25,":height":25,"tag":26},"https:\u002F\u002Fshan.gallerycdn.vsassets.io\u002Fextensions\u002Fshan\u002Fcode-settings-sync\u002F3.4.3\u002F1569243788505\u002FMicrosoft.VisualStudio.Services.Icons.Default",[24],[11,351,352],{},"In case you need to sync your VS Code settings (Configs and extensions), you could use the settings Sync extension (uses Github's Gist to sync).",[11,354,32,355],{},[34,356,359],{"href":357,"rel":358},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Shan.code-settings-sync",[38],"Settings-Sync",[41,361],{},[11,363,364,365],{},"Hope you found this short article useful. If so hit the 👍🏻 ❤️\n",[41,366],{},{"title":368,"searchDepth":369,"depth":369,"links":370},"",2,[371,372],{"id":17,"depth":369,"text":18},{"id":45,"depth":369,"text":46},"2020-06-07T06:00:59.142Z","Some of the useful VS Code extensions for better DX","md",{},true,"\u002Farticle\u002Fvs-code-extension-for-better-developer-experience",{"title":5,"description":374},"article\u002Fvs-code-extension-for-better-developer-experience","\u002Fimg\u002Fvscode-extention.jpg","jDeVa2OIVv3XR6iTuDWOVAoZQtg2Gqt5P0drmo4HtEI",{"id":384,"extension":385,"meta":386,"stem":397,"__hash__":398},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":387},[388,392],{"id":6,"fullName":389,"description":390,"image":391},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":393,"fullName":394,"description":395,"image":396},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479717]