Vue.md

Vue.js

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

Instasll Debugger for Chrome on VS Code

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Install Vue DevTools for Chrome Extension

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Install Vue Cli and Cli Init

npm install -g vue-cli
npm install -g @vue/cli-init

https://medium.com/codingthesmartway-com-blog/vue-js-routing-with-vue-router-4c428fabb078
https://codingthesmartway.com/vue-js-routing-with-vue-router/
https://www.npmjs.com/package/vue-cli

Create Vue Project with Vue Router

vue init webpack myProject

C:\Users\Yangxin\Desktop\Vue>vue init webpack web

? Project name web
? Project description A Vue.js project
? Author Ethan <ethan-deng@hotmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

Install Vuex, vue-material

npm instal vuex --save
npm install vue-material --save

Change VS Code Debug configuration

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

Vetur

Add VSCode settings according to https://alligator.io/vuejs/eslint-vue-vetur/

{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "none", //"js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ]
}

Change .eslintrc.js to

extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],

VS Code Video

https://www.youtube.com/watch?v=i8IvvHJssWE

In settings, search for "eslint". Change "Prettier: Eslint Integration" to "Use 'prettier-eslint' instead of 'prettier'. (prettier will add semicolon).

Match HTML tag

Install "highlight-matching-tag"

"highlight-matching-tag.enabled": true,
"highlight-matching-tag.style": {
    "borderWidth": "2px",
    "borderStyle": "solid",
    "borderColor": "red"
}