Quick Tips: Level Up Your Workflow

Greetings

Hi! My name is Coby.

A year ago, I didn't know how to code at all. Today I can build a full-stack web application from scratch! (thanks bootcamp! 😅) While I don't claim to be even close to the best MERN developer with under a year of experience around, I feel like I've at least learned some things worth sharing. I'll do my best to keep this up to date. This is also my first foray into blogging about tech things, so any feedback is appreciated.

With that out of the way, let's get into it!

Visual Studio Code Extensions

Rainbow Tags

You'll likely be starting your full-stack journey in the realm of HTML. HTML can feel very daunting to debug. Have you ever had an unclosed div cause massive headaches? Why are all my divs blue?!

With Rainbow Tags, your HTML will be SOOO much more readable and easier to hunt for bugs. As the name suggests, Rainbow Tags colors your HTML tags so it is easier to spot when an element is missing a closing tag or is out of place.

(protip: if you're using something like Handlebars and you still want rainbowtags to work, you can set "rainbowTags.allowEverywhere": true in your vscode settings.JSON (I'll go over how to find this file later in the article)

Bracket Pair Colorizer

Just like Rainbow Tags but for JavaScript parentheses and brackets. The idea is the same. Instead of hunting down missing closing brackets, the Colorizer makes it a lot easier to spot unterminated functions or console.log statements.

Speaking of console.logs....

ES7 React/Redux/GraphQL/React-Native snippets

You may be wondering why I would include this extension in a guide aimed at newer programmers. There is only one command snippet I use outside of React from this extension, but I use it so much and it saves so much time I thought it would be worth including.

Behold, the humble console.log() snippet! Simply type clg into your VScode editor, hit tab, and voila! console.log(object) is outputted to your file with the cursor ready to overwrite object. I'm not sure how many keystrokes this snippet has saved me, but likely thousands.

Edit: There is a built-in version of this! but it's not as snappy. The built-in version snippet is accessed by typing log then you can select the snippet from the context menu that pops up.

VSCode Shortcuts

Some of these may be familiar to you, regardless, I wanted to put them all in one place. Check this link for more VSCode tips and tricks!

Here is a great cheat sheet for the macOS shortcuts.

Ctrl + shift + P (win) shift + cmd + P (mac)

ctrl + shift + p (win)

shift + cmd + P (mac)

This command is great because it lets you find things that may otherwise take a bit of menu diving.
Running ctrl+shift+p opens up a search bar at the top of your workspace. Most of the time, I use this if I need to find my settings.json and change a value (like to get rainbow tags to work in handlebars). The other main use I have for this command is reloading the window, which refreshes your workspace without needed to close the app.

alt + upArrow/downArrow (win/mac)

alt + upArrow || alt + downArrow

You may hear that using the mouse is slow and 'bad'. I'm not going to tell you that because it's silly, but I personally like to keep my hands on the keyboard (but seriously, I use my mouse a TON).

alt + up or down lets you move the line of code that your cursor is on (or a selected block) and move it up or down one line. I find this a lot smoother than cut + paste or selecting the line with my mouse and dragging it for a few reasons. Add shift (alt + shift + arrow) and it will COPY the line above or below the current line!

alt + shift + F (win) shift + alt + F (mac)

alt + shift + f (win)

shift + alt + f (mac)

If you're like me, you're not always concerned with formatting as you're coding. It's easy to get into the habit of not indenting or properly spacing our code because JavaScript is so lax about these things. Humans on the other hand are NOT so chill about this, and for that reason we want our code to be neat and legible to our fellow humans.

In comes alt + shift + f to save us from ourselves! This command will automatically format your code based on some default formatting rules (challenge: can you find these settings with your newfound ctrl + shift + p powers?!).

There's a built-in formatter, or you can install an extension like Prettier that you can configure to do your own thing! I personally have stuck with the built-in formatter, because I haven't gotten around to setting up Prettier.

Other

Outside of VSCode and its extensions, here are some other thing's I've found helpful in my coding journey:

Typora

Typora is a markdown editor (currently in beta). I love Typora because It is simultaneously in preview-mode and write-mode. Want to see how a line will look? just move your cursor to a new line. Want to see how a line looks in markdown? Yup, just move your cursor to that line!
My favorite feature of Typora and the one that has made it my default note-taking app is the fact that I can use the Windows snip command (win + shift + s) to grab a quick screengrab, then ctrl + v right into my markdown file. This will automatically link the new screenshot and I can see it directly in the file!

GLab/GitHub CLI

Whether you use GitLab or GitHub, there's a CLI for you! Both applications work pretty much the same way. Install the CLI on your machine, log into your GitHub/GitLab and authorize the CLI to read/write, etc to your GH/GL, then you're good to go!

Why would you want to do this? This is purely a workflow preference. Instead of opening up the browser to create a new repo, all you need to do is type gh repo create (or glab repo create) in the terminal and your local repo will have a remote counterpart all hooked up and ready to go.

You can also create and merge pull requests this way. No offense GitLab/GitHub GUI, but I don't want to see you if I don't have to 😘

Conclusion

That's all I have for the moment. Are there any tips/tricks that I'm missing that you love to use? What kind of applications do you use to improve your workflow? I'll continue updating this article with more tips and shortcuts as I find them, so feel free to leave a comment and let me know your favorites!

-Coby Sher