Sublime Text is a great application for just about any developer to have in their toolbox. It is a cross platform, highly customizable, advanced text editor and sits nicely between full featured IDEs (which are notoriously resource hungry) and command line editors such Vim or Emacs (which have steep learning curves).
One of the things that makes Sublime so great is its extensible plugin architecture. This makes it easy for developers to extend Sublime’s core functionality with new features such as code completion, or the embedding of remote API documentation. Sublime Text doesn’t come with plugins enabled out of the box — they are typically installed through a 3rd party package manager simply called Package Control. To install Package Control in Sublime Text, please follow the installation guide on their website.
In this article, I will outline ten must-have Sublime plugins for JavaScript developers, each of which can improve your workflow and make you more productive. So let’s get to it!
1. Babel
Of course the first one on my list is the Babel plugin. This plugin adds proper syntax highlighting to your ES6/2015 and React JSX code. After installing the plugin, the first thing you should do is set it as the default syntax for .es6, .jsx, and even .js files. However, you should be careful with the last one if you’re working with ES3/5 and not transpiling your code using Babel.
If you have not yet discovered the joy of Babel, I highly suggest it. It allows you to compile ES6/2015 and JSX code to ES5. It integrates well with all popular build tools and the CLI. Obviously, it doesn’t support legacy browsers, but you can follow the tips on their caveats page if you need to support IE10 and below.
Unfortunately, the Babel plugin doesn’t allow you to compile ES6 code on the fly from within Sublime. For those of you wanting to do that, I suggest you check out Compile Selected ES6.
2. JSHint
Next up is the JSHint plugin for Sublime. JSHint is a JavaScript Linter, which will look over your code and verify it has proper styling, proper syntax, and is free of common errors related to these. No matter if you’re a beginner or have been programming for most of your life, JSHint is a must have. Check out the JSHint about page for more information on what it can do for you.
For the JSHint SublimeText plugin to work, you need to have JSHint installed globally via npm:
npm install -g jshint
If you’re unsure how to do this, check out our tutorial on getting started with the Node Package manager.
Once the JSHint npm module and the JSHint SublimeText plugin are installed, you can simply invoke JSHint by opening your JavaScript file and pressing Ctrl + J (or Alt + J on Linux/Windows). Alternatively, you can access JSHint via the context menu.
If you've installed the plugin but would like a more explicit warning as to where the error occurred, check out JSHint Gutter. Or, if you’d like to try JSHint before installing the NPM package or the plugin, JSHint.com has a great online interactive tool into which you can paste your code for instant feedback.
3. JsFormat
JsFormat is based on JS Beautifier and can help you automatically format JavaScript and JSON. If you only use it for the JSON formatting alone, it’s worth having. But for me, the biggest advantage comes when I’m working with other developers’ code, or even on code I wrote a long time ago.
Such code can often be hard to read and following a common code formatting style really helps. While formatters may not be for everyone, they can really help the developer read code by introducing a common structure. Linters take care of some of this, but they don’t necessarily hit everything and do not automatically fix formatting. Code formatters save a lot of time and a lot of headaches.
Once installed, to use JSFormat, go to your JS file and hit Ctrl + Alt + f on Windows/Linux or Ctrl + ⌥ + f on Mac. Alternatively, use the context menu.
You may be thinking: “But I what if I don’t like the way they style JavaScript?”
Good news! JsFormat is highly configurable and based on the JS Beautifier settings. To adjust these for SublimeText 3, go to: Preferences -> Package Settings -> JsFormat -> Settings - Default
Then edit the JSON settings there to your liking.
Continue reading %10 Essential SublimeText Plugins for JavaScript Developers%
by Matt Burnett via SitePoint
No comments:
Post a Comment