@telefonica/living-apps-eslint-config

Shared ESLint, Typescript and Prettier configuration for Living Apps (React) projects.

ESLint rules to see the available options.

Installation

1.Install dev dependency:

npm i -D @telefonica/living-apps-eslint-config

2. Add ESLint and Prettier configs to your project in package.json file:

"eslintConfig": {
  "extends": [
    "./node_modules/@telefonica/living-apps-eslint-config/.eslintrc.js"
  ]
},
"prettier": "./node_modules/@telefonica/living-apps-eslint-config/.prettierrc.js"

3.To lint your code run:

npx eslint .

(if you've cloned the base repo, npm run lint)

If you'd like fixable errors to be fixed automatically, run:

npx eslint . --fix

(if you've cloned the base repo, npm run lint:fix)

[!NOTE] This config works only for TypeScript projects, e.g., your project must include a .tsconfig.json file.

Customize the ESLint Config

Add your custom ESLint or Prettier rules directly in .eslintrc or package.json file under "rules" (for ESLint) or "prettier/prettier" (for Prettier) field:

Example:

{
  "extends": ["@telefonica/living-apps-eslint-config"],
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

[!NOTE] Visit ESLint rules to see the available options.

Integration with VSCode

1. Uninstall or disable any previously installed prettier extensions.

2. Install (if haven't already) ESLint extension

3. Edit VSCode settings by pressing CMD + SHIFT + P on Mac (or Ctrl + SHIFT + P on Windows), type settings and choose Preferences: Open Settings (JSON). Edit or add the following settings:

// Format a file on save
"editor.formatOnSave": true,
// show eslint icon at bottom toolbar
"eslint.alwaysShowStatus": true,
// turns on Auto Fix for all providers including ESLint
"editor.codeActionsOnSave": {
  "source.fixAll": true
}

Remove `"editor.defaultFormatter": "esbenp.prettier-vscode"` line if you had it before.