Code Editor Setup

a. Installation

Visual Studio Code (VSCode) can be installed from the official site.

b. Extensions

In order for VSCode to work well with the types of files LATE uses, we need to install a few extensions. There are also some recommended ones that just make the coding experience easier as well.

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.

Required Plugins:

• ESLint dbaeumer.vscode-eslint
• Vetur octref.vetur

Recommended Plugns

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

---

c. Workspace Settings

VSCode can automatically format our JS and HTML if we set the following properties in the settings. We will use the Workspace Settings instead of User Settings so that these rules only apply to LATE and don't interfere with other projects you code in VSCode.

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

d. Integrated Terminal

VSCode comes with an integrated terminal (Ctrl + `) that makes running commands without leaving the editor 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!

Check out how to configure the terminals if on WSL