A package for an ESLint + Prettier configuration that can be shared across different projects in OneWelcome.
npm install @onewelcome/eslint-config-shared-codestyle
This is the reusable eslint/prettier/husky config to use at OneWelcome.
The original config was aimed at typescript development so if you're using pure JS you might need to adjust some rules.
This project contains config and instructions for 4 different tools that all work together to provide an easy and optimized developer experience.
* eslint for linting.
* prettier for code style/formatting.
* husky for pre-commit hooks to enforce the linting and formatting.
* lint-staged for easily managing the husky config and enabling it on git staged files.
Install as a development dependency:
``
npm i @onewelcome/eslint-config-shared-codestyle -D
Install the peerDependencies relevant for JS.
`
npm i -D eslint-plugin-unused-imports eslint prettier eslint-config-prettier eslint-plugin-prettier
Install the same peerDependencies used for JS development + typescript specific packages:
`
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-unused-imports eslint prettier eslint-config-prettier eslint-plugin-prettier
Finish of with the following command, which will install both husky and lint-staged and will add some default configuration to your package.json (see this link for more info)
`
npx mrm@2 lint-staged
Add a eslint.config.js file to the root of your project:
`
import sharedConfig from "@onewelcome/eslint-config-shared-codestyle";
export default [
// Inherit everything from the shared codestyle
...sharedConfig,
// TypeScript-specific overrides
{
languageOptions: {
parserOptions: {
project: "./tsconfig.eslint.json"
}
},
rules: {
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/no-parameter-properties": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"@typescript-eslint/interface-name-prefix": 0
}
},
];
`
Add a .prettierrc.js file to the root of your project:
`
module.exports = {
...require("@onewelcome/eslint-config-shared-codestyle/.prettierrc")
// You can overwrite the global config here...
};
Next, add a lint script to your package.json like this (mind the quotes around the regex and the extension. Either .js or .ts):
`
{
scripts: {
"lint": "eslint --fix '?(src|test|features)/*/.ts'",
...
}
}
The --fix will auto-fix 'unused imports' along with other minor issues.
Next, add a format script to your package.json like this (again mind the quotes around the regex and the extension. Either .js or .ts):
`
{
scripts: {
"format": "prettier --ignore-path .gitignore --write './(src|test|features)/*/.ts'",
}
}
Running this script will fix formatting for all your source and test files according to your prettier-config.
You can configure rules in your project if you don't want to go with these defaults. For consistency though this is not recommended. If patterns emerge to enable/disable a certain rule it might be a better idea to just add it to this shared library so all projects follow them.
`
{
"rules": {
"@typescript-eslint/interface-name-prefix": "off",
"@typescript-eslint/triple-slash-reference": "off"
}
}
By default, this configuration will use the tsconfig.json file at the root of your project..ts
This can possibly lead to errors for files in your test, features and other folders.tsconfig.eslint.json
This is easily fixed by creating a file like this:
`
{
"extends": "./tsconfig.json",
"include": [
"src",
"features",
"test"
]
}
Then, point eslint to this file in your eslint.config.js file:
`
{
"parserOptions": {
"project": "./tsconfig.eslint.json"
},
}