Code Editor Setup

a. Extensions

Navigate to the Extensions (Ctrl+Shift+X) panel on the sidebar. Next to the names of the packages below the package-ids are given. Search for the extensions by name or and ensure its the right package ID before installing.

VSCode screenshot

Required Plugins:

ESLint dbaeumer.vscode-eslint
Vetur octref.vetur

Recommended Plugns

Bracket Pair Colorizer coenraads.bracket-pair-colorizer
GitLens eamodio.gitlens

b. Workspace Settings

In settings.json (Ctrl + ,) make sure the following properties are set as such in Workspace Settings:

	...
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    }
    ],
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
	...

c. Integrated Terminal

VSCode comes with an integrated terminal (Ctrl + `) that makes running the commands to run LATE super easy! You can also manage multiple terminals and split them. Use this to run $ npm run frontend on one side and $ npm run backend on the other!

VSCode