Visual Studio Code

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

Visual Studio Code ↗ 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 ↗ - Linter tool for identifying and reporting on patterns in JavaScript
• Prettier ↗ - Opinionated code formatter
• GraphQL ↗ - Adds syntax highlighting, validation, hover information and autocompletion for graphql files
• Yaml ↗

Recommended extensions:

• DotENV ↗ - Adds support for dotenv file syntax
• gettext ↗ - Adds syntax highlight to po translation files
• Github Actions ↗
• JavaScript Booster ↗ - Advanced JavaScript/TypeScript refactorings and commands
• Color Highlight ↗

Next steps

• Start building a GraphCommerce custom storefront by customizing text and component styles, fetching data from server components, and making changes to GraphQL queries.