Best Front-End Development Extensions for Visual Studio Code
Introduction
Visual Studio Code is one of the newest kids on the IDE “block” and it’s making a lot of noise. It’s taken a little while to gain traction, perhaps because it’s one of Microsoft’s few open source products, but it’s taken the open source community by storm. Developers who once swore their allegiance to Sublime Text 3 and Atom are slowly being converted by the power and simplicity of VS Code–not to mention its incredible library of extensions.
I began my own coding life on Sublime Text 3, moved to Atom, then PHPStorm, then after my subscription expired with JetBrains I thought I’d give VS Code a try. It continues to make my life easier and by doing so, makes me a better developer.
This introduction will take you from zero to hero, getting you up and running with VS Code, focusing specifically on my favorite front-end development extensions, making sure that every aspect of your workflow is covered. I’m going to assume a few points for this article:
- Your front-end development stack is not opinionated. I’m going to assume that at some point you will have the need for jQuery, ES6, React, Vue, PostCSS, or whatever floats your boat.
- You’re using Git for version control.
- You already have Node and NPM installed and setup correctly.
- Some of the extensions listed below require some configuration outside of VS Code, I’ll let you know what does and doesn’t, but if you need any help, feel free to ask!
Installing
First things first, if you don’t already have VS Code installed, head over to Visual Studio Code’s website. VS Code is cross-platform so our configurations will work on Windows, Mac and Linux.
VS Code is also available as a Homebrew Cask package on Mac: brew cask install visual-studio-code
A step that I find a lot of tutorials often leave out is the ability to execute VS Code from the terminal. There are a few ways of doing this. If you already have a .bash_profile setup you can add this:
Or, for a more cross platform approach, hit the Command Palette shortcut: Shift + Command + P and type the word shell - this will give you an option called: Install code command in PATH - hit enter and you’re done. Now, you can launch files and folders anywhere from the terminal by typing: code path/to/file/or/dir
Linting
Lint your code–it’s the best way to stop errors before they cause you any undue stress!
ESLint
If you’re running the latest version of ECMA Script, then ESLint is for you. This extension integrates the ESLint pattern recognizer straight into VS Code and aids you with common mistakes that developers make with the new syntax. It does require that you have the NPM ESLint package installed either locally in your project or globally.
SASS Lint
For those of you who enjoy writing more programmatic Sass, Sass Lint provides you with an easy to use set of configurations for writing standards-compliant Sass.
JSHint
JS Hint is another great JavaScript Linter that aids you with logic, syntax and more, depending on your configuration.
TSLint
If you’re a TypeScript fan, then the TSLint extension is your best friend. With TypeScript being a precompiled language, you have full control over what the compiler lints for you as well as auto formatting options.
These extensions all offer Git friendly ways of managing custom / shared configurations between developers on your team namely in .eslintrc and .sass-lint.yml or .jshintrc
I’ve purposely left our HTML Linters here. Whereas I’ll use an extension like Beautify for formatting and tabbing my HTML according to an .editorconfig I find that HTML Linters perform quite poorly. They don’t consider semantics and tend to do a bad job of helping you with accessibility concerns. As the meaning of HTML can be relatively ambiguous, it’s better to use a set of tools that do smaller jobs.
To extend the HTML functionality in VS Code I use the following:
AutoClose Tag
It could use a bit of improvement, but I always liked Sublime Text 3’s auto closing tag functionality. The above mentioned extension will help you out with this in VS Code.
AutoRename Tag
This is another useful HTML extension which allows users to click inside an HTML element and rename it, while simultaneously renaming the closing tag.
Automation
I moved away from Grunt sometime ago, but coincidentally there don’t seem to be any Grunt extensions on the marketplace, at least not with enough traction to make much of an impact. The extensions below are mainly focused on Gulp and Webpack as they seem to be leading the race in the task management world right now.
Gulp Snippets
This extension allows you to use the Command Palette in VS Code for easily injecting useful Gulp configurations into your Gulpfile.js; a must have if you’re still a little shaky about setting up Gulp.
Webpack
Setting up Webpack can be one of the scariest tasks a developer has to commit to. The Webpack extension for VS Code takes the fear out of it by providing you with a minimal webpack.config.js to start your project. If you’re a progress person, and you don’t like being left in the dark while your Terminal thinks about things, then the Webpack Progress extension is for you. It provides a nice progress bar for when Webpack is doing its thing.
Git
One of the most powerful extensions for version control in VS Code is:
Git Lens
For newcomers and advanced users alike, Git Lens is powerhouse. It makes an easy job of making Git and its many intricacies more manageable and visual. I’ve enjoyed using it so much that other than using the Terminal to add, commit, branch and push, I’ve completely scrapped Git GUI’s.
Almost every setting is customizable. Git Lens provides real-time feedback of Git data while you’re coding. Want to know who wrote that function that isn’t working? Want to see how much the code has changed over the last few commits? Not sure how to handle a merge conflict in a file that you never wrote, or have little context of? Git Lens handles this all for you.
Language Support and Intellisense
Where as other IDEs have full on support for the majority of languages, VS Code leaves it up to you for the most part. As and when you require it, you can add Language Support for whatever technology you’re dealing with, out-of-the-box HTML and CSS, as well as JavaScript are provided, but if you have need for Python it’s just a click away. In my workflow I use Python every so often, but Node was a big thing for me.
Intellisense essentially takes care of completions. You can hit tab or hover over a file path, for instance, and VS Code will do the hard work for you.
Babel ES6 / ES7
If you’re one of those people that loves using new technologies in your workflow and you’re crazy about the new edition of JavaScript then the Babel ES6 / ES7 linter is for you.
File System Path This is a brilliant extension that autocompletes / suggests file paths while you’re typing. If you come from a PHPStorm background, you’ll know the feeling!
NPM
A great extension when using require() or import {} in Node.js, this extension autocompletes file paths to Node Modules.
CSS Class Names
This is a very useful extension for auto completing CSS class names defined in your linked CSS files. If you’re a Bootstrap, Foundation or just a framework fan in general, this will save you a lot of time!
SCSS
For the precompiled CSS fans, this extension makes intellisense possible for imports, mixins, includes and functions in SCSS.
PostCSS
If you’ve yet to come across PostCSS then you’re missing out. It’s an advanced and extremely forward thinking set of plugins for CSS that makes CSS a lot more powerful. I use two PostCSS extensions: Syntax and Sorting; one enables syntax support for new CSS Level 4 modules like nesting and the other allows me to sort CSS properties alphabetically.
Vue
While not really Intellisense alone this is a great extension for Vue.js development. It’s an all-in-one solution for adding linting, intellisense, and formatting to Vue.js development and already includes some of the extensions I've mentioned above.
React / React Native
This is a full solution for developing React Native applications. By default, VSCode has a ton of support built in for React.
Accessibility and Health
You spend a lot of time in front of your IDE, so making sure it’s easy on the eyes and legible is just as important as any other aspect I’ve mentioned.
VS Code Icons
First, get some folder/file icons so that you can easily distinguish the files you’re using.
Cobalt 2 Theme from Wes Bos
Cobalt 2 is not too dark, not too light, and has great contrast for an editor theme. It also has a corresponding colour setup for ZSH Terminals.
Formatting
Beautify
As I mentioned earlier, the Beautify extension is a great tool if you’re adamant about code formatting and editor standardization. It also allows you to set a .jsbeautifyrc file which you can commit to Git repos for collaboration. Beautify can also be used as a replacement for .editorconfig if you don’t support it. Beautify formats JS, CSS, Sass, JSON and HTML.
EditorConfig
More and more IDEs are providing support for EditorConfig, which allows you to include an .editorconfig in your project repos. This gives your fellow developers IDEs and linters to read from one file to standardize tabbing and spacing as well as line ending across projects.
Prettier
For a more robust solution, try out Prettier. Prettier follows the same configuration paradigm as ESLint, providing you with a .prettierrc file which an be committed to repositories. It will also read from the .editorconfig file if it exists. In fact you can get rid of ESLint and Sass Lint and use Prettier as your one stop solution. It has its own extensions for EsLint, StyleLint and more.
Terminal
I recently moved over to ZSH which has completely transformed my terminal experience. Whilst not being a direct extension of VS Code, it can be integrated through the Terminal pane. I had to do quite a bit of configuration to get it working on Mac, especially with colors and themes.
ZSH features functionality like tab completion for directories, files, Git branches and more. You can read more about setting up ZSH on the Github repo or leave me a message in the comments below if you’d like to learn more.
Debugging
Visual Studio Code comes with Debugging JavaScript right out of the box. You can take it a step further using the following extensions:
Debugger for Chrome
This extension allows a direct sync between the VS Code Debugger and Chrome Developer Tools allowing you to set breakpoints and jump straight into the code.
Conclusion
That about wraps up my extensions setup for Visual Studio Code–which are your personal favorites? Before I go though, don’t forget that coding should be fun; you may need some tunes to help you along. The Spotify extension adds a tiny inline media player to the VS Code UI.
Read the original article on Envato Tuts+
