Coding coventions

Coding conventions are very important for working with large projects where multi-developers are working on. Coding standard helps people reducing their time on reading/understanding code, minimizes communicaion and performance pitfalls, avoids basic syntax errors and many many other benefits. Laravue is a combination of PHP and JS/Vue whose coding standards are different. We keep those standards separately for both PHP and JS/Vue. You can change them according your business.

IDE & Editor

Great tools make good work! In Laravue, we highly recommend to use :

  • PHPStorm for main development in backend with PHP and quick changes on frontend
  • VSCode for main development in frontend with VueJS/HTML/CSS and quick changes on backend

Javascript/Vue - ESLint

In Laravue, JS/Vue coding standard follows Airbnb JavaScript Style and official VueJS Style.


All configuration rules are in .eslintrc.js. The basic eslint rules of this project are based on the official eslint and eslint-plugin-vue with some minor changes.

Some important points

By default, all rules are from eslint:recommended and plugin:vue/recommended. You can customize your configuration according to your needs.


module.exports = {
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  //You can change it to  extends: ['plugin:vue/essential', 'eslint:recommended']

Below are some important rules applying for JS/Vue files inside resources/js.


  • JS/CSS/SCSS files MUST be in kebab-case
  • Vue files MUST be in PascalCase, except index.vue
  • Folders MUST be kebab-case, except global components inside resources/js/components/. Folders for global components MUST be in PascalCase
  • Variables MUST be in camelCase
    'camelcase': [0, {
      'properties': 'always'


Laravue uses 2 spaces indentation (

    'indent': [2, 2, {
      'SwitchCase': 1

Trailing comma

Trailing comma is required (

    'comma-dangle': ['error', 'always-multiline'],

Newline at EOL

Trailing newlines in non-empty files are required (

    'eol-last': 2,

Strict equality operator (===)

=== MUST be used instead of == (

    'eqeqeq': ["error", "always", {"null": "ignore"}],

Cancel ESLint

If you don't want to use ESLint, you just find LARAVUE_USE_ESLINT in your .env, change it to false

Configure ESLint in VSCode


Every time you save your code, VSCode will try show warnings/errors for areas that do not follow the eslint rules, and make some simple self-fixes at the same time. The installation steps are as follows:

First install the eslint plugin


After we have installed ESLint, go to Code > Preferences > Settings (JSON mode) and add the following configuration:

  "files.autoSave": "off",
  "eslint.validate": [
      "language": "vue",
      "autoFix": true
  "": "onSave",
  "eslint.autoFixOnSave": true

People and team have their own code specification, it is good to create their own rules and upload to NPM so everyone can reuse and extend if necessary. For instance: ElemeFE config or Vue official config.

vscode plugin and configuration recommendations

Auto fix

yarn run lint -- --fix


Laravue follows strictly PSR - same as Laravel