I want to start using a linter and transpiler for Javascript

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:

myProject
    |
    |_ src
        |_ script.js (source file)
    |_ lib
        |_ script.js (transpiled file)
    | 
    |_ index.html
    |_ package.json (created by npm)

When you source scripts in your HTML, you’d use the lib directory:

<script src="/lib/script.js"></script>

Give it a try, come back with questions. This isn’t simple, but you’ll have to learn sometime.

4 Likes

Wow, thanks for taking the time to do this write-up, love the note too! :rofl: 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.

You don’t want to run Babel in the browser. The process you want is know as transpilation, which is where code that you have written is changed by a program (Babel, in this case), from one language to another. This is an important step for web development because while all browsers run JavaScript, they don’t all run the same version. The goal is to have a step where you take the JavaScript ES6 code you’ve written, had it to Babel, and it will transpile the code into JavaScript that’s more universally recognized. This should only happen once, and you will use the resulting file in your webapp.

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! :slight_smile:

1 Like