@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. extend the @telefonica/living-apps-eslint-config ESLint configuration in your project:

• in package.json add or edit (if already exists) eslintConfig field:

"eslintConfig": {
  "extends": [
    "@telefonica/living-apps-eslint-config"
  ]
}

• or create .eslintrc file with the following content:

{
  "extends": ["@telefonica/living-apps-eslint-config"]
}

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.

Use prettier config of this package

You can use the prettier config of this package in your project. For that, create a .prettierrc.mjs file in the root of your project with the following content:

// .prettierrc.mjs
import fs from 'fs/promises';
import yaml from 'js-yaml';

const prettierFile = await fs.readFile('./node_modules/@telefonica/living-apps-eslint-config/.prettierrc', 'utf8');

const prettierConfig = yaml.load(prettierFile);

export default prettierConfig;

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.