Extensions for Vue

Original post url:https://www.cnblogs.com/markjiang7m2/p/10833790.html
If you are doing vue development, there are some extensions for you to improve the development performance.

Vetur
Debugger for Chrome
Vue Devtools

Vetur

This is a VS Code extension. It supports Syntax-highlighting and Formatting for vue. After install the extension, you can see the code is highlight and the file is identified as vue.

vscode_veturlogo

vscode_vetur

How to use?
1.Install vetur
Click Ctrl + P, input ext install vetur, then install the extension.

2.Add the below in User settings
Click Ctrl + Shift + P, input Preferences: Open User Settings.
Add the below in User settings

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

More details see in Vetur.

Debugger for Chrome

This is a VS Code extension. As vue js code will be compiled in browser when we debug the vue application. We could not set a breakpoint in browser. It supports us to debug and set breakpoint in VS Code, like F12 function in Chrome.

vscode_chromelogo

How to use?
1.Install vetur
Click Ctrl + P, input ext install Debugger for Chrome, then install the extension.

2.Update Webpack configuration to build up source map.
Open config/index.js and update devtool property as below.

devtool: 'source-map',

3.Add Chrome debug configuration.
Click Debug icon in Activity Bar. Add configuration as below.

vscode_chromeconfig1

vscode_chromeconfig2

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

Change name as what you like. url should be the same as your vue application root url. webRoot is your vue application src path.

4.Run the vue application as usual.

npm run dev

5.Start Debugging.
Click Debug icon in Activity Bar and click the green button.

vscode_chromedebug1

Then you can make breakpoint in VS Code.

Vue Devtools

This is a Chrome extension.

chrome_vuedevtoolslogo