Text Editor Configuration
This guide will focus on setting up VS Code, which will be used throughout these documents. While text editor configuration is largely a matter of personal preference, customizing your setup to fit your style and workflow can significantly improve productivity. Below are the recommended extensions and settings for Shopify development and general programming.
Extensions
While none of the extensions listed here are strictly required, they can enhance your development experience. They are organized by category for convenience.
Essential for All Developers
- IntelliCode - AI-assisted code completion
- IntelliCode API Usage Examples - API usage examples powered by IntelliCode
- ESLint - JavaScript and TypeScript linting
- Prettier - Code formatter for clean, consistent styling
- Error Lens - Inline error and warning highlighting for improved code quality
Shopify-Specific Extensions
- Shopify Liquid - Syntax highlighting and linting for Shopify's Liquid template language
- GraphQL: Language Feature Support - Syntax support for GraphQL
- GraphQL: Syntax Highlighting - Additional GraphQL syntax highlighting
- Polaris for VS Code - Snippets for Shopify’s Polaris design system
- Prisma - ORM support for Prisma
Optional but Useful Extensions
- Code Spell Checker - Basic spell checking to avoid typos in code
- GitHub Copilot - AI pair programming assistant
- GitHub Copilot Chat - Interact with GitHub Copilot via chat for coding assistance
- Thunder Client - Lightweight REST API client
- TODO Highlight v2 - Highlight TODOs and FIXMEs in your code
- Color Highlight - Visualize color codes in your project
Themes & Icons
- Catppuccin Icons for VSCode - Custom icon pack
- Github Theme - GitHub-inspired theme for VS Code
Miscellaneous Tools
- open in browser - Quickly open HTML files in a browser
- Live Server - Launch a local development server with live reload
- Live Share - Collaborative real-time code editing
Recommended Settings
Most settings are personal preferences, and developers are encouraged to explore and adjust them based on their workflow. However, one setting that can improve efficiency is enabling auto-save.
Enable autoSave: Automatically save files after a brief delay to avoid data loss in case of unexpected crashes or accidental editor closures.
This can be activated via File > Auto Save or by adding "files.autoSave": "afterDelay" in your settings.json.
With the text editor configured, your development environment is now ready to start building Shopify Themes and Apps!