Time-saving tips aboutVisual Studio Code for front-end developers

Chao
2 min readMay 2, 2019

--

Sometimes you just need the correct tool.

Photo by Todd Quackenbush on Unsplash

So I was having a lazy morning and swiping Twitter on my couch about 15 mins ago. I realized there is a new cohort (cohort 22) in the HackerYou community and they are experiencing the same struggles I had couple months ago. You would spend half an hour trying to locate the semicolons you missed. Or living the best life with that Prepos pop up. So I put together this list.

Extensions:

  • Auto Close Tag and Auto Rename Tag are great for dealing with HTML tags.
  • HTMLWrap gives you a very small but might hot key to wrap any elements with a HTML tag. Very helpful when you missed that wrapper <div> at the first go.
  • Frustrating about brackets? Try Bracket Pair Colorizer. It will give your matching bracket a same colour. This is the tip from the one and only Kate (link).
  • I am an ESL so I have Spell Checker installed after I said chick salad, instead of chicken salad. Warning: this may or may not underline things you don’t want it. If you are not comfortable with seeing underlining (just like words!) on things like, your name, skip this one.
  • Bye Prepos and hello Live Sass Compiler and Live Server.
  • If you struggling with spelling your file name correctly, try Path Intellisense.
  • Everyone and their mom’s favourite tool to format code: Prettier.
  • Once you start learning about React: use Babel, React Snippets.
  • If you are crazy enough to learn about Styled Components during bootcamp: Styled Component and Styled Component Snippets.
  • One day you may decide that Vue.js is very cool: Vue and Vue Snippets.

Existing lil nuggets:

Keep in mind, if you are unhappy about anything (the size of your tab, why your Emmet stopped working with JSX), GOOGLE it. Everything can be changed to your likings. You just haven’t found the way.

I am a firm believer of using technology to shortcut some of the struggles we have. In the end, we are in the tech industry. However, I do want to emphasize it is very very important as a coder to know your fundamentals. These are tools that mean to save your time so you can use those to think about your beautiful code.

Here are some other places you can find me on the Internet:

I coded a website for myself.

http://chaoyuezhao.com/

I write at-the-moment short blog post (people also call them tweets): https://twitter.com/ChaoyueZ

Wanted to know about my career journey? Head over: https://www.linkedin.com/in/chaoyuezhao/

And of course, you want to know what food I eat: https://www.instagram.com/chaoyue_zhao/?hl=en

--

--

Chao

A front-end web dev. Writing in my second language (English) about my third (HTML), fourth (CSS) and fifth (Javascript).