This package provides the react eslint config as an extensible shared component.
- React based projects
- Other JS based projects:
@porscheofficial/eslint-config-porschedigital-base
- Install with peerDependencies:
npm info "@porscheofficial/eslint-config-porschedigital-react" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "@porscheofficial/eslint-config-porschedigital-react"
- Create or update
/.eslintrc
:
{
"extends": "@porscheofficial/eslint-config-porschedigital-react"
}
- [Optional] Add prettier config:
yarn add --dev --exact prettier @porscheofficial/prettier-config-porschedigital
Update package.json
:
{
"prettier": "@porscheofficial/prettier-config-porschedigital"
}
- [Optional] Add scripts to
./package.json
:
"scripts": {
"eslint:ci": "eslint src/ --ext .js,.jsx,.tsx,.ts -f stylish",
"eslint:fix": "eslint src/ --fix --ext .js,.jsx,.tsx,.ts -f stylish --quiet",
"prettier:ci": "prettier --check ./",
"prettier:fix": "prettier --write ./"
}
- [Optional] Enable eslint autofix:
Requires Prettier Plugin
esbenp.prettier-vscode
Requires ESLint Plugin:dbaeumer.vscode-eslint
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"html",
"javascript",
"typescript",
"typescript",
],
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
Unfortunately eslint
doesn't officially support plugins as dependencies in shareable configs (See eslint#3458).
The result is, that eslint
doesn't find these plugins.
However, we want this package to be as convient to use as possible, so we don't plan to add these plugins as peerDependencies.
If you see a complain like "eslint-plugin-jest"
, simply install this dependency explicitly:
yarn add --dev --exact eslint-plugin-jest
With more recent package managers, dependencies are installed in a flat way.
That means, that dependencies and secondary dependencies are installed directly in the top level node_modules
directory (See how npm3 works).
Reference directly to your .tsconfig
.
//.eslintrc
{
// ...
"parserOptions": {
"project": "./tsconfig.json"
},
// ...
}
See LICENSE.