Hi, I’ve just brushed up on ES6 and want to use a transpiler like Babel along with a linter such as ESLint. I’ve never used these before and previously all of my work has consisted of writing HTML/CSS/JS in Sublime Text then refreshing the web browser.
Do I need Node.js for this because I keep seeing npm being mentioned, but I don’t know anything about node other than it being used to run JS outside the browser. As you can I tell I’m quite confused and any help on how to achieve my goal would be greatly appreciated!
This is a big step, and you’ll likely spend many hours getting things set up just the way you want… only to make sweeping changes in two months because you either break your configuration or some new tool comes out that prefer.
Linting can be done in two ways: 1) In your editor, and 2) during transpilation, and they both require installing Node. The first way is the easiest and most common. You’ll want to install the SublimeLinter plugin, and then any linters you want to use. Follow the instructions for that plugin and you’ll be fine.
Linting during transpiling is more difficult and not something that everyone likes to do. I would suggest skipping it for now.
Using a transpiler - specifically, Babel - is more difficult to describe since it depends on what sort of project you’re making. After you install Node, you can follow these instructions to get set up with Babel pretty easily. You will have to do this with every project.
Note: It is better to set up Babel for each project you do. Trying to create a global configuration will lead to anger. Anger will lead to hate. Hate will lead to the Dark Side.
If you get your project set up as described in the documentation, you’ll write your ES6 code in a folder called
src, and the output will be in a folder called
lib. This is what a simple project will look like:
|_ script.js (source file)
|_ script.js (transpiled file)
|_ package.json (created by npm)
When you source scripts in your HTML, you’d use the
Give it a try, come back with questions. This isn’t simple, but you’ll have to learn sometime.
Wow, thanks for taking the time to do this write-up, love the note too! I actually got as far as installing the ESLint package on Sublime then noticed that it seemed to be expecting that I already have the linter.
I guess the first step is to install and try to understand Node. Thanks again!
Hey, I managed to get ESLint running locally on a project, though rereading what you said I’m starting to think you meant that it was mainly just for Babel? Also, would I be using Babel in the browser or in Node? I’m not sure which to pick.
source.js (es6) -> babel -> dist.js (es5)
Babel is invoked by Node, but you don’t need Node to run all the time. It just happens once for each time you make changes to your source file(s).
I think the best way to make sense of this is to just do it. Follow some video tutorials on Youtube. Here’s a good one:
Thanks for clearing that up, hopefully I’ll be able to muddle my way through!
I got them both working. Appreciate the help!