Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
rules
src
.babelrc
.editorconfig
.eslintrc.js
.gitignore
.npmignore
.prettierrc
.yarnrc
CHANGELOG.md
LICENSE
README.md
babel.config.js
base.js
core.js
flow.js
index.js
package.json
react.js
tsconfig.json
typescript.js

README.md

menu name
eslint-config-ableneo
Readme

eslint-config-ableneo

npm version node Build Status lerna styled with prettier tested with jest

This package extends eslint-config-react-app with prettier.

support typescript support typescript support typescript

  • One config for vanilla javascript, flow, and TypeScript
  • Use this config if you do not want to setup eslint with all configs and plugins.
  • Install and extend eslint-config-ableneo it works as create-react-app react-scripts but for eslint, linting with prettier.

Origin of this config is in https://github.com/marcelmokos/eslint-config-with-prettier. npm

You can expect

Tools:

Configs:

Plugins:

Usage

Fist time use

  • Commit before installing

  • Install the config

  • Commit all the changes

  • Run yarn lint:fix. All the code will be formatted

  • Commit all the changes again.

After first time

  • Run yarn lint:fix regularly
  • Precommit hook will format the code using yarn lint:fix for committed files

Installation

Automatic

  • config with generator that will setup your environment with testing and linting
yarn add --dev eslint-config-ableneo && npx hygen-add eslint-config-ableneo && npx hygen init-config new

or

npm install --save-dev eslint-config-ableneo react-scripts && npx hygen-add eslint-config-ableneo && npx hygen init-config new

You need to have only one .eslintrc file .eslintrc.yml was automatically generated please remove any other config from the project

After automatic install you do not need to continue with manual install.

Manual install and setup

  • follow these steps only if you want to run

If using npm 5+, use this shortcut for installing minimal peerDependencies

Files to copy or modify

  • Copy following files to your project
.editorcofing
.prettierrc
.eslint.yml

Extend config

To extend config use one of the following methods. Recommended is to use .yaml.

  • package.json
{
  "eslintConfig": {
    "extends": "eslint-config-ableneo"
  }
}
  • .eslintrc.yml
extends:
  - "eslint-config-ableneo"
  • eslintrc.json
{
  "extends": ["eslint-config-ableneo"]
}
  • eslintrc.js
module.exports = {
  extends: ["eslint-config-ableneo"],
};
  • full config you are importing

  • you are able to add or disable rules

  • parts of the config can be disabled, by removing it the config from extends

const merge = require("merge");

module.exports = {
  extends: [
    "eslint-config-ableneo/core",
    "eslint-config-ableneo/flow",
    "eslint-config-ableneo/typescript",
    "eslint-config-ableneo/react",
  ],
  rules: merge(
    require("eslint-config-ableneo/rules/deprecated"),
    require("eslint-config-ableneo/rules/prettier"),
  ),
};

Lint code

  • add to package.json
{
  "scripts": {
    "lint": "eslint . --cache --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "yarn lint --fix"
  }
}
  • run bash script
yarn run lint
yarn run lint:fix

or

npm run test
npm run lint:fix

Adding or overriding rules

support for another plugin like eslint-plugin-dollar-sign

  • helpful for ES6 code that uses jQuery

  • package.json

{
  "eslintConfig": {
    "extends": "eslint-config-ableneo",
    "plugins": ["dollar-sign"],
    "rules": {
      "dollar-sign/dollar-sign": ["error", "ignoreProperties"]
    }
  }
}
extends:
  - eslint-config-ableneo
plugins:
  # https://github.com/erikdesjardins/eslint-plugin-dollar-sign
  - dollar-sign
rules:
  # Require dollar sign for some variables that holds jQuery objects
  dollar-sign/dollar-sign:
    - error
    - ignoreProperties
  • index.ts
module.exports = {
  extends: ["eslint-config-ableneo"],
  plugins: ["dollar-sign"],
  rules: {
    "dollar-sign/dollar-sign": ["error", "ignoreProperties"],
  },
};
  • index.json
{
  "extends": ["eslint-config-ableneo"],
  "plugins": ["dollar-sign"],
  "rules": {
    "dollar-sign/dollar-sign": ["error", "ignoreProperties"]
  }
}
You can’t perform that action at this time.