# 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.

# Settings

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.

// https://github.com/tuandm/laravue/blob/master/.eslintrc.js

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.

# Naming

• 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'
    }],

# Indentation

Laravue uses 2 spaces indentation (https://eslint.org/docs/rules/indent)

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

# Trailing comma

Trailing comma is required (https://eslint.org/docs/rules/comma-dangle)

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

# Newline at EOL

Trailing newlines in non-empty files are required (https://eslint.org/docs/rules/eol-last)

    'eol-last': 2,

# Strict equality operator (===)

=== MUST be used instead of == (https://eslint.org/docs/rules/eqeqeq)

    '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

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": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "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

# PHP - PSR

Laravue follows strictly PSR - same as Laravel