@porscheofficial/eslint-config-porschedigital-react

@porscheofficial/eslint-config-porschedigital-react

This package provides the react eslint config as an extensible shared component.

• Intended Projects
• Configure Project
• Errors
• License

✅ Intended Projects

• React based projects
• Other JS based projects: @porscheofficial/eslint-config-porschedigital-base

🔧 Configure Project

• 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:

if(ide === "vscode") update ./.vscode/settings.json:

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
 }
}

Errors

ESLint couldn't find the plugin "eslint-plugin-jest"

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).

Parsing error: Cannot read file [...]tsconfig

Reference directly to your .tsconfig.

//.eslintrc
{
  // ...
      "parserOptions": {
      "project": "./tsconfig.json"
    },
 // ...
}

License

See LICENSE.

Changelog

4.0.0 (2023-08-07)

⚠ BREAKING CHANGES

• Upgrade Dependencies (ce31450)
  • Migrate to @typescript-eslint/recommended-type-checked and @typescript-eslint/stylistic-type-checked
  • Major upgrade prettier to v3 / eslint-plugin-prettier to v9
  • Major upgrade eslint-plugin-n to v16