mikemunsie/vue-setup.md

## vue-setup.md

      
    Raw
  

              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