Productivity in Vue — Part 1
How often do you perform the same task every day? I’m willing to bet it’s more than you think. Performing simple actions such as creating properties, watchers or new methods are done over and over again as you build your application.
These small actions can add up and create a segment of time that is simply wasted. It should be our goal to do as much as we can with as little as we can.
💻 Code Editor
Efficiency starts with your tool-set. If you have shitty tools, it’s going to be harder to do simple things. Sometimes the tools we do have just need to be dusted off and sometimes we need to try new things. Remember, work smarter not harder.
Visual Studio Code — download
While there are many options available, I will focus on leveraging the power of Microsoft’s VS Code editor. It has built-in Typescript support as well as very large extension modding community. Use the download link above and select your operating system.
Once the installation is complete, startup vscode. You are now ready to continue with extension installation.
🔨 Extensions/Plugins
Below is a list of recommended extensions. Their aim is to improve your time with vscode and are as easy to setup as clicking install on their extension page.
This can also be done from within VS Code’s interface by clicking on View > Extensions from the top bar and opening up the extension bar.
Settings Sync — download
This extension will allow you to maintain a synced copy of your local settings as well as import the settings of others. This is extremely useful, especially if you develop from more than 1 computer and (hopefully) will ensure that we only have to do this once!
Vetur — download
When working in Vue there is not shortage of helpful addons you can hook into. Of all the extensions, vetur is an absolute must. It comes with syntax highlighting, snippets, intellisense, debugging and more.
Auto Close Tag — download
Automatically adds HTML/XML close tag, the same as Visual Studio IDE or Sublime Text.
Auto Import — download
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
Auto Rename Tag — download
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Bracket Pair Colorizer — download
This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
ESLint — download
Integrates ESLint into VS Code. If you are not familiar with ESLint, you can check out the documentation.
GitLens — download
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
VS Live Share — download
If you’ve ever worked remotely, you understand the plight of debugging with other developers. Visual Studio Live Share enables you to collaboratively edit and debug with others in real time.
🌷 Theme
This is a subjective addition and you should always pick whatever feels best.
Material Theme — download
Working in Material Design everyday has made me partial to the widely popular Material Theme. It has soft colors and isn’t a sore to stare at for hours on end. It comes with 8 theme variations and lots of customization options.
Material Icon Theme— download
While the Material Theme has the ability to custom style your folder icons, the Material Icon Theme has more options and custom variants for many new file types, like the new vue-cli-3 vue.config.js.
🆎 Fonts
Another important aspect of our development setup is the editor’s font family.
FiraCode — download
A very well made mono-font that is open source and free!
FiraFlott — download
Font that combines Mono font from FiraCode (also in Bold) including Font-Ligatures with FlottFlott as Italic font.
OperatorMono — download
One of the only paid fonts that I would recommend. Very clean with great italic accents.
To change your font, navigate to File > Preferences > Settings and search for font.
🚀 Advanced tips
While plugins like vetur already include some handy snippets such as scaffold, there is still room for improvement.
Snippets — download
Reduce the repetitive tasks by turning them into snippets. I like to stub out Vue properties such as data, computed, etc.
Commitizen — download
If you follow semver, and you should, commitizen takes the guess work out of writing commit messages and allows you to automate things like writing release notes.
Git aliases — download
While there are many great options for working with git with a GUI and vscode has built in support, I still find myself using the cli quite often. In order to optimize my time, I have a set of handy aliases to improve the experience.
Conclusion
In this article we discussed the baseline for creating an efficient workflow. These tips are meant to get you thinking about your process and ways that you can improve it.
In the next article I will teach you how to take your newly found tools and put them to good use with coding standards, continuous integration, testing and more.
