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 .
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).
Step 3: Modify webpack configuration
Change the webpack source-map type from ‘cheap-module-eval-source-map’ to ‘source-map’ in config/index.js.
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.
That’s it.
Thanks for reading, if you have any questions you can always get in touch with me.
