ESLint#

ESLint is a static code analysis tool used to identify problematic patterns found in JavaScript code. It helps maintain consistent code quality and prevent bugs by enforcing coding standards.

Extension.js offers first-class support for ESLint to ensure your extension code adheres to best practices and runs smoothly across browsers.

Starter ESLint Template#

Extension.js includes a New Tab ESLint template, providing an out-of-the-box configuration to lint your JavaScript and TypeScript code.

Try it yourself#

npx extension@latest create my-extension --template=new-eslint

Usage With An Existing Extension#

You can integrate ESLint into your existing Extension.js project by installing the necessary dependencies and configuring ESLint.

Installation#

Install ESLint and the necessary plugins:

npx install -D eslint

ESLint Configuration#

Create an ESLint configuration file (.eslintrc.json) at the root of your project. This file defines the linting rules for your JavaScript and TypeScript code.

Here's an example ESLint configuration:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "react/react-in-jsx-scope": "off"
  }
}

Example Usage in a JavaScript File#

Once ESLint is set up, it will automatically check your JavaScript files for issues. For example, if you have an unused variable, ESLint will highlight it:

const unusedVar = "I am unused";
+ ESLint will show an error here: 'unusedVar' is defined but never used.

You can also run ESLint manually by using the following command:

eslint .

Example Usage in a TypeScript File#

ESLint can also lint TypeScript files. Make sure @typescript-eslint/parser and @typescript-eslint/eslint-plugin are installed and configured in your .eslintrc.json file. Here's an example TypeScript file:

myComponent.tsx

import React from "react";

interface Props {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default MyComponent;

ESLint will lint the above code and report any issues such as unused variables or inconsistent naming conventions.

Next Steps#

• Ensure your code quality further by integrating Prettier with ESLint for automatic code formatting.