npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jsenv/eslint-config

v16.5.4

Published

Create ESLint configuration for any project

Downloads

789

Readme

eslint-config npm package

ESLint config file consists into a single big object. This package allows to split this object to compose and reuse them.

  • :+1: Part of configuration that belongs together can be regrouped
  • :+1: ESLint configuration is easier to read

This is achieved by a function capable to compose subsets of ESLint configuration.

composeEslintConfig

composeEslintConfig is a function returning an eslint config object being the composition of eslint config objects passed in arguments.

const {
  composeEslintConfig,
  eslintConfigBase,
} = require("@jsenv/eslint-config");

const eslintConfig = composeEslintConfig(
  eslintConfigBase,
  // first "group": enable html plugin
  {
    plugins: ["html"],
    settings: {
      extensions: [".html"],
    },
  },
  // second "group": enable react plugin
  {
    plugins: ["react"],
    settings: {
      extensions: [".jsx"],
    },
  },
);

module.exports = eslintConfig;

Composable eslint configs

| ESLint config | Description | | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | eslintConfigBase | Enable latest js features | | eslintConfigForPrettier | Disable eslint rules already handled by prettier | | eslintConfigToPreferExplicitGlobals | Force code to use global variables explicitly; like window.event |

Advanced configuration example

The following code is meant to be put into an .eslintrc.cjs file and does the following:

  1. Reuse jsenv configuration for ESLint rules
  2. Use ESLint import plugin with a custom resolver
  3. Consider files as written for node by default
  4. Consider a subset of files as written for browsers
  5. Use html plugin to enable linting of html files
  6. Disable ESLint rules already handled by prettier
const {
  composeEslintConfig,
  eslintConfigBase,
  jsenvEslintRules,
  jsenvEslintRulesForImport,
  eslintConfigToPreferExplicitGlobals,
  eslintConfigForPrettier,
} = require("@jsenv/eslint-config");

const eslintConfig = composeEslintConfig(
  eslintConfigBase,
  {
    rules: {
      ...jsenvEslintRules,
      "operator-assignment": ["error", "always"], // override jsenv rules
    },
  },
  // import plugin
  {
    plugins: ["import"],
    settings: {
      "import/resolver": {
        "@jsenv/eslint-import-resolver": {
          rootDirectoryUrl: __dirname,
          packageConditions: ["node", "import"],
        },
      },
      "import/extensions": [".js", ".mjs"],
    },
    rules: jsenvEslintRulesForImport,
  },
  // files are written for Node.js by default
  {
    env: {
      node: true,
    },
  },
  // package is "type": "module" so:
  // 1. disable commonjs globals by default
  // 2. Re-enable commonjs into *.cjs files
  {
    globals: {
      __filename: "off",
      __dirname: "off",
      require: "off",
      exports: "off",
    },
    overrides: [
      {
        files: ["**/*.cjs"],
        env: {
          commonjs: true,
        },
        // inside *.cjs files. restore commonJS "globals"
        globals: {
          __filename: true,
          __dirname: true,
          require: true,
          exports: true,
        },
      },
    ],
  },
  // several files are written for browsers, not Node.js
  {
    overrides: [
      {
        files: ["**/**/*.html", "**/src/**/*.js"],
        env: {
          browser: true,
          node: false,
        },
        settings: {
          "import/resolver": {
            "@jsenv/eslint-import-resolver": {
              rootDirectoryUrl: __dirname,
              packageConditions: ["browser", "import"],
            },
          },
        },
      },
    ],
  },
  // html plugin
  {
    plugins: ["html"],
    settings: {
      extensions: [".html"],
    },
  },
  eslintConfigToPreferExplicitGlobals,
  // We are using prettier, disable all eslint rules
  // already handled by prettier.
  eslintConfigForPrettier,
);

module.exports = eslintConfig;

The above configuration uses @jsenv/eslint-import-resolver to resolve import so it needs to be installed.

npm install --save-dev @jsenv/eslint-import-resolver

Composable ESLint rules

| Rules | Description | | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | jsenvEslintRules | jsenv rules for ESLint | | jsenvEslintRulesForImport | jsenv rules for eslint-plugin-import | | jsenvEslintRulesForReact | jsenv rules for project using react and eslint-plugin-react |

Common use cases

Top level await

It will be supported by default in ESLint 8. Until then you need:

  1. "@babel/eslint-parser" and "@babel/core" in your devDependencies
  2. Configure ESLint parser to "@babel/eslint-parser"
npm install --save-dev @babel/eslint-parser
npm install --save-dev @babel/core

.eslintrc.cjs:

const {
  composeEslintConfig,
  eslintConfigBase,
} = require("@jsenv/eslint-config");

const eslintConfig = composeEslintConfig(
  eslintConfigBase,
  // use "@babel/eslint-parser" until top level await is supported by ESLint default parser
  {
    parser: "@babel/eslint-parser",
    parserOptions: {
      requireConfigFile: false,
    },
  },
);

module.exports = eslintConfig;

React

const {
  composeEslintConfig,
  eslintConfigBase,
  jsenvEslintRulesForReact,
} = require("@jsenv/eslint-config");

const eslintConfig = composeEslintConfig(
  eslintConfigBase,
  // react
  {
    plugins: ["react"],
    settings: {
      react: {
        version: "detect",
      },
    },
    rules: jsenvEslintRulesForReact,
  },
);

module.exports = eslintConfig;

JSX

  1. "@babel/eslint-parser" and "@babel/plugin-syntax-jsx" in your devDependencies
  2. Enable @babel/plugin-syntax-jsx in babel config file
  3. Configure ESLint parser to "@babel/eslint-parser"
npm install --save-dev @babel/eslint-parser
npm install --save-dev @babel/plugin-syntax-jsx

babel.config.cjs:

const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");

module.exports = {
  plugins: [
    [
      babelPluginSyntaxJSX,
      {
        pragma: "React.createElement",
        pragmaFrag: "React.Fragment",
      },
    ],
  ],
};

.eslintrc.cjs:

const {
  composeEslintConfig,
  eslintConfigBase,
  jsenvEslintRulesForReact,
} = require("@jsenv/eslint-config");

const eslintConfig = composeEslintConfig(
  eslintConfigBase,
  // jsx
  {
    parser: "@babel/eslint-parser",
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
    },
    settings: {
      extensions: [".jsx"],
    },
  },
);

module.exports = eslintConfig;

HTML in VSCode

In ".vscode/settings.json" file, add

"eslint.validate": ["javascript", "html"]