{"id":21828,"date":"2018-06-07T12:15:19","date_gmt":"2018-06-07T09:15:19","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21828"},"modified":"2018-06-07T12:23:24","modified_gmt":"2018-06-07T09:23:24","slug":"javascript-coding-vs-code-extensions","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-coding-vs-code-extensions\/","title":{"rendered":"Convenient JavaScript coding with VS Code Extensions"},"content":{"rendered":"

Visual Studio Code<\/a> provides an amazing environment for development, especially for JavaScript developers. The cross-platform text editor by Microsoft has attracted a large number of developers due to its performance and long list of amazing features. Having a well-calibrated editor is paramount to a developer\u2019s productivity, and great tooling can help developers write faster, cleaner, and more consistent code. VS Code already does a lot right from install, but with time, you might want to add a few extensions. Fortunately, VS Code has a vibrant extension community that makes this very easy with well over 700,000 downloads per month. We\u2019ll take a look at must-have plugins, a few that are nice to have, and some honorable mentions.<\/p>\n

The Must-Haves<\/h2>\n

This list was hard to compile \u2014 choosing among so many great extensions, I admit I gave some preference according to my own personal needs.<\/p>\n

GitLens<\/h3>\n

The GitLens extension<\/a> enables you to visualize code authorship within VS Code. You can browse and explore the history of a file, view a git blame annotation for each file line, and even add a changes (diff) hover annotation, all of which are fully customizable.<\/p>\n

GitLens is especially useful on larger projects, where you may not be aware who wrote what within a given file. With GitLens, you can easily see with a glance who wrote a specific line right from the status bar at the bottom. When specific questions arise, the proper dev can be contacted.<\/p>\n

NPM IntelliSense<\/h3>\n

\"vs<\/a>
\nNPM IntelliSense<\/a> is a small utility that enables autocompletion of module names in require statements using the VS Code IntelliSense feature. The extension is dead simple, but provides a nice quality-of-life improvement when you\u2019re developing.<\/p>\n

ESLint<\/h3>\n

\"vs<\/a><\/p>\n

ESLint<\/a> is a very commonly used and highly customizable JavaScript linter that can be configured for most major frameworks and code styles. Instead of having to manually run ESLint to see what errors out, this specific VS Code implementation of ESLint highlights the linting errors within the editor, as well as offers the ability to resolve them with a few mouse clicks.<\/p>\n

\u201cWait,\u201d you might be saying, \u201cVS Code comes with IntelliSense built in, which does a perfectly decent job of code linting.\u201d<\/p>\n

That\u2019s true, but what if not everyone on your project is using the same editor? What if you want to have different config settings just for JSX or a specific ECMAScript version for vanilla JS running in the browser or Node.js server code? ESLint has got you covered for all those scenarios.<\/p>\n

This extension integrates ESLint into VS Code. It does require you to already have ESLint installed on your computer, either locally or globally. You can do this with NPM, by running NPM\u2019s install -g eslint.<\/code> There are more detailed configuration and installation settings and instructions on the extension\u2019s marketplace page.<\/p>\n

TODO Highlight<\/h3>\n

\"vs<\/a><\/p>\n

How often do you code a function and immediately think that there\u2019s a probably better way to do the same thing? You leave a comment: \/\/ TODO: Needs Refactoring<\/code> or something to that effect. But then you forget about the note and push your code to master\/production. With TODO Highlight<\/a>, that won\u2019t happen. Hopefully.<\/p>\n

This simple extension highlights your TODOs\/FIXMEs or any other annotation in your code in bright colors so they\u2019re always clearly visible. One nifty feature is the List Highlighted annotation capability. It lists all the TODOs in the output console.<\/p>\n

The Nice to Haves<\/h2>\n

Moving on, let me introduce you to some VS Code extensions that simply make things a bit more comfortable.<\/p>\n

Open in Browser<\/a><\/h3>\n

\"vs<\/a><\/p>\n

VS Code Great Icons<\/a><\/h3>\n

\"VS<\/a><\/p>\n

Trailing Spaces<\/a><\/h3>\n

\"vs<\/a><\/p>\n

Code Runner<\/a><\/h3>\n

\"vs<\/a><\/p>\n

Material Palenight<\/a><\/h3>\n

\"vs<\/a><\/p>\n

The Honorable Mentions<\/h2>\n

And finally, you might want to browse through some of these extensions that I felt warranted a nod.<\/p>\n