Blog


March 23, 2018 · vue javascript vscode

Visual Studio Code + Vue.js = ❤

Intro

I’ve been working with Vue on a daily basis for the last 9 months (yes, I’m lucky enough to get to work with Vue at my job). During this time I’ve been on an adventure to not only find the best patterns and ways to do things, but also to find and use the best tools available in order to get more efficient with my work.

Vue support in Sublime Text, Atom and VSCode

Getting thunderstruck by the Internet gods is something I don’t really wish for, so I will not say that any of these editors is better than the others (but VSCode is the best for me).

Vue support is provided by community plugins for all three editors, however there are differences between them.

Vue plugins:

  • Atom has language-vue and various Vue snippet packages
  • Sublime has vue-syntax-highlight and various Vue snippet packages
  • VSCode has Vetur (syntax highlighting, snippets, Emmet support, linting, auto completion and DEBUGGING)

Debugging Vue apps with VSCode and webpack

I don’t know about you, but I really love having access to a normal debugging when developing anything, which is why I find Sublime and Atom not fit for me (well, Atom is also not fit because it just feels so slow).

In the following steps we’ll take a freshly generated Vue app (using vue-cli) and create a working Chrome debugging setup for it. Our goal is to be able to debug JavaScript code from a single file components.

Important: Make sure you have the Debugger for Chrome extension installed and up to date.

Step 1: Generate a Vue app with vue-cli

  • Create a new directory for this test app and navigate to it
  • Use vue-cli to generate a new app
    vue init webpack .

Creating a new Vue project with vue-cli

Step 2: Create a VSCode launch configuration for debugging

Create a .vscode folder in the root directory of your project and a launch.json file inside it. Put this configuration inside it (adjust accordingly to your project, if you already have a configuration just make sure that the webRoot property points to ${workspaceFolder}/src).

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
      }
    }
  ]
}

Step 3: Modify webpack configuration

Change the webpack source-map type from ‘cheap-module-eval-source-map’ to ‘source-map’ in config/index.js

Webpack source-map configuration

Step 4: That’s it, start debugging

  • Launch your app with yarn run dev or npm run dev (either in your terminal or in the VSCode provided terminal).
  • Put some breakpoints in your code.
  • Navigate to the debug tab in VSCode (its icon is a bug).
  • Launch the Chrome debugging configuration.
  • Enjoy debugging single file components.

VSCode Debugger

VSCode Debugger
That’s it.
Thanks for reading, if you have any questions you can always get in touch with me.



Comments powered by Disqus