4. Configurar ESLint y Prettier - sergiJimenez/angular_16_template GitHub Wiki

  1. Una vez que estamos en Visual Studio Code presionamos, conjuntamente, las teclas control + ñ para abrir el Terminal interno.

  2. Ahora vamos a instalar ESLint así que en el Terminal escribimos el siguiente comando:

    npm install @typescript-eslint/eslint-plugin@latest --save-dev
    
  3. En el Terminal escribiremos el siguiente comando:

    npm init @eslint/config
    

    La configuración que deberíamos de tener sería la siguiente:

    PS C:\Users\user-name\Desktop\name-proyect> npm init @eslint/config
    - [X] How would like to use ESLINT? · problems
    - [X] What type of modules does your project use? · none
    - [X] Which framework does your project use? · none
    - [X] Does your project use Typescript? · Yes
    - [X] Where does your code run? · browser
    - [X] What format do you want your config file to be in? · JSON
    Local ESLint installation not found.
    The config that you've selected requires the following dependencies:
    
    @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest
    
    up to date, audited 984 packages in 1s
    
    118 packages are looking for funding
      run `npm fund` for details
    
    found 0 vulnerabilities
    Successfully created .eslintrc.json file in C:\Users\user-name\Desktop\name-proyect
    
  4. A continuación instalaremos Prettier a través del siguiente comando:

    npm install --save-dev --save-exact prettier
    
  5. Creamos en el :root de nuestro proyecto crearemos el archivo .prettierrc nosotros mismos.

  6. Creamos en el :root de nuestro proyecto crearemos el archivo .prettierignore nosotros mismos.

  7. Dentro de este archivo .prettierignore escribiremos el siguiente código:

    # Ignore artifacts:
    coverage
    node_modules/
    build/
    env/
    /.vscode
    dist
    .gitignore
    
  8. Volveremos a abrir el Terminal y ejecutaremos la siguiente linea de comandos:

    npm install eslint-config-prettier
    
  9. Abrimos el archivo .eslintrc.json y en el apartado extends añadiremos prettier. Debería de quedar así:

    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
      ],
    
  10. Después añadiremos las siguientes reglas (rules) a nuestro archivo .eslintrc.json y nos quedaría así:

    {
      "env": {
        "browser": true,
        "es2021": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
      ],
      "overrides": [],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": "latest"
      },
      "plugins": ["@typescript-eslint"],
      "rules": {
        "@typescript-eslint/no-namespace": "off",
        "quotes": ["error", "double"],
        "semi": ["error", "always"],
        "@typescript-eslint/no-explicit-any": [
          "error",
          {
            "fixToUnknown": true
          }
        ],
        "curly": "error",
        "no-empty": "error",
        "@typescript-eslint/explicit-member-accessibility": "warn",
        "@typescript-eslint/no-unsafe-assignment": "warn",
        "@typescript-eslint/explicit-function-return-type": "warn",
        "@typescript-eslint/no-floating-promises": "warn",
        "@typescript-eslint/explicit-module-boundary-types": "warn",
        "@typescript-eslint/member-ordering": "warn",
        "@typescript-eslint/unbound-method": "warn",
        "@typescript-eslint/no-unsafe-member-access": "warn"
      }
    }
    
  11. Abriremos el archivo .prettierrc y escribiremos lo siguiente:

    {
        "trailingComma": "es5",
        "tabWidth": 2,
        "semi": true,
        "singleQuote": false
    }