What is Linter

Lint, or a linter is a static code analysis tool, that is used in such a way, that can flag programming errors, bugs, bad constructs, or stylistic errors.

The term “lint” was derived from the name of the tiny bits of fiber and fluff shed by clothing. In 1979, lint was used outside of Bell Labs for the first time in the seventh version of the Unix operating system.

Linter can help a lot

Standardizing your code is very important. Having a guideline and running linters against the codebase avoid aesthetical changes in your pull request, like replacing all tabs for spaces, variable assignment indentation, or similar.

There are many benefits of using linters. Beside code standardization, linters improve code review discussion level, it can make code look like it’s written by a single person and much more. Many linters include a performance check. They can add different kinds of performance improvements for experienced and newcomers developers.

What is ESLint

ESLint is a configurable JavaScript linter. It helps you find and fix problems in your JavaScript code. Problems can be anything from potential runtime bugs, to not following best practices, to styling issues.

Core Concepts

  • Rules: the core building block of ESLint. A rule validates if your code meets a certain expectation, and what to do if it does not meet that expectation. Rules can also contain additional configuration options specific to that rule.
    • Rule Fixes: Rules may optionally provide fixes for violations that they find. Fixes safely correct the violation without changing application logic.
    • Rule Suggestions: Rules may optionally provide suggestions in addition to or instead of providing fixes.
  • Configuration Files: An ESLint configuration file is a place where you put the configuration for ESLint in your project.
  • Plugins: An ESLint plugin is an npm module that can contain a set of ESLint rules, configurations, processors, and environments. Often plugins include custom rules. Plugins can be used to enforce a style guide and support JavaScript extensions (like TypeScript), libraries (like React), and frameworks (Angular).
  • Parsers: An ESLint parser converts code into an abstract syntax tree that ESLint can evaluate. By default, ESLint uses the built-in Espree parser, which is compatible with standard JavaScript runtimes and versions.
  • Custom Processors: An ESLint processor extracts JavaScript code from other kinds of files(like CoffeeScript), then lets ESLint lint the JavaScript code.
  • CLI: The ESLint CLI is a command line interface that lets you execute linting from the terminal. The CLI has a variety of options that you can pass to its commands.
  • Formatters: An ESLint formatter controls the appearance of the linting results in the CLI.
  • ESLint Node.js API: It lets you use ESLint programmatically from Node.js code. The API is useful when developing plugins, integrations, and other tools related to ESLint.

Features

Everything is pluggable! 🔌

  • Rule API is used both by bundled and custom rules
  • Formatter API is used both by bundled and custom formatters
  • Additional rules and formatters can be specified at a runtime
  • Rules and formatters don’t have to be bundled to be used

Every rule:

  • Is standalone
  • Can be turned off or on (nothin can be deemed “too important to turn off”)
  • Can be set to a warning or error individually

Additionally:

  • Rules are “agenda-free” - ESLint does not promote any particular coding style
  • Any bundled rules are generalizable

How ESLint work

How to use ESLint

  • First need to install ESLint in you project: npm install eslint --save-dev
  • Initialize an ESLint configuration for your project: ./node_modules/.bin/eslint --init
  • Then you should have .eslintrc.json file. You can modify or add rule in this file.
  • You can use ESLint CLI to check your code now. But most common way is integrating with ESCode.
  • Install the ESLint Extension.
  • Configure ESLint to automatically fix syntax and formatting issues every time you save by configure settings in Visual Studio Code.

ESLint and VS Code

You can install “VS Code ESLint extension” in VS Code to use ESLint in VS Code Editor.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create an .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal with npx eslint --init.

FAQ

  • What is VS Code ESLint extension?
  • How ESLint work with Editor?

Why need package-lock.json file?

The “package-lock.json” file in npm simply serves as a lockfile that captures the exact versions of packages and their dependencies. It ensures that the same versions of packages are used across different installations or environments. This consistency prevents unexpected changes in package versions and helps avoid compatibility issues. When you install or update packages using npm, it checks the “package-lock.json” file to ensure the specified versions are installed. This lockfile is especially important when collaborating on projects, as it guarantees that all contributors use consistent package versions.

ESLint works fine before. But after VSCode update, or install other extensions, ESLint display many errors.

Sometime, ESLint may not work properly. You can install the latest version:

  1. delete all node_modules, and packet-lock.json file.
  2. Delete ALL Dependencies about ESLint.
  3. Re-install all package.
  4. And then install latest version: npm init @eslint/config@latest.

References