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

@verypossible/eslint-config

v1.6.1

Published

Basic eslint config for TypeScript with React (optional).

Downloads

159

Readme

@verypossible/eslint-config

Basic eslint config for TypeScript with React (optional).

Getting Started

Follow these steps to add this eslint config to your project.

Installation

  1. Install packages - yarn add --dev @verypossible/eslint-config
  2. Install peer dependencies - npx install-peerdeps --dev @verypossible/eslint-config

If you run into any issues with peer dependencies, you can install them manually.

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-plugin-module-resolver eslint eslint-config-prettier eslint-import-resolver-babel-module eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks prettier

Configuration

Create an .eslintrc.js in the root of your project.

This config can be used with TypeScript, with or without React. At minimum, this config assumes all projects are using es6 or higher and contain a package.json (for file resolution).

// .eslintrc.js

// typescript
module.exports = {
  extends: ["@verypossible/eslint-config"],
};

// OR

// typescript react
module.exports = {
  extends: ["@verypossible/eslint-config/react"],
};

In addition to extending the config, you can also add any other valid eslint params that may be useful for your project.

You can then configure the lint script in package.json

"scripts": {
  "lint": "eslint ." // `.` means everything, you can change it to be a given folder, etc.
}

You can fix all automatically fixable errors by adding the --fix flag to your script

"scripts": {
  "lint": "eslint --fix ."
}

More about configuring the eslint cli.

Type checking

This config has linting with type information enabled automatically. Note that this requires certain parserOptions to be defined -- the defaults for these are set in index.js. Read more about this configuration.

Extending the config

You can extend the config in any way that you'd like, including overriding rules.

ex.

module.exports = {
  extends: ["@verypossible/eslint-config/native"],
  rules: {
    "@typescript-eslint/ban-ts-comment": "warn",
    "import/namespace": "off",
  },
};

Module resolution

If you're using absolute path resolution aliasing (ie. instead of ../../foo you have something like ~/foo) and want to enforce it in import ordering, you can extend the config:

module.exports = {
  extends: ["@verypossible/eslint-config"],
  rules: {
    "import/order": [
      "error",
      {
        pathGroups: [
          {
            pattern: "~/**", // or whatever your alias is
            group: "parent",
          },
        ],
      },
    ],
  },
};

Be sure to enable it in your tsconfig.json as well:

{
  // ...rest of your tsconfig.json
  "baseURL": ".", // root, could be any glob
  "paths": {
    "~/*": ["src/**"] // whatever your alias is (~) and wherever it resolves to (src)
  }
}

If you are using React Native you will also need to enable module resolution inside the plugins array of your babel.config.js:

// ...rest of the config
plugins: [
  // ...any other plugins you have
  [
    "module-resolver",
    {
      root: ["./"], // root, could be any glob
      alias: {
        "~": "./src", // whatever your alias is (~) and wherever it resolves to (src)
      },
    },
  ],
];

Development

This config extends these configs and plugins:

There are a few individual rules configured for each, please check the lib/ folder for more information.

Adding or changing a rule is allowed! Please feel free to open an issue or a pull request to make a case for a rule addition / change.

Roadmap

Please see the open issues for a list of known issues / proposed features.

Contributing

Contributions are welcome! Any contributions you make are greatly appreciated. Please see CONTRIBUTING.md and our Code of Conduct.

License

Distributed under the MIT license