Skip to content
Alebat

Configuración de ESLint y Prettier

Introducción

Esta guía proporciona los pasos para configurar ESLint y Prettier en tu proyecto. ESLint es una herramienta de análisis de código estático para identificar patrones problemáticos encontrados en el código JavaScript. Prettier es un formateador de código que garantiza que todo tu código siga un estilo consistente.

Requisitos Previos

  • Node.js instalado en tu sistema.
  • Un proyecto con un archivo package.json.

Paso 1: Instalación de ESLint y Prettier

  • Primero, instala ESLint y Prettier como dependencias de desarrollo en tu proyecto:
Terminal window
npm install eslint prettier --save-dev

Paso 2: Configuración de ESLint

  • Sigue los pasos del instalador. Los pasos pueden variar dependiendo de la naturaleza del proyecto.
Terminal window
npx eslint --init

Paso 3: Instalación de Plugins y Configuraciones Adicionales

  • Instala plugins adicionales para integrar Prettier con ESLint
Terminal window
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
  • eslint-config-prettier: Desactiva las reglas de ESLint que pueden entrar en conflicto con Prettier.
  • eslint-plugin-prettier: Ejecuta Prettier como una regla de ESLint.

Paso 4: Configuración de .eslintrc.js

const RULES = {
  OFF: "off",
  WARN: "warn",
  ERROR: "error",
};


module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["standard", "prettier"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "prettier"],
  ignorePatterns: ["**/*.ts"],
  rules: {
    "no-undef": RULES.OFF,
    "prettier/prettier": "error",
    "vue/first-attribute-linebreak": RULES.OFF,
    "no-unused-vars": [RULES.OFF],
    "arrow-spacing": [RULES.ERROR],
    "object-curly-spacing": [RULES.ERROR, "always"],
    "array-callback-return": [RULES.OFF, { checkForEach: true }],
    "vue/require-default-prop": RULES.OFF,
    "vue/singleline-html-element-content-newline": 0,
    "vue/component-name-in-template-casing": [RULES.ERROR, "PascalCase"],
    "vue/html-quotes": [RULES.ERROR, "double", { avoidEscape: true }],
    "vue/mustache-interpolation-spacing": [RULES.ERROR, "always"],
    "vue/no-multi-spaces": [
      RULES.ERROR,
      {
        ignoreProperties: false,
      },
    ],
    "vue/no-spaces-around-equal-signs-in-attribute": [RULES.ERROR],
    "vue/v-on-style": [RULES.ERROR, "shorthand"],
    "vue/v-bind-style": [RULES.ERROR, "shorthand"],
    "vue/multi-word-component-names": RULES.OFF,
    "no-return-assign": RULES.OFF,
    "no-mixed-operators": RULES.OFF,
    "vue/no-setup-props-destructure": RULES.OFF,
    "vue/no-v-text-v-html-on-component": RULES.OFF,
  },
};

Paso 5: Configuración de .prettierrc.js

{
  "printWidth": 90,
  "singleQuote": true,
  "bracketSpacing": true,
  "semi": false,
  "tabWidth": 2
}

Paso 6: Configuración de sttings.json

  • DOCUMENTO ENTERO CON LINTERS. ES DE EJEMPLO NO COPIAR Y PEGAR PORQUE OS PUEDE DEJAR DE FUNCIONAR
  • Cada proyecto puede tener la configuración que quiera, pero para que funcione correctamente, hay que tener en cuenta que en el archivo settings.json de VSCode, hay que añadir las siguientes líneas:
"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },


{
    "git.terminalAuthentication": false,
    "git.confirmSync": false,
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "material-icon-theme",
    "files.autoSave": "onWindowChange",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "editor.defaultFormatter": "stylelint.vscode-stylelint",
    "editor.formatOnSave": false,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "stylelint.enable": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
    },
    "stylelint.snippet": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue"
    ],
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue"
    ],
    "rapidapi.terminalLink.enabled": false,
    "editor.cursorBlinking": "expand",
    "editor.fontFamily": "'Cascadia Code', 'Droid Sans Mono', 'monospace', monospace",
    "editor.fontLigatures": true,
    "editor.cursorWidth": 3,
    "workbench.colorCustomizations": {
        "editorCursor.foreground": "#1666cf",
        "terminalCursor.foreground": "#1666cf"
    },
    "eslint.codeActionsOnSave.rules": null,
    "eslint.options": {


    },
    "indentRainbow.colorOnWhiteSpaceOnly": true,
    "window.zoomLevel": 1
}