JS config

Install ESLint, configure jsconfig.json or tsconfig.json.

CSS & JS compiled

When you use laravel-mix to compile assets like css and js, this will create files into public. Add these files to .gitignore cause of differences between minified files on local and production.

/public/css
/public/js
/public/mix-manifest.json

jsconfig.json

If you want to use Vue.js into Laravel with Visual Studio Code, you have to setup jsconfig.json

touch jsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["resources/js/*"],
      "@Components/*": ["resources/js/Components/*"]
    }
  },
  "exclude": ["node_modules", "public"],
  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  }
}

ESLint

Useful with ESLint and Vue

npm i -D eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier babel-eslint

Create these files at the root of repository

touch .eslintrc.js

{
  "root": true,
  "env": {
    "node": true,
    "browser": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {},
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

touch .prettierrc

{
  "semi": false,
  "singleQuote": true
}

[*.{vue,js}]
indent_style = space
indent_size = 2

{
  "scripts": {
    "lint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue"
  }
}