/ ESLint

Setting Up Sublime for ES6 & React(JSX)

Recently I was very excited to begin working on a new project for which my team would be using React with Redux and writing in ES6. I was thankful to find that setting up syntax highlighting and linting was fairly painless to set up with all the pieces gathered and thought I would gather them here for future reference and anyone else in need.

Let’s start with syntax highlighting in 4 easy steps. You might have already seen the “sublime-react” package which purports to be the best option for React. It has not been maintained and this is no longer true.

  • Using package control, install the “Babel” package
  • Open a .js file
  • Go to the View dropdown menu and select Syntax -> Open all with current extension as… -> Babel -> Javascript(Babel)
  • Open a .jsx file
  • Repeat step 3

Now ESLint is easily the best choice for your linter so lets get that set up.

  1. Npm install the following:
npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
  1. Using package control, install 'Sublime-linter' and 'Sublime-contrib-eslint'

Lastly you will want to create an ESLint config in the root of any project folder by calling the ‘eslint –init’ from your terminal. Much like an npm init this will give you some simple configure options. You can choose to answer some questions about your writing style or go with an available style guide. Our team has always used the AirBnB style guide as a reference so we chose to do so again here. If you choose to manually set up your style selections you will need to enable this flag in your config file so that it won’t complain when using import.

"ecmascript": {
  "modules": true
}