Laravel 5.6 API / React 16 / Visual Studio Code setup

.01-laravel-react-setup.md

Set React Scaffolding for Laravel Project

php artisan preset react && npm install && npm run dev 

Adding create-react-app-linter options to any React Project

Reference https://www.npmjs.com/package/eslint-config-react-app

npm install --save-dev eslint-config-react-app babel-eslint@^7.2.3 eslint@^4.1.1 eslint-plugin-flowtype@^2.34.1 eslint-plugin-import@^2.6.0 eslint-plugin-jsx-a11y@^5.1.1 eslint-plugin-react@^7.1.0 babel-preset-env babel-preset-react-app

Installing dependencies for autoformatting (Prettier) based on eslint

npm install --save-dev eslint-config-prettier@^2.9.0 eslint-plugin-prettier@^2.6.0 prettier@^1.11.1 pretty-quick@^1.4.1

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false
            }
        ],
        "react-app"
    ]
}

.eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

package.json

{
  "scripts": {
    "precommit": "pretty-quick --staged"
}

user-settings.json

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": [
    "js"
  ],
  "files.autoSave": "onFocusChange",
}

web.php

// routes/web.php
// Direct all routes to index.bladde.php
// and lets React Router do rest of the routing

Route::get('/{path?}', function () {
    return view('index');
})->where('path', '.*');