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

eslint-config-algolia

v23.2.1

Published

Algolia's ESLint config.

Downloads

7,482

Readme

eslint-config-algolia

Version Build Status License Downloads

This is Algolia's linting and formatting of JavaScript projects (Vanilla, React, Vue) repository.

It explains to you how to setup your project to use it and never worry again about indentation, curly spaces, let vs const etc...

This code style is only as useful as you activate travis for your project so that it runs linting in your test phase and warns you.

Just focus on coding.

Table of Contents

Setup your project

Base requirements

yarn add \
eslint @babel/eslint-parser prettier \
eslint-config-algolia eslint-config-prettier \
eslint-plugin-import eslint-plugin-prettier \
@eslint-community/eslint-plugin-eslint-comments eslint-plugin-jsdoc \
--dev

Vanilla

.eslintrc.js

module.exports = {
  extends: 'algolia'
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
module.exports = [
  ...algolia,
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

Jest

We recommend using Jest as a test runner.

terminal

yarn add eslint-plugin-jest --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/jest']
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
const algoliaJest = require('eslint-config-algolia/flat/jest');
module.exports = [
  ...algolia,
  ...algoliaJest,
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

React

terminal

yarn add eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/react']
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
const algoliaReact = require('eslint-config-algolia/flat/react');
module.exports = [
  ...algolia,
  ...algoliaReact,
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

Flow (deprecated)

terminal

yarn add eslint-plugin-flowtype --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/flowtype']
};

Flow with React (deprecated)

terminal

yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/flowtype', 'algolia/react']
};

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

TypeScript

terminal

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/typescript'],

  parserOptions: {
    project: '<path-to-tsconfig.json>',
  },
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
const algoliaTypescript = require('eslint-config-algolia/flat/typescript');
module.exports = [
  ...algolia,
  ...algoliaTypescript,
  {
    languageOptions: {
      parserOptions: {
        project: '<path-to-tsconfig.json>',
      },
    },
  },
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint --ext .js,.ts,.tsx .",
    "lint:fix": "npm run lint -- --fix"
  }
}

You also need to make sure that all the files you want to lint are also included in tsconfig.json with the include property.

TypeScript with React

terminal

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/react', 'algolia/typescript']
};

Note: Be sure to put the algolia/typescript configuration last so the parser is properly set for TypeScript files.

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
const algoliaReact = require('eslint-config-algolia/flat/react');
const algoliaTypescript = require('eslint-config-algolia/flat/typescript');
module.exports = [
  ...algolia,
  ...algoliaReact,
  ...algoliaTypescript,
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint --ext .js,.ts,.tsx .",
    "lint:fix": "npm run lint -- --fix"
  }
}

Vue

terminal

yarn add eslint-plugin-vue --dev

.eslintrc.js

module.exports = {
  extends: ['algolia', 'algolia/vue']
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
const algoliaVue = require('eslint-config-algolia/flat/vue');
module.exports = [
  ...algolia,
  ...algoliaVue,
];

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint --ext .js,.vue .",
    "lint:fix": "npm run lint -- --fix"
  }
}

VSCode

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

Node.js

package.json

{
  "scripts": {
    "test": "npm run lint",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

.eslintrc.js

module.exports = {
  extends: 'algolia',
  rules: {
    'import/no-commonjs': 'off'
  },
};

eslint.config.js

const algolia = require('eslint-config-algolia/flat/base');
module.exports = [
  ...algolia,
  {
    rules: {
      'import/no-commonjs': 'off'
    }
  },
];

Existing codebase setup

If you have a lot of files already written and wants to now use our linting tools, you might have a lot of errors. There's hope!

Just reformat all the files automatically and then manually fix remaining errors.

terminal

npm run lint:fix

Setup autofix in IDE

Don't overlook this part, autofixing on save is a huge productivity boost.

Use any ESLint integration and activate "Fix on save" option.

Also activate "Lint HTML files" when dealing with .vue components.

Ignoring files

See "Ignoring Files and Directories" on ESLint website.

Contributing

Test

We have a sample-project.

yarn test

Release

npm run release