Tech stack

Code editor

You can use any text editor to work on graphics, but we recommend Visual Studio Code for three major features built in to VS Code:

• Snippets let us package code shortcuts with projects. Read more.
• Linters can format your code automatically on save and are an easy way to learn good coding habits.
• Live share lets you work on code with others directly in your editor. Read more.

VS Code is available for free download here.

Recommended Extensions

VS Code allows you to install extensions that add additional features to your editor. We recommend the following:

• ESLint with the following options:
  • Code Actions on Save: Mode = all
  • Format: Enable = true
  • Package Manager: yarn
• sort-imports with the following options:
  • On-save = true
• Live Share
• EJS Language Support
• Svelte for VS Code

Formatting JavaScript on save

With the ESLint extension installed, your editor can automatically fix minor issues and formatting in your JavaScript code whenever you save a file. Here's how to get it working:

From the menu, open Code > Settings, search "eslint" in the search bar and click the "ESLint" settings under Extensions.

Set the Eslint › Code Actions On Save: Mode setting to "all".

Now search "save" in the Settings search bar and under Editor: Code Actions On Save click to "Edit in settings.json".

Hand edit the editor settings for codeActionsOnSave and formatOnSave to be these values:

{
  // ...
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  // ...
}

Now ESLint will fix formatting and style issues in your code on save, including indentation, const vs. let declarations, semicolon use and more.