Skip to main content

Setting up a linter

As a developer, it's a good idea to make your development process as streamlined as possible. Linters check syntax and help you produce consistent code that follows specific style rules that you can define yourself or inherit from existing configurations. Although it's not required, installing a linter will help you immensely.

Installing a code editor​

First, you will need a proper code editor. Using programs such as Notepad and Notepad++ is discouraged, as they're inefficient for projects like these. If you aren't using one of the editors listed below, it's advised to switch.

  • Visual Studio Code is a prevalent choice; It supports various languages, has a terminal, built-in IntelliSense support, and autocomplete for both JavaScript and TypeScript.
  • WebStorm is an integrated development environment for JavaScript and related technologies. Automating routine work and helping you handle complex tasks with ease. (ESLint build-in)
  • Sublime Text is another popular editor that's easy to use and write code.

Installing a linter​

Install the ESLint package inside your project directory.

One of the advantages proper code editors have is their ability to integrate linters via editor plugins. Install the appropriate plugin(s) for your editor of choice.

tip

You can view plugins directly inside your editor.

  • Visual Studio Code: Press Ctrl + Shift + X
  • Sublime Text: Press Ctrl + Shift + P and search for "Install Package" (available via Package Control)

After that, search for the appropriate plugin and install it.

Setting up ESLint rules​

ESLint may display many warnings and errors about your code when you start using it but don't let this startle you. To get started, create a file in your project directory named .eslintrc.json and copy the code below into the file: