[{"data":1,"prerenderedAt":382},["ShallowReactive",2],{"blog-article-/blog/vs-code-tips":3,"blog-surround-/blog/vs-code-tips":373},{"id":4,"title":5,"body":6,"canonical":357,"date":358,"description":359,"extension":360,"featured":361,"image":362,"meta":363,"navigation":365,"ogImage":357,"path":366,"provider":367,"published":365,"seo":368,"stem":369,"tags":370,"url":357,"__hash__":372},"blog/blog/vs-code-tips.md","VS Code Tips",{"type":7,"value":8,"toc":334},"minimark",[9,14,19,23,46,49,63,67,70,83,87,90,99,103,107,124,170,174,177,181,198,231,235,244,248,257,261,268,272,280,284,292,296,304,308,317,321,330],[10,11,13],"h2",{"id":12},"vs-code-shortcuts","VS Code Shortcuts",[15,16,18],"h3",{"id":17},"select-all-words","Select all Words",[20,21,22],"p",{},"Highlight a word and press Command D and it will select all the other instances of that word meaning you can edit that word and it will edit all of the other instances of that word at the same time. To select the next word",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light github-dark","Command D\n","bash","",[31,32,33],"code",{"__ignoreMap":29},[34,35,38,42],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk","Command",[34,43,45],{"class":44},"sZZnC"," D\n",[20,47,48],{},"To select all words",[24,50,52],{"className":26,"code":51,"language":28,"meta":29,"style":29},"Command shift D\n",[31,53,54],{"__ignoreMap":29},[34,55,56,58,61],{"class":36,"line":37},[34,57,41],{"class":40},[34,59,60],{"class":44}," shift",[34,62,45],{"class":44},[10,64,66],{"id":65},"multiple-cursers","Multiple cursers",[20,68,69],{},"Press option and click to have multiple cursers. If for example you want to edit or add text in various places you can do it all at once by pressing option and clicking in the various places and then typing.",[24,71,73],{"className":26,"code":72,"language":28,"meta":29,"style":29},"Option Click\n",[31,74,75],{"__ignoreMap":29},[34,76,77,80],{"class":36,"line":37},[34,78,79],{"class":40},"Option",[34,81,82],{"class":44}," Click\n",[15,84,86],{"id":85},"create-a-file-and-folder","Create a File and Folder",[20,88,89],{},"To create a file and folder at the same time just create a new file and add the folder name followed by a slash and then the file name.",[24,91,93],{"className":26,"code":92,"language":28,"meta":29,"style":29},"components/button.tsx\n",[31,94,95],{"__ignoreMap":29},[34,96,97],{"class":36,"line":37},[34,98,92],{"class":40},[10,100,102],{"id":101},"vs-code-settings","VS Code Settings",[15,104,106],{"id":105},"monospaced-fonts","Monospaced fonts",[20,108,109,110,117,118,123],{},"To use coll fonts that turn your symbols into real looking symbols you can use ",[111,112,116],"a",{"href":113,"rel":114},"https://github.com/tonsky/FiraCode",[115],"nofollow","Fira Code"," which is free. You can ",[111,119,122],{"href":120,"rel":121},"https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions",[115],"enable on VS-code"," by selecting the font in the settings editor under \"Commonly Used\" or you can add a '.vscode/settings.json` file.",[24,125,129],{"className":126,"code":127,"language":128,"meta":29,"style":29},"language-json shiki shiki-themes github-light github-dark","{\n  \"editor.fontFamily\": \"Fira Code\",\n  \"editor.fontLigatures\": true\n}\n","json",[31,130,131,137,153,164],{"__ignoreMap":29},[34,132,133],{"class":36,"line":37},[34,134,136],{"class":135},"sVt8B","{\n",[34,138,140,144,147,150],{"class":36,"line":139},2,[34,141,143],{"class":142},"sj4cs","  \"editor.fontFamily\"",[34,145,146],{"class":135},": ",[34,148,149],{"class":44},"\"Fira Code\"",[34,151,152],{"class":135},",\n",[34,154,156,159,161],{"class":36,"line":155},3,[34,157,158],{"class":142},"  \"editor.fontLigatures\"",[34,160,146],{"class":135},[34,162,163],{"class":142},"true\n",[34,165,167],{"class":36,"line":166},4,[34,168,169],{"class":135},"}\n",[10,171,173],{"id":172},"vs-code-extensions","VS Code Extensions",[20,175,176],{},"Here is a collection of some of my favorite VS Code extensions.",[15,178,180],{"id":179},"add-a-spell-checker","Add a Spell checker",[20,182,183,184,189,190,193,194,197],{},"Install the ",[111,185,188],{"href":186,"rel":187},"https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker",[115],"spell checker Extension"," for VS Code and then add a ",[31,191,192],{},".vscode/cSpell.json"," file with an array of words for that project that you want the spell checker to ignore. Or you can go to settings, ",[31,195,196],{},"command ,"," search for spell add add the word to the \"C Spell: Dictionaries\" so it will be excluded from spellchecking for all projects.",[24,199,201],{"className":126,"code":200,"language":128,"meta":29,"style":29},"{\n  \"words\": [\"Fira\", \"Monospaced\"]\n}\n",[31,202,203,207,227],{"__ignoreMap":29},[34,204,205],{"class":36,"line":37},[34,206,136],{"class":135},[34,208,209,212,215,218,221,224],{"class":36,"line":139},[34,210,211],{"class":142},"  \"words\"",[34,213,214],{"class":135},": [",[34,216,217],{"class":44},"\"Fira\"",[34,219,220],{"class":135},", ",[34,222,223],{"class":44},"\"Monospaced\"",[34,225,226],{"class":135},"]\n",[34,228,229],{"class":36,"line":155},[34,230,169],{"class":135},[15,232,234],{"id":233},"error-lens","Error Lens",[20,236,237,238,243],{},"If you really want to highlight your errors then the ",[111,239,242],{"href":240,"rel":241},"https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens",[115],"Error Lens extension"," will be of great help. It will add the error to the end of the line so it is really easy to see and understand what the error is.",[15,245,247],{"id":246},"add-folder-icons","Add folder icons",[20,249,250,251,256],{},"The ",[111,252,255],{"href":253,"rel":254},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[115],"Material Icon Theme extension"," will add icons to your folder structure which is just nice and makes finding folders easy to see.",[10,258,260],{"id":259},"bracket-pair-colorizer","Bracket Pair Colorizer",[20,262,250,263,267],{},[111,264,260],{"href":265,"rel":266},"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer",[115]," makes it so much easier to see where your brackets start and end by showing them in different colors so much easier to see when things are going wrong.",[15,269,271],{"id":270},"formatting-toggle","Formatting Toggle",[20,273,274,275,279],{},"Sometimes you just don't want to format your code or prettier is doing things that you don't want it to so being easily able to turn it on and off is really useful. ",[111,276,271],{"href":277,"rel":278},"https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle",[115]," is a great extension.",[15,281,283],{"id":282},"vs-code-live-share","VS Code Live Share",[20,285,286,287,291],{},"This has to be one of the best extensions out there. This gives you the ability to send a link to someone so they can jump into your VS Code editor and type away meaning they can help you debug your code. ",[111,288,283],{"href":289,"rel":290},"https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare",[115]," is a great way to pair program and you have have numerous people join the session.",[15,293,295],{"id":294},"search-node-modules","Search Node Modules",[20,297,298,299,303],{},"This is one I have only recently started to use and it has been a life saver for when you have to debug anything inside node modules folder. ",[111,300,295],{"href":301,"rel":302},"https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules",[115]," allows you to easily navigate the file inside your project's node_modules directory.",[15,305,307],{"id":306},"tailwind-intellisense","Tailwind Intellisense",[20,309,310,311,316],{},"Of course if you are a TailwindCSS fan like me then this is a must. ",[111,312,315],{"href":313,"rel":314},"https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss",[115],"Tailwind CSS Intellisense"," gives you advanced features such as autocomplete, syntax highlighting, and linting.",[10,318,320],{"id":319},"conclusion","Conclusion",[20,322,323,324,329],{},"Of course there are many other extensions that I have in use some of them are installed and probably never used but for sure the above are some of my favorite and ones I use all the time. Feel free to share yours with me on ",[111,325,328],{"href":326,"rel":327},"https://twitter.com/debs_obrien",[115],"twitter",". Maybe there is a cool extension out there that I am missing.",[331,332,333],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":29,"searchDepth":139,"depth":139,"links":335},[336,339,342,345,350,356],{"id":12,"depth":139,"text":13,"children":337},[338],{"id":17,"depth":155,"text":18},{"id":65,"depth":139,"text":66,"children":340},[341],{"id":85,"depth":155,"text":86},{"id":101,"depth":139,"text":102,"children":343},[344],{"id":105,"depth":155,"text":106},{"id":172,"depth":139,"text":173,"children":346},[347,348,349],{"id":179,"depth":155,"text":180},{"id":233,"depth":155,"text":234},{"id":246,"depth":155,"text":247},{"id":259,"depth":139,"text":260,"children":351},[352,353,354,355],{"id":270,"depth":155,"text":271},{"id":282,"depth":155,"text":283},{"id":294,"depth":155,"text":295},{"id":306,"depth":155,"text":307},{"id":319,"depth":139,"text":320},null,"2021-05-13","Tips, shortcuts and extensions to make working with VS Code easier so you can developer faster and let the tools do the job for you.","md",false,"photo-1510751007277-36932aac9ebd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop",{"loading":364},"eager",true,"/blog/vs-code-tips","imgix",{"title":5,"description":359},"blog/vs-code-tips",[371],"vs-code","j1eGaEsf6i40QAFjUR0huyxRRIKGkNxDPfcN9cVERMs",[374,378],{"title":375,"path":376,"stem":377,"children":-1},"Sharing React Components across Multiple Applications","/blog/sharing-react-components-across-multiple-applications","blog/sharing-react-components-across-multiple-applications",{"title":379,"path":380,"stem":381,"children":-1},"Amazing Things are Going to Happen","/blog/amazing-things-are-going-to-happen","blog/amazing-things-are-going-to-happen",1790839748667]