@tokenfoundry/eslint-config
Please use this configuration to maintain a common and homogeneous code base.
Install
Install this package as any other package with:
yarn add --dev eslint @tokenfoundry/eslint-config
Create a .eslintignore
and add any files that are bundled, builded and/or transpiled:
!.eslintrc.js # allow self-formating
dist
lib
In the package.json
file add the following in the "scripts"
section:
{
// ...
"scripts": {
// ...
"lint": "eslint src __tests__ .eslintrc.js --ext .js --ext .jsx"
},
}
Assuming that the main code is in the
src
directory, change as needed.
Configure for Node.js
Create a .eslintrc.js
file in the root of your project and add the following:
// .eslintrc.js
module.exports = {
extends: ["@tokenfoundry/eslint-config"],
};
Configure for ESNext (Babel) projects
Create a .eslintrc.js
file in the root of your project and add the following:
// .eslintrc.js
module.exports = {
extends: ["@tokenfoundry/eslint-config/babel"],
};
Configure for React.js and React-Native
Create a .eslintrc.js
file in the root of your project and add the following:
// .eslintrc.js
module.exports = {
extends: ["@tokenfoundry/eslint-config/react"],
};
Configure stylelint for styled-components
If you are using styled-components
you should use stylelint
to lint the inlined CSS code.
Install it with:
yarn add --dev stylelint
Then create a .stylelintrc.js
file with this content:
// .stylelintrc.js
module.exports = {
extends: ["@tokenfoundry/eslint-config/stylelint"],
};
In the package.json
file add the following in the "scripts"
section:
{
// ...
"scripts": {
// ...
"lint:css": "stylelint '{src,__tests__}/**/*.{js,jsx}'",
},
}
Usage
To lint the files run:
yarn lint
To lint the files and auto-format run:
yarn lint --fix
Do not run
yarn lint:css --fix
it will break your component file.
Recommended usage
Install typicode/husky
so you always have to run the linter before committing:
yarn add --dev husky@next
And add to the package.json
:
{
// ...
"scripts": {
// ...
"lint": "eslint src __tests__ .eslintrc.js --ext .js --ext .jsx"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint"
}
},
}
Use
yarn lint && yarn lint:css
instead if did setupstylelint
.
Custom rules
Modify the .eslintrc.js
and add a "rules"
field:
// .eslintrc.js
module.exports = {
extends: ["@tokenfoundry/eslint-config/react"],
rules: [
"react/prop-types": 0, // disabled
"react/display-name": 1, // warning
"react/jsx-boolean-value": 2, // throw error
],
};
Publishing
To publish and update of this package run:
# git add ...
# git commit ...
yarn publish --access=public
git push --follow-tags