Improving Development Productivity with Vue - Part 1

How often do you perform the same task every day? I bet that more than you think. Performing simple actions, such as creating properties, watchers (watchers) or new methods, is performed again and again when creating an application.

These small actions seem to form a long period of time. Our goal is to do as much as possible with as few actions as possible.

Code editor

Efficiency starts with your toolkit. If you have crappy tools, it will be more difficult to do simple things. Sometimes the tools that we have, just need to shake off, and sometimes we need to try something new. Remember, work smarter, not more.

Visual Studio Code -  download

Despite the fact that there are many code editors available, I will focus on using the features of the Microsoft VS Code editor . It has built-in support for Typescript, as well as a very large community of modding extensions. Use the download link and select your operating system.

After installation is complete, run vscode. You are now ready to continue installing the extension.

Extensions / Plugins

The following is a list of recommended extensions. Their goal is to improve your development time with vscode, they are also easy to install, just click Install on the expansion page.

This can also be done from the VS Code interface by clicking View> Extensions in the top panel. The extension panel will open.

Settings Sync -  install

This extension will allow you to save a synchronized copy of your local settings, as well as import settings from others. This is extremely useful, especially if you are working with more than one computer and (we hope) do it only once!

Vetur -   install

When working in Vue there is no shortage of useful extensions that you can connect. Of all the extensions, vetur is a must. It will help you with syntax highlighting, snippets, intellisense, debugging and much more.

Auto Close Tag - install

Automatically adds an HTML / XML closing tag, just like a Visual Studio IDE or Sublime Text.

Auto Import -  install

Automatically finds, analyzes, and provides code execution and completion for all available imports. Works with Typescript and TSX.

Auto Rename Tag -  install

Automatic renaming of the HTML / XML pair tag, as in the Visual Studio IDE.

Bracket Pair Colorizer - install

This extension allows you to identify matching brackets using colors. The user can determine which characters match and which colors to use.

ESLint -  install

Integrates ESLint into VS Code. If you are not familiar with ESLint, you can read the documentation .

GitLens - install

GitLens extends Git capabilities built into Visual Studio Code. It helps you to easily visualize the authorship of the code using Git-blame annotations, easily navigate and explore Git repositories, get valuable information using powerful comparison commands, and much more.

VS Live Share -  install

If you have ever worked remotely, you realize how difficult debugging is with other developers. Visual Studio Live Share allows you to collaboratively edit and debug with others in real time.

Topics

This is a subjective addition, and you should always choose what suits you best.

Material Theme - install

Working in Material Design every day made me partial to the widely popular Material Theme. It has soft colors and eyes do not flow when looking at the code for hours on end. It comes with variations of 8 themes and large options settings.

Theme Icon Theme - install

While the Material Theme has the ability to customize the icons of your folders, the Material Icon Theme has more options and custom options for many new file types, such as the new vue-cli-3 vue.config.js .

fonts

Another important aspect of our design is the editor fonts.

FiraCode - install

Very well made open source mono font and free !

FiraFlott - install

a font that combines the FiraCode Mono font (there is also a Bold bold font), including Font-Ligatures with FlottFlott as an italic font.

OperatorMono - install

One of the only paid fonts that I would recommend. Very clean with excellent italics.

To change the font, go to File> Preferences> Settings and type font in the search bar .

Additional tips

Although plugins such as vetur already contain some handy snippets, such as scaffold , there is still room for improvement.

Snippets - install

Reduce the number of repetitive tasks by turning them into snippets. I like to abbreviate Vue properties, such as data , computed , etc.

Commitizen - install

If you follow semver , you have to do this, commitizen assumes that you are writing commit messages and allows you to automate things like writing a release comment.

Git aliases - install

Although there are many excellent options for working with git with a graphical interface and built-in vscode support, I still often use cli. In order to optimize my time, I have a few aliases to improve my experience.

Conclusion

In this article, we discussed the basic conditions for creating an effective workflow. These tips are for you to think about your process and how to improve it.

In the next article, I will teach you how to use new tools and how to use them, using coding standards, continuous integration, testing, and more.