Wondering what’s next for npm?Check out our public roadmap! »

    eslint-config-algolia

    18.0.0 • Public • Published

    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 prettier \
    eslint-config-algolia eslint-config-prettier \
    eslint-plugin-import eslint-plugin-prettier \
    eslint-plugin-eslint-comments eslint-plugin-jsdoc \
    --dev

    Vanilla

    .eslintrc.js

    module.exports = {
      extends: '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']
    };

    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']
    };

    package.json

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

    Flow

    terminal

    yarn add eslint-plugin-flowtype --dev

    .eslintrc.js

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

    Flow with React

    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']
    };

    package.json

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

    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.

    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']
    };

    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'
      }
    };

    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

    Install

    npm i eslint-config-algolia

    DownloadsWeekly Downloads

    1,788

    Version

    18.0.0

    License

    MIT

    Unpacked Size

    37.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar