Here’s a comprehensive list of VS Code extensions that will enhance your Django development experience, along with explanations of why each one is useful:
Thank you for reading this post, don't forget to subscribe!
Contents
hide
Essential Extensions
- Python Extension for Visual Studio Code (ms-python.python)
- Provides IntelliSense, linting, debugging, code navigation, formatting, refactoring, and more for Python
- Essential for Django development as it understands Python syntax and Django project structures
- Django (batisteo.vscode-django)
- Adds Django template language support
- Provides syntax highlighting for Django templates
- Includes useful snippets for common Django patterns
- Django Snippets (bibhasdn.django-snippets)
- Collection of useful Django snippets for models, views, forms, etc.
- Speeds up development with ready-to-use code templates
- Django Template (bibhasdn.django-html)
- Enhanced support for Django template files
- Better syntax highlighting and IntelliSense for template tags
HTML/CSS/JavaScript Support
- Auto Close Tag (formulahendry.auto-close-tag)
- Automatically adds closing tags in HTML files
- Works with Django templates as well
- Auto Complete Tag (formulahendry.auto-complete-tag)
- Provides completion for matching tags
- Saves time when writing HTML in templates
- Auto Rename Tag (formulahendry.auto-rename-tag)
- When you rename one HTML tag, automatically renames the paired tag
- Very useful for template editing
- Highlight Matching Tag (vincaslt.highlight-matching-tag)
- Visually highlights matching tags in HTML files
- Helps navigate complex template structures
Productivity Boosters
- GitHub Copilot (GitHub.copilot)
- AI pair programmer that suggests code as you type
- Can help with both Python and template code
- IntelliCode (VisualStudioExptTeam.vscodeintellicode)
- AI-assisted development with smarter IntelliSense
- Learns from your codebase to provide better suggestions
- IntelliCode API Usage Examples (VisualStudioExptTeam.intellicode-api-usage-examples)
- Shows how APIs are commonly used in open source projects
- Helpful when learning new Django features
Code Quality
- Prettier – Code Formatter (esbenp.prettier-vscode)
- Opinionated code formatter for consistent styling
- Can be configured to work with Django template files
- Python Indent (KevinRose.vsc-python-indent)
- Correctly handles Python indentation rules
- Especially helpful for Django’s often-nested code structure
Visual Helpers
- vscode-icons (vscode-icons-team.vscode-icons)
- Adds icons to your file explorer for better visual organization
- Helps quickly identify Django files (models.py, views.py, etc.)
- Indent One Space (usernamehw.indent-one-space)
- Allows fine-grained control over indentation
- Useful when working with both Python (4 spaces) and templates (often 2 spaces)
Recommended Settings
Add these to your VS Code settings.json for optimal Django development:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "python.linting.pylintEnabled": true, "python.linting.enabled": true, "python.formatting.provider": "autopep8", "python.languageServer": "Pylance", "emmet.includeLanguages": { "django-html": "html" }, "[django-html]": { "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } }, "files.associations": { "**/templates/**/*.html": "django-html", "**/templates/*.html": "django-html", "**/static/**/*.html": "html" } } |
or
Settings.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "workbench.iconTheme": "vscode-icons", "terminal.integrated.defaultProfile.windows": "Command Prompt", "[django-html]": { "editor.quickSuggestions": { "other": true, "comments": true, "strings": true } }, "[html]": { "editor.quickSuggestions": { "other": true, "comments": true, "strings": true } }, "files.associations": { "*.html": "django-html" }, "emmet.includeLanguages": { "django-html": "html" }, "terminal.integrated.enableMultiLinePasteWarning": "never", "explorer.confirmDelete": false, "vsicons.dontShowNewVersionMessage": true } |
Installation
You can install all these extensions at once by running this command in VS Code’s command palette (Ctrl+Shift+P):
|
1 |
code --install-extension ms-python.python --install-extension batisteo.vscode-django --install-extension bibhasdn.django-snippets --install-extension bibhasdn.django-html --install-extension formulahendry.auto-close-tag --install-extension formulahendry.auto-complete-tag --install-extension formulahendry.auto-rename-tag --install-extension vincaslt.highlight-matching-tag --install-extension GitHub.copilot --install-extension VisualStudioExptTeam.vscodeintellicode --install-extension VisualStudioExptTeam.intellicode-api-usage-examples --install-extension esbenp.prettier-vscode --install-extension KevinRose.vsc-python-indent --install-extension vscode-icons-team.vscode-icons --install-extension usernamehw.indent-one-space |
This setup will give you a powerful Django development environment with all the tools you need for efficient coding, debugging, and template editing.
Here are all the extensions with their direct VS Code Marketplace links for easy installation:
Core Django & Python Extensions
- Python – Official Python support
- Django – Django template support
- Django Snippets – Common Django patterns
- Django Template – Enhanced template support
HTML/Template Helpers
AI & Productivity
Code Quality
Visual Helpers
Bonus Django Helpers
- Django Template Formatter – Formats Django templates
- SQLTools – Database management
To install any extension:
- Click the link
- Click “Install” on the marketplace page
- It will automatically open in VS Code
For bulk installation, you can paste this in your terminal:
|
1 |
code --install-extension ms-python.python --install-extension batisteo.vscode-django --install-extension bibhasdn.django-snippets --install-extension bibhasdn.django-html --install-extension formulahendry.auto-close-tag --install-extension formulahendry.auto-complete-tag --install-extension formulahendry.auto-rename-tag --install-extension vincaslt.highlight-matching-tag --install-extension GitHub.copilot --install-extension VisualStudioExptTeam.vscodeintellicode --install-extension VisualStudioExptTeam.intellicode-api-usage-examples --install-extension esbenp.prettier-vscode --install-extension KevinRose.vsc-python-indent --install-extension vscode-icons-team.vscode-icons --install-extension usernamehw.indent-one-space |
code –install-extension ms-python.python –install-extension batisteo.vscode-django –install-extension bibhasdn.django-snippets –install-extension bibhasdn.django-html –install-extension formulahendry.auto-close-tag –install-extension formulahendry.auto-complete-tag –install-extension formulahendry.auto-rename-tag –install-extension vincaslt.highlight-matching-tag –install-extension GitHub.copilot –install-extension VisualStudioExptTeam.vscodeintellicode –install-extension VisualStudioExptTeam.intellicode-api-usage-examples –install-extension esbenp.prettier-vscode –install-extension KevinRose.vsc-python-indent –install-extension vscode-icons-team.vscode-icons –install-extension usernamehw.indent-one-space
