Vue Setup

vue-setup.md

• VSCode is awesome for use with Vue. You should install the following plugins:

  • Auto Close Tag
  • Auto Rename Tag
  • Vue VS Code Extension Pack (by Sarah Drasner)

• Debugging CSS in Chrome can cause unexpected issues. See the fix here: https://stackoverflow.com/questions/49372717/broke-page-styles-of-vue-js-app-webpack-template-when-live-changing-it-in-chro/51779019#51779019

• For VSCode to understand the @ resolver (ex: import X from '@/Y'), you need to configure a jsconfig.json file with the @ path to the src folder.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  }
}

• Making a SASS variables file accessible in each Vue template is super handy. In the utils.js file, add in this puppy:

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/_variables.scss')
        }
      }
    )

• Formatting problems on VSCode? Using Typescript and decorators are showing up on the same line after save?

https://alligator.io/vuejs/eslint-vue-vetur/

Add the following to your settings in VSCode:

"eslint.autoFixOnSave": true