Code Editor Setup

Please use Visual Studio Code as your editor, as it's the easiest to get up and running and provides all the tools you'll probably ever need for development. Plus, there are config files in the repo specifically for VSCode to set it up ideally for working on LATE. If you have a really good reason to use another IDE, you can but I promise it will be much more difficult than using VSCode for LATE.

a. Installation

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

If you are using WSL then follow these instructions to setup VSCode to work with this. You will want to install all the below extensions on WSL and not local.

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. VSC will also recommend you to install these extensions if you haven't already.

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 should automatically format our JS and .vue files since the repository has a vscode settings file included in it.

The settings.json (Ctrl + ,) shoud look similar to the following:

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