README
@verypossible/eslint-config
Basic eslint config for TypeScript with React (optional).
Getting Started
Follow these steps to add this eslint config to your project.
Installation
- Install packages -
yarn add --dev @verypossible/eslint-config
- Install peer dependencies -
npx install-peerdeps --dev @verypossible/eslint-config
If you run into any issues with peer dependencies, you can install them manually.
yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-plugin-module-resolver eslint eslint-config-prettier eslint-import-resolver-babel-module eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks prettier
Configuration
Create an .eslintrc.js
in the root of your project.
This config can be used with TypeScript, with or without React. At minimum, this config assumes all projects are using es6 or higher and contain a package.json
(for file resolution).
// .eslintrc.js
// typescript
module.exports = {
extends: ["@verypossible/eslint-config"],
};
// OR
// typescript react
module.exports = {
extends: ["@verypossible/eslint-config/react"],
};
In addition to extending the config, you can also add any other valid eslint params that may be useful for your project.
You can then configure the lint
script in package.json
"scripts": {
"lint": "eslint ." // `.` means everything, you can change it to be a given folder, etc.
}
You can fix all automatically fixable errors by adding the --fix
flag to your script
"scripts": {
"lint": "eslint --fix ."
}
More about configuring the eslint cli.
Type checking
This config has linting with type information enabled automatically. Note that this requires certain parserOptions
to be defined -- the defaults for these are set in index.js. Read more about this configuration.
Extending the config
You can extend the config in any way that you'd like, including overriding rules.
ex.
module.exports = {
extends: ["@verypossible/eslint-config/native"],
rules: {
"@typescript-eslint/ban-ts-comment": "warn",
"import/namespace": "off",
},
};
Module resolution
If you're using absolute path resolution aliasing (ie. instead of ../../foo
you have something like ~/foo
) and want to enforce it in import ordering, you can extend the config:
module.exports = {
extends: ["@verypossible/eslint-config"],
rules: {
"import/order": [
"error",
{
pathGroups: [
{
pattern: "~/**", // or whatever your alias is
group: "parent",
},
],
},
],
},
};
Be sure to enable it in your tsconfig.json
as well:
{
// ...rest of your tsconfig.json
"baseURL": ".", // root, could be any glob
"paths": {
"~/*": ["src/**"] // whatever your alias is (~) and wherever it resolves to (src)
}
}
If you are using React Native you will also need to enable module resolution inside the plugins
array of your babel.config.js
:
// ...rest of the config
plugins: [
// ...any other plugins you have
[
"module-resolver",
{
root: ["./"], // root, could be any glob
alias: {
"~": "./src", // whatever your alias is (~) and wherever it resolves to (src)
},
},
],
];
Development
This config extends these configs and plugins:
- eslint - recommended
- @typescript-eslint - recommended
- react - recommended
- react-hooks - recommended
- import - recommended
- prettier
There are a few individual rules configured for each, please check the lib/
folder for more information.
Adding or changing a rule is allowed! Please feel free to open an issue or a pull request to make a case for a rule addition / change.
Roadmap
Please see the open issues for a list of known issues / proposed features.
Contributing
Contributions are welcome! Any contributions you make are greatly appreciated. Please see CONTRIBUTING.md and our Code of Conduct.
License
Distributed under the MIT license