---
menu: Setup VS Code
---

# Visual Studio Code

GraphCommerce is a front-end web development framework written in Typescript,
which is JavaScript with syntax for types.

[Visual Studio Code ↗](https://code.visualstudio.com/) is a code editor
redefined and optimized for building and debugging modern web applications such
as GraphCommerce. Visual Studio Code is free and available on all platforms.
This guide covers which useful VS Code extensions to install for an optimal
development experience.

Required extensions

- [ESLint ↗](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -
  Linter tool for identifying and reporting on patterns in JavaScript
- [Prettier ↗](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -
  Opinionated code formatter
- [GraphQL ↗](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) -
  Adds syntax highlighting, validation, hover information and autocompletion for
  graphql files
- [Yaml ↗](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)

Recommended extensions:

- [DotENV ↗](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) -
  Adds support for dotenv file syntax
- [gettext ↗](https://marketplace.visualstudio.com/items?itemName=mrorz.language-gettext) -
  Adds syntax highlight to po translation files
- [Github Actions ↗](https://marketplace.visualstudio.com/items?itemName=me-dutour-mathieu.vscode-github-actions)
- [JavaScript Booster ↗](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) -
  Advanced JavaScript/TypeScript refactorings and commands
- [Color Highlight ↗](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

## Next steps

- [Start building a GraphCommerce custom storefront](../getting-started/start-building.md)
  by customizing text and component styles, fetching data from server
  components, and making changes to GraphQL queries.