menu: eslint-config-ableneo name: Readme

eslint-config-ableneo

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

• 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.

You can expect

• linting using eslint
• extended eslint-config-react-app
• pretty printing using prettier on eslint --fix
• bash script for additional setup

Tools:

• prettier

Configs:

• eslint-config-react-app
• plugin:react/recommended
• plugin:flowtype/recommended
• plugin:jest/recommended
• plugin:@typescript-eslint/recommended
• eslint-config-prettier
• eslint-config-prettier/flowtype
• eslint-config-prettier/@typescript-eslint
• eslint-config-prettier/react

Plugins:

• eslint-plugin-flowtype
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react

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

• Modify package.json based on following file
• Modify .gitignore to contain following ignores

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"]
  }
}