Here at LolaTech, Visual Studio Code is the most common development environment. There are several customization options for this IDE, so you can get the most out of it while having a pleasant experience as well.
Besides the various generic settings VSC offers, a great many third party extensions are available to download straight from the editor’s sidebar or through keyboard shortcuts.
Let’s take a look at some of our favourite extensions: themes, linters, formatters, versioning and more.
ESLint is one of the most widely used extensions, especially for JavaScript code - it has over 21 million downloads. And ESLint really is the most reliable JS buddy you can have - it finds your typos and errors for you and it even gives you the option to automatically “quick fix” them with the press of a button. It is also really customisable, giving developers the freedom to set their own specific rules for projects.
Speaking of JavaScript and front-end, we should mention Auto Rename Tag. Its name is fairly self-explanatory, but this really is a productivity booster. How many times did you have to endlessly search for that unmatched HTML tag you changed? This is now solved by this extension, which automatically finds the closing tag of the one you are modifying and closes it smoothly.
These extensions have helped us write some pretty decent code, quality-wise. But what about all of those silly formatting mistakes we all make: extra spaces, wrong indentation or missing semicolons? Prettier has a great solution for that. Just install it, set up your rules (just like in ESLint), hit format on the file you are working on – or set Format on Save to true in your VSC settings and save your file – and voila! All of the formatting issues are gone and decent code turns into elegant, easy-to-read code instantly.
Shell-format does everything Prettier does, but for shell files, as the name suggests. Dockerfiles, gitignore files, dotenv and scripts, you name it – shell-format can easily handle any of them.
All of these extensions are extremely useful, but no single new project here at Lola Tech starts without ESLint and Prettier installed and running on pre-commit with the amazing Husky and Lint Staged. This way, we never have to worry about this stuff in code-review no matter how varied our local development preferences are. If you’d like more detail Laurie Barth has a concise introduction to Husky.
Live Share is definitely one of our all-time favourites. It allows developers to join a collaborative session of developing and debugging while keeping everyone’s own editor preferences. This session is always secured and is happening in real-time – it also allows you to follow a colleague when they are scrolling through or editing, and you can even make your own changes at the same time.
Live Server is a quick development server with live browser reload. It is easy to use and always one click away. You want to see how your static HTML file looks in a browser? Right-click it in VSC, choose Open with Live Server and it will open it up in your favourite browser. Edit that file and it will instantly refresh and serve you the new version. Oh, you can also customise your port number or server root.
GitLens brings Git inside of VS Code. It helps developers visualise when, why, and by whom a code block or line was changed. It also offers some powerful comparison commands and so much more. Its best feature, in our opinion, is that you can quickly find out who wrote that “dumb” piece of code two years ago and be surprised to find that it was you. GitLens works with any hosting service like GitHub, Bitbucket or GitLab, but there are some more specific tools that are worth mentioning:
VSC implicitly offers some nice themes, but there are a variety of third-party ones that are even nicer. High contrast, light, dark, you name it – you can find anything in the extensions marketplace. For example, our favourite combo Theme’s Dark Blue combined with Material Icon for the sidebar icons, but there are loads of other great ones: Monokai, a variety of Atom themes, vscode-icons, Dracula, DuoTone, to name just a few. Some of them, like One Dark Pro ++, even include custom fonts.
Our last tip? You can make typing much more enjoyable by turning on the Cursor Smooth Caret Animation in VSC Settings.
