Installing ESLint for Visual Studio Code

Starting up with React Native programming is not an easy process. Setup takes hours and days. One of the steps includes installing a validator for JavaScript code ESLint.

1. Install ESLint on your computer
   There are several ways to install ESLint: globally and locally.

   Globally means the ESLint files will be placed somewhere at: C:\Users\YourUsername\AppData\Roaming\npm\node_modules. To install ESLint globally run the command:
   npm install -g eslint.

   Locally means installing the package inside your project directory, for example: C:\apps\My app. To install ESLint locally run the command:
   npm install eslint --save-dev.

   In theory, if you install the framework globally and all supporting packages locally in your project directory, you should be fine. In practice, it didn’t work quite well. My advice is to install either everything globally or everything locally for each project.

2. Install Eslint in VSCode

   ESLint is an extension to Visual Studio Code. Go to Extensions, type eslint and click “Install” and “Reload”.
   

3. Install rule sets
   ESLint is just a framework. It doesn’t do much on it’s own. You will need to install validation rules packages in order for it to check your JavaScript code for syntax errors. I was going to use only one bundle of the rules: eslint-config-rallycoding.

   Rule sets are support packages for ESLint. They may also be installed either globally or locally in the project folder:

   Install globally: npm install -g eslint-config-rallycoding
   Install locally: npm install eslint-config-rallycoding --save-dev

4. Tell VSCode to use ESLint rules
   Go to Visual Studio Code and create a new file inside the project directory .eslintrc and tell VSCode to use the rallycoding rule set:

   {
       "extends": "rallycoding"
   }
   

   At this step VSCode may show you different errors like “Error: Cannot find module ‘eslint-config-rallycoding'”. The reason for that error is that the link between eslint and ‘eslint-config-rallycoding’ is broken. It happened on one of my computers where the project was on one disk, while eslint installed globally was in another place. The solution is to install either both packages globally or both locally.

   Both globally:

   npm install -g eslint
   npm install -g eslint-config-rallycoding
   

   Or both locally:

   npm install eslint --save-dev
   npm install eslint-config-rallycoding --save-dev
   

Other errors I’ve encounted were ESLint failing to install all the required libraries recursively.

For example:
– Failed to load ‘eslint-plugin-class-property’
– Failed to load ‘eslint-plugin-react’
– Failed to load ‘eslint-plugin-jsx-a11y’
– Failed to load ‘eslint-plugin-import’

The solution to all this is to install each of them separately:

Some libraries may have versions that are incompatible with one another. This happened with ‘eslint-plugin-jsx-a11y’ library: latest version 4.0 was not compatible with latest ESlint. This resulted in errors like:

“Configuration for rule ‘jsx-a11y/…’ is invalid. Value ‘a’ is the wrong type.”

To solve the problem:
– find which version is compatible right now. For me it was 2.2.3.
– run install for that version specifically:

npm install eslint-plugin-jsx-a11y@2.2.3 --save-dev