LuisLlamas Logo
EN
vuejs-configuracion-entorno-desarrollo

Development Environment Setup for Vue

  • 5 min
  • Beginner

When working on our Vue.js project, there are many configurations we can make to ease our development experience.

We have seen that many tools and configuration files are involved in a project that we can tweak to adjust the project to our tastes and needs.

For example, we will have to “deal” with tools like VSCode, Vite, ESLint, and Prettier, or configuration files like jsconfig.json or tsconfig.json.

Of course, each of them could be discussed at length. It will also depend on the needs of your project, and even your tastes and style.

In this article, we will review some of them to at least have an idea and a starting point for some of them 👇.

Installing the Visual Studio Code Extension

If we use Visual Studio Code (VSCode) for development, the first thing we need to do is install the official VS Code extension for Vue.js.

vscode-vue-extension

To install it,

  1. Open VS Code
  2. Go to the Extensions panel (Ctrl+Shift+X)
  3. Search for “Vue”
  4. Click Install

Alternatively, we could also do it from the command line by running,

code --install-extension vue.volar

The new official Vue extension (sometimes called Volar, as it is based on it) replaces the previous one called Vetur

If you find information out there about Vetur, it is deprecated

Configuring VSCode for Vue.js

Customize your VSCode settings to work better with Vue.js by adding these configurations to your settings.json:

  1. Open the VSCode settings (Ctrl+,)
  2. Click on the “Open Settings (JSON)” icon in the top right corner.
  3. Add the following configurations:
{
  "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"
  }
}

These configurations:

  • Enable automatic formatting on save
  • Set Prettier as the default formatter
  • Enable ESLint auto-fixing on save
  • Activate Volar’s “Take Over Mode” for better TypeScript support
  • Configure autocomplete for Vue components
  • Set indentation to 2 spaces
  • Configure file associations for Vue
  • Enable Emmet for Vue files

Configuring jsconfig.json/tsconfig.json

The jsconfig.json and tsconfig.json files are necessary for the IDE to detect the language correctly in our files.

Depending on whether you are using JavaScript or TypeScript, you will need to configure one or the other.

Create a jsconfig.json file at the root of your project:

{
  "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
  }
}

Create a tsconfig.json file at the root of your project:

{
  "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
  }
}

Configuring the Vue Project with Vite

Vite is a modern and extremely fast bundler that we have already seen, and we use it to develop our project.

If we need to customize the Vite configuration, we can do so by editing the vite.config.js file. For example,

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
  }
})

This configuration:

  • Sets the @ alias for the src folder
  • Sets the development server port to 3000
  • Automatically opens the browser when the server starts
  • Configures build options such as output directory, minification, and sourcemaps

Configuring Prettier for Vue.js

Prettier is a code formatting tool that ensures a consistent style throughout your project. If we haven’t installed it yet, we can do so with,

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

Create a .prettierrc file at the root of your project:

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

This configuration:

  • Removes semicolons at the end of lines
  • Sets indentation to 2 spaces
  • Uses single quotes
  • Adds trailing commas according to the ES5 standard
  • Limits line width to 100 characters
  • Maintains spacing between braces in objects
  • Avoids unnecessary parentheses in single-parameter arrow functions
  • Correctly indents <script> and <style> sections in Vue components
  • Normalizes line endings
  • Ignores whitespace sensitivity in HTML

If we need to ignore files for Prettier, we can create a .prettierignore file to exclude certain files from formatting.

Configuring the Linter for Vue.js

ESLint is an essential tool for maintaining code quality and following best practices in Vue.js projects. If you did not select ESLint during project creation, you can install it manually:

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

Create a .eslintrc.js file at the root of your project:

module.exports = {
  root: true,
  env: {
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential',  // Fewer rules, good for beginners
    'plugin:vue/vue3-recommended', // Stricter, recommended for professional development
    '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', // For beginners
    'vue/require-default-prop': 'off', // For beginners
    'vue/script-setup-uses-vars': 'error',
    'vue/no-unused-vars': 'error'
  }
}

If we need to ignore files for ESLint, we can create a .eslintignore file to exclude files from linting.

On this page