Website Links

Thursday, 26 January 2017

ESLint

ESLint is a tool that analyses your JavaScript for potential errors and can be installed into many common text editors. This can help you pick up errors in your JavaScript without reloading your website or react native app, which can help you increase your productivity... YAY!

ESLint has a few setup layers - this is split into editor specific config and project specific config. This means we can configure which ESLint rules to validate our code using on a project by project basis. There are some preset configurations for this so that as a developer you don't need to add rules one by one.

Setting up ESLint in Sublime

  • Install eslint globally using npm:
    npm install -g eslint
  • Install Package Control
  • Do per project setup:
    • Install a set of rules that you want eslint to use to validate your code (there are other ones out there but here's an example)!
      npm install --save-dev eslint-config-rallycoding
    • Create a file in your project's root directory called .eslintrc
    • Tell eslint which rules to use by adding the following to the file:
        {
          "extends": "rallycoding"
        }
      
      Noting that it is important that these are double quoted.
  • Use Package Control to install linter and eslint to Sublime Text
    • Open up the command palette (Tools > Command Palette or command + shift + P)
    • Search for install and click on install package
    • Once this has loaded, search and click on SublimeLinter
    • Repeat for the package SublimeLinter-contrib-eslint
  • Exit out of Sublime Text, and reopen
  • Delete a semi-colon and save to confirm eslint is setup correctly. If this doesn't show errors, then move your cursor around a bit.

No comments:

Post a Comment