yarn add eslint-config-werk85 eslint@8 -D
Create a .eslintrc.json
in the root of your project with the following content.
{
"root": true,
"extends": "werk85",
"parserOptions": {
"project": "./tsconfig.json"
}
}
Now add the following lint:es
and lint:es:fix
scripts to your root package.json
:
{
...
"scripts": {
"lint:es": "yarn eslint .",
"lint:es:fix": "yarn eslint --fix ."
}
...
}
In a monorepo setup is the configuration a little bit different. You need to extend the configuration as described in the following JSON snippet and add the scripts
to each packages/*/package.json
file. Then run the linting in all sub packages with lerna
or yarn
workspace tools.
{
"root": true,
"extends": "werk85",
"parserOptions": {
"project": "./tsconfig.json"
},
"overrides": [
// This makes sure you can use commonjs `require` calls in `js` files that are included in your `tsconfig.json` files.
{
"files": ["*.js"],
"rules": {
"@typescript-eslint/no-var-requires": "off"
}
},
// Exclude this
{
"files": ["packages/*/test/**"],
"extends": ["werk85", "werk85/jest"],
"parserOptions": {
"project": "./test/tsconfig.json"
}
}
]
}
The configuration expects that you have in each project root, packages/*
and packages/*/test
directory a tsconfig.json
that includes
or excludes
all files you want to lint. For linting of *.js
files make sure you set allowJs: true
in your root tsconfig.json
if you extend all other configurations from it or in each individually.
If you need to extend a configuration e.g. for using the werk85/react
ruleset in your frontend package, you need to create a .eslintrc.js
file in the folder for which the new configuration should be applied and copy the following code.
const path = require('path')
const project = path.join(__dirname, 'tsconfig.json')
module.exports = {
extends: 'werk85/react',
parserOptions: {
project
},
settings: {
'import/resolver': {
typescript: {
project
}
}
}
}
This base configuration can now be adjusted to your needs. It is important to define the project
properties as absolute paths else it can happen that eslint
uses the wrong tsconfig.json
.
If you want to lint the .eslintrc.js
file in your project you need to explicitly add the file in your tsconfig.json
s includes
property. Hidden files are excluded by default from typescript projects.
Following plugins are included in werk85
:
Please consult the documentation of each plugin for further rule explanation.
The following plugins are added additionally to werk85/fp-ts
:
The following plugins are added additionally to werk85/react
:
The following plugins are added additionally to werk85/jest
:
This configuration can be added as follows to yours .eslintrc.json
:
{
"overrides": [
{
"files": "test/**",
"extends": ["werk85", "werk85/jest"],
"parserOptions": {
"project": "./test/tsconfig.json"
}
}
]
}
If this error occurs set the import/resolver
typescript directory in your .eslintrc.json
or .eslintrc.js
file to the path of the tsconfig.json
file that defines the module paths
parameter.
module.exports = {
settings: {
'import/resolver': {
typescript: {
project: 'path to your tsconfig.json'
}
}
}
}
If you use VSCode install the ESLint Plugin and make sure you add the following configurations to your settings.json
. You can access the settings by pressing CMD + ,
on your keyboard and click on the Open Settings (JSON)
icon in the upper right corner.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
This enables the automatic fixing of errors on save and enables eslint to validate typescript files.