Linting in a Ecmascript 6 Javascript (ReactJS development) with SublimeText3

1
votes

Today I start working as a developer on a ReactJS application for my first time.

However, I'm having trouble even getting off the ground as I can't get SublimeText3 to properly recognize all the es6 syntax and JSX in this application's code.

Some relevant parameters of what I'm trying to do:

  • The javascript file extensions are all .jsx so keep that in mind
  • I'm trying to use SublimeLinter-jsxhint since SublimeLinter is my favorite linter out there.

What I've tried so far....

  1. Installed SublimeLinter-jsxhint
  2. Followed the SublimeLinter-jsxhint instructions to install jsxhint globally npm install -g jsxhint
  3. Installed 'Babel' Package, also called babel-sublime
  4. Restarted my computer and Sublime

According to SublimeLinter-jsxhint docs that is all the steps I'm supposed to be required for the linter to work.... however errors are thrown all over my code with ES6 only syntax.

AFTER MORE RESEARCH

The step it looks like I might be messing up on is this:

Linter configuration

In order for jsxhint to be executed by SublimeLinter, you must ensure that its path is available to SublimeLinter. Before going any further, please read and follow the steps in “Finding a linter executable” through “Validating your PATH” in the documentation.

Once jsxhint is installed and configured, you can proceed to install the SublimeLinter-jsxhint plugin if it is not yet installed.

So perhaps jsxhint cannot be executed by SublimeLinter because its path is unavailable to SublimeLinter.

How should I do to fix this?

Thanks for the help.

1
reactjsecmascript-6sublimetext3sublimelinter
I'd say the majority of people doing ES6 and JSX using ESLint, is that something you've explored? - loganfsmyth

1 Answers

1
votes

The following steps work for me on Windows:

  1. Install your linter globally: npm install -g jsxhint (or ESLint; I personally use ESLint, but I've never used JSXHint so I can't speak to which one is better).
  2. Check where NPM installs global packages: npm root -g; the default should be C:\Users\you\AppData\Roaming\npm\node_modules
  3. Check the parent path (C:\Users\you\AppData\Roaming\npm). You should have jsxhint.cmd there.
  4. Add C:\Users\you\AppData\Roaming\npm to your PATH variable.
  5. You should be able to type jsxhint into a console now, and it will be recognized. That should also mean that SublimeLinter has access.