LuisLlamas Logo
ES
vuejs-configuracion-entorno-desarrollo

Configuración del entorno de desarollo para Vue

  • 5 min
  • Iniciación

Cuando trabajemos con nuestro proyecto de Vue.js, hay muchas configuraciones que podemos realizar para facilitar nuestra experiencia de desarrollo.

Hemos visto que en un proyecto intervienen muchas herramientas y ficheros de configuración que podemos toquitear para ajustar el proyecto a nuestros gustos y nuestras necesidades.

Por ejemplo, tendremos que “lidiar” con herramientas como VSCode, Vite, ESLint y Prettier, o ficheros de configuración como jsconfig.json o tsconfig.json.

Por supuesto, cada uno de ellos daría para mucho hablar. Además dependerá de las necesidades de vuestro proyecto, e incluso de vuestros gustos y estilo.

En este artículo vamos a repasar algunos de ellos para, por lo menos, tener una idea y un punto de partida para algunas de ellas 👇.

Instalación de la extensión de Visual Studio Code

Si usamos Visual Studio Code (VSCode) para el desarrollo, lo primero que debemos hacer es instalar la extensión oficial de VS Code para Vue.js.

vscode-vue-extension

Para instalarlo,

  1. Abre VS Code
  2. Ve al panel de extensiones (Ctrl+Shift+X)
  3. Busca “Vue”
  4. Haz clic en instalar

Alternativamente también podríamos hacerlo desde la línea de comandos ejecutando,

code --install-extension vue.volar

La nueva extensión oficial de Vue (a veces llamada Volar, porque está basada en ella) reemplaza a la anterior que se llamaba Vetur

Si encontráis información por ahí sobre Vetur, está obsoleta

Configuración de VSCode para Vue.js

Personaliza la configuración de VSCode para trabajar mejor con Vue.js añadiendo estas configuraciones a tu settings.json:

  1. Abre la configuración de VSCode (Ctrl+,)
  2. Haz clic en el icono de “Open Settings (JSON)” en la esquina superior derecha.
  3. Añade las siguientes configuraciones:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "volar.takeOverMode.enabled": true,
  "volar.completion.autoImportComponent": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2,
  "files.associations": {
    "*.vue": "vue"
  },
  "emmet.includeLanguages": {
    "vue": "html"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  }
}

Estas configuraciones:

  • Activan el formateo automático al guardar
  • Configuran Prettier como formateador predeterminado
  • Habilitan la corrección automática de ESLint al guardar
  • Activan el “Take Over Mode” de Volar para mejor soporte de TypeScript
  • Configuran el autocompletado para componentes Vue
  • Establecen la indentación a 2 espacios
  • Configuran asociaciones de archivos para Vue
  • Habilitan Emmet para archivos Vue

Configuración de jsconfig.json/tsconfig.json

Los archivos jsconfig.json y tsconfig.json son necesarios para que el IDE detecte configuramente el lenguaje en nuestros ficheros.

Dependiendo de si utilizas JavaScript o TypeScript, deberás configurar uno u otro.

Creamos un archivo jsconfig.json en la raíz de tu proyecto:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "baseUrl": ".",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["src/*"]
    },
    "jsx": "preserve",
    "lib": ["es2022", "dom", "dom.iterable", "scripthost"]
  },
  "exclude": ["node_modules", "dist"],
  "vueCompilerOptions": {
    "target": 3.3
  }
}

Creamos un archivo tsconfig.json en la raíz de tu proyecto:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["vite/client"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["es2022", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": ["node_modules", "dist"],
  "vueCompilerOptions": {
    "target": 3.3
  }
}

Configuración del proyecto Vue con Vite

Vite es un bundler moderno y extremadamente rápido que ya hemos visto, usamos para desarrollar nuestro proyecto.

Si necesitamos personalizar la configuración de Vite, podemos hacerlo editando el archivo vite.config.js. Por ejemplo,

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    minify: 'terser',
    sourcemap: true
  }
})

Esta configuración:

  • Configura el alias @ para la carpeta src
  • Establece el puerto del servidor de desarrollo a 3000
  • Abre automáticamente el navegador cuando se inicia el servidor
  • Configura opciones de compilación como el directorio de salida, minimización y sourcemaps

Configuración de Prettier para Vue.js

Prettier es una herramienta de formateo de código que garantiza un estilo consistente en todo tu proyecto. Si no lo tenemos instalado ya, podemos hacerlo con,

npm install --save-dev prettier @prettier/plugin-vue

Crea un archivo .prettierrc en la raíz de tu proyecto:

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore"
}

Esta configuración:

  • Elimina los puntos y comas al final de las líneas
  • Establece la indentación a 2 espacios
  • Utiliza comillas simples
  • Añade comas finales según el estándar ES5
  • Limita el ancho de línea a 100 caracteres
  • Mantiene espacios entre llaves en objetos
  • Evita paréntesis innecesarios en funciones flecha de un solo parámetro
  • Indenta correctamente las secciones <script> y <style> en componentes Vue
  • Normaliza los finales de línea
  • Ignora la sensibilidad de espacios en blanco en HTML

Si necesitamos ignorar archivos para Prettier, podemos crea un archivo .prettierignore para excluir ciertos archivos para aplicar el formato.

Configuración del Linter para Vue.js

ESLint es una herramienta esencial para mantener la calidad del código y seguir las mejores prácticas en proyectos Vue.js. Si no seleccionaste ESLint durante la creación del proyecto, puedes instalarlo manualmente:

npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-prettier

Crea un archivo .eslintrc.js en la raíz de tu proyecto:

module.exports = {
  root: true,
  env: {
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential',  // Menos reglas, bueno para principiantes
    'plugin:vue/vue3-recommended', // Más estricto, recomendado para desarrollo profesional
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 2022
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off', // Para principiantes
    'vue/require-default-prop': 'off', // Para principiantes
    'vue/script-setup-uses-vars': 'error',
    'vue/no-unused-vars': 'error'
  }
}

Si necesitamos ignorar archivos para ESLint, podemos crear un archivo .eslintignore para excluir archivos del linting,

En esta página