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:
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
Extend config
To extend config use one of the following methods. Recommended is to use .yaml
.
package.json
.eslintrc.yml
extends: - "eslint-config-ableneo"
eslintrc.json
eslintrc.js
moduleexports = 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 = ; moduleexports = extends: "eslint-config-ableneo/core" "eslint-config-ableneo/flow" "eslint-config-ableneo/typescript" "eslint-config-ableneo/react" rules: ;
Lint code
- add to package.json
- run bash script
yarn run lintyarn run lint:fix
or
npm run testnpm run lint:fix
Adding or overriding rules
eslint-plugin-dollar-sign
support for another plugin like-
helpful for ES6 code that uses jQuery
-
package.json
extends: - eslint-config-ableneoplugins: # https://github.com/erikdesjardins/eslint-plugin-dollar-sign - dollar-signrules: # Require dollar sign for some variables that holds jQuery objects dollar-sign/dollar-sign: - error - ignoreProperties
index.ts
moduleexports = extends: "eslint-config-ableneo" plugins: "dollar-sign" rules: "dollar-sign/dollar-sign": "error" "ignoreProperties" ;
index.json