Sublime Linting for React and ES6

Sublime Text Linting for Javascript, React and JSX

Sublime Text is already a very good editor on my experience. It’s customizable, clean and super fast. Im not selling sublime, Just a personal thought :-). Vscode has become the most popular editor for developers according to stackoverflow survey 2018 by the way. But Im holding on for Sublime Text just because it’s faster and less memory footprint.

Now, That’s just a little side story before the trip.

Lately I have this little problem of coding inconsistencies in our Reactjs /Javascript projects.You get what I mean. Right? (It’s the messy code). New developer join the team that are used to their previous company coding style or fresh graduates that has no coding guides at all. You got the picture, yeah? The solution is obvious, create a boiler plate that has folder structures, common libraries, company standard stuff and of course linting. And Eslint is your friend… :-)

If your new to Eslint please follow the link to their documentation. What this is all about is to outline the errors/issues within your JS/JSX code and of course to enforce coding style within Sublime Text Editor. So let’s dive in. :-)

First…

Make sure you have the latest build of Sublime Text Editor installed. The latest build is 3143. I haven’t tried this on the previous versions.

Install eslint globally in your system.

npm install eslint -g

Note: If ever installing globally won’t work. Try installing locally on your project. In most cases global should just work but I find other’s not working and will work if installed locally.

Install the following eslint plugins globally.

I used Babel-Eslint for our parser. You can have a different parser for this purpose. It can be configure in y0ur eslint config file. Will get to that later.

npm install babel-eslint -g

Install React Plugin for Eslint. We’re gonna be using this to define our React rules within eslint config.

npm install eslint-plugin-react -g

I choose to install the above eslint plugins globally as I will be using it every time I start a new reactjs project. You can also choose to include it in your dev dependencies (It’s a good practice… :-). Just add — save-dev.

npm install eslint-plugin-react --save-dev

Install Sublime Packages

The best way to install Sublime Packages is through the Package Manager.

We need to install SublimeLinter and (sublimelinter-contrib-eslint or SublimeLinter-eslint) packages. So…

1. Open Sublime Package Manager. For MacOs (Command + Shift + P) Ctrl + Shift + P (Win, Linux)
2. Type Install Package. Package Control: Install Package should be the first one. Select it!
3. It may take a few seconds as it is loading available packages. Once the packages are shown.
4. Type “linter”, and find “SublimeLinter” from the result. It should probably the 3rd item.
5. Repeat step 1 to 3 to install “SublimeLinter-eslint”.

Note: There’s a great chance “sublimelinter-contrib-eslint” may not work anymore especially for newer version of sublime. So please use “SublimeLinter-eslint” instead.

Configure SublimeLinter.

You can configure sublime linter manually or you can copy and paste the settings below:

1. On your Sublime Text Editor select Tools menu. For windows user this menu is Preferences. Mac Users: For the latest version of Sublime the SublimeLinter menu was moved to Sublime Text → Preferences → Package Settings.
2. From the Tools dropdown you should see “SublimeLinter” menu. For windows user this should be under Preferences then Package Settings. If you cannot see the menu, it means you have not installed it yet. Make sure you have installed the necessary sublime packages. Refer to the instructions above.
3. Go to “SublimeLinter” menu and select “Open User Settings”. For the newer version of Sublime and SublimeLinter, the menu is now Settings. Select that and a window will open with the default SublimeLinter settings and user settings. In most cases, the default settings should just work but you will loose the color for errors and warnings. Paste the code below under user settings to show error and warning color.

Note: This settings is only applicable for Sublime Text v3.1.1 and up

Note: This settings is only applicable for previous version of sublime text. This will only work for versions below v3.1.1 (Im not sure which version of sublime text exactly they change the packages settings.)

A new tab will open containing your current user settings. Remove all settings, then copy and paste the settings below:

Again, you can do this manually. It only involves few clicks.

Note: You cannot do this anymore for the latest version of SublimeLinter.

1. On your Sublime Text Editor select Tools menu
2. See screenshot below: Select “Background”. We don’t what the linter disturbing our focus so will run it on the background..:-)

3. Here, you can choose your Mark Style. I like having it as “Outline” for no apparent reason… :-)

Finally…

At the root of your ReactJs project. Add your Eslint configuration “.eslintrc”. You can refer to Eslint documentation to create your own eslint rules.

Or you can go to ESLint Demo page to customize and test your rules.

But for the purpose of this writing, copy and paste the code below. It has all the configurations and rules for ReactJs and ES6 and some other good practices. It is based on “Airbnb” style guide, but I modified it to suit our needs. Feel free to use it.

Restart Sublime Text to apply the changes….

You should see something like this if all is working:

That’s it! Enjoy…. :-)

Incase it’s not working

Please open sublime console to see what the issues are. It should be located lower right with the box like icon. Or in the menu go to View => Show Console.

If you see something like “user” key is invalid. You can just remove those, or all keys that has been deprecated on SublimeLinter. After you remove the deprecated keys, it should work as expected. I will update the settings soon.

Update:

If you already got this working and at some point it was not working anymore because you updated your Sublime to a new version or one of the packages has been updated, please reinstall SublimeLinter and SublimeLinter-eslint. Open Package Manager (see above). Type “remove”, and select “Remove Package”. Choose the Package from the list. After it is completely removed, you can go ahead and install it again. Please see above for instruction.