LuisLlamas Logo
vuejs-configuracion-entorno-desarrollo

Development Environment Setup for Vue

  • 6 min
  • Beginner

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

We have seen that a project involves many tools and configuration files 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 would be worth a lot of discussion. It will also depend on the needs of your project, and even on 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 should 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, because it’s based on it) replaces the previous one called Vetur

If you find information out there about Vetur, it’s obsolete

Configuring VSCode for Vue.js

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

  1. Open VSCode settings (Ctrl+,)
  2. Click the “Open Settings (JSON)” icon in the top right corner.
  3. Add the following settings:

{ “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 settings:

  • Enable automatic formatting on save
  • Configure Prettier as the default formatter
  • Enable automatic ESLint fixing on save
  • Activate Volar’s “Take Over Mode” for better TypeScript support
  • Configure autocompletion 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 correctly detect the language in our files.

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

Create a jsconfig.json file in 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 in 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 use to develop our project.

If we need to customize Vite’s 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
  }
})
Copied!

This configuration:

  • Configures the @ alias for the src folder
  • Sets the development server port to 3000
  • Automatically opens the browser when the server starts
  • Configures build options like 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 don’t have it installed already, we can do it with,

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

Create a .prettierrc file in 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
  • Keeps spaces 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 didn’t 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 in 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'
  }
}
Copied!

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

On this page