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

@preco21/eslint-config

v2.2.2

Published

ESLint shareable config for @preco21

Downloads

16

Readme

eslint-config

ESLint shareable config for @preco21

This package provides @preco21's ESLint rules as an extensible shared config.

Install

npm install --save-dev @preco21/eslint-config

Peer dependencies

If you are only interested in the core rules (e.g. rules/base), you are good to go and you don’t need to follow installation instructions below.

There are configs that work with various plugins like typescript, import, react, and so on. (import, react rules are not yet supported)

To use those, you will need to install all its peer dependencies.

By default, to prevent installing unnecessary peer dependencies, all listed peer dependencies (except the eslint itself) are marked as optional via peerDependenciesMeta field in the package.json. And it's recommended to install only peer dependencies that you are going to use.

Install the correct versions of each package, which are listed by the command:

npm info "@preco21/eslint-config@latest" peerDependencies

If using npm 5+, use this shortcut:

npx install-peerdeps --dev @preco21/eslint-config

For more details about the installation, please refer to Airbnb's ESLint config documentation.

Usage

Add some ESLint config to your package.json:

{
  "eslintConfig": {
    "root": true,
    "extends": "@preco21/eslint-config"
  }
}

Or to .eslintrc:

{
  "root": true,
  "extends": "@preco21/eslint-config"
}

You can find more details about ESLint configuration here.

Available configs

The package exposes two types of the config: top-level and individual.

Top-level configs

Top-level configs work in a zero-configuration manner, which you don't need extra configuration to use the config:

{
  "extends": "@preco21/eslint-config"
}

Every top-level config has ECMAScript modules support and latest ECMAScript features enabled by default.

Individual configs

If the top-level configs don't fit in your use-cases, you may assemble your own config by mixing individual configs exposed from the rules folder:

{
  "extends": [
    "@preco21/eslint-config/rules/base",
    "@preco21/eslint-config/rules/typescript",
    ...
  ]
}

It's recommended to use other configs upon the base config, since it contains sensible default rules to work with.

Please note that you may need to configure extra options like env or parserOptions as needed.

For example:

{
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "extends": [
    "@preco21/eslint-config/rules/base",
    "@preco21/eslint-config/rules/typescript"
  ]
}

Also, you may need to install optional plugins to use some config. (see install section)

Tips

Browser

If you are in browser environment, you can add browser option to env field:

{
  "env": {
    "browser": true
  }
}

Using globals

As ESLint makes no assumptions about what global variables exist in your execution environment, you will need to provide knowledge of what global variables are available. (e.g. referring external library at runtime)

You can define global variables in your configuration as follows:

{
  "globals": {
    "$": "readonly"
  }
}

For each global variable key, set the corresponding value equal to writable to allow the variable to be overwritten or readonly to disallow overwriting.

See here for more details.

Using script source type

Every top-level config treats your code are in ECMAScript modules enabled environment by default. Add this to your configuration if you want to disable it:

{
  "parserOptions": {
    "sourceType": "script"
  }
}

Using ECMAScript 5

Although this is not generally recommended, you can fallback to ECMAScript 5 by adding this to your configuration:

{
  "extends": [
    "@preco21/eslint-config/rules/base",
    "@preco21/eslint-config/rules/with-es5"
  ]
}

Please note that the with-es5 config automatically enables strict rule.

Note: However, ESLint might still show unexpected errors or warnings because the rules in this config were defined under the assumption that users will be writing ES2015+ code. In this case, you can safely disable the problematic rules manually.

Enforcing strict mode

We don't enable the strict rule by default for reason: Today, we all use tooling like webpack, Babel, and languages like TypeScript. And these tools automatically insert a 'use strict' directive for each source to ensure your code is in strict mode.

Also, ECMAScript modules enabled environments are strict mode by default.

So, enabling strict rule to ensure if the 'use strict' directive is properly placed in your source doesn't really help but redundant.

But, often you do need the rule for writing non-compiled code like CLI scripts.

Then, you can optionally enable the rule for the specific case:

{
  "overrides": [
    {
      "files": ["bin/**/*.js"],
      "parserOptions": {
        "sourceType": "script",
        "ecmaFeatures": {
          "jsx": false
        }
      },
      "rules": {
        "strict": "error"
      }
    }
  ]
}

Electron

If you are in Electron environment, you may need to add electron to import/core-modules setting. So that eslint-import-plugin can consider the electron module as a core module like path:

{
  "settings": {
    "import/core-modules": ["electron"]
  }
}

For more details, see here.