When you’re a #CodeNewbie starting out on a coding journey, your Visual Studio Code setup probably leaves a lot to be desired. Here’s how to go from zero to professional web developer by installing and configuring some crucial extensions, themes, and add-ons.
What separates a professional web developer’s VS Code from a brand-new installation is the use of extensions, especially code formatters and linters that automatically detect and fix problems in your code.
Using code formatters (typically Prettier) and linters (usually ESLint) tend to be mandatory when contributing to open-source projects online. But they’re generally awesome to have even if you never plan to work on open-source. Additionally, a nice theme makes VS Code easier to use, and it makes it feel like your own personal version. Along with a theme, you can add file icons that’ll let you see what type of files you’re working with at just a glance.
1. Install Vs Code (Visual Studio Code)
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET), and with Extensions support probably it can run any type of coding in it.
Downloads :
Download VS Code – Quickly find the appropriate install for your platform (Windows, macOS and Linux).
Done You are ready to go…
2. Install Extensions.
Recommended Extensions for web developers
find the Extensions tab in Vs code then search the Extensions or just go marketplace.visualstudio Search any item and install directly.
- Live Server
Live Server is a popular extension that lets you launch a development server from inside VS Code; it’s useful for prototyping HTML and CSS. - Code Runner – Run code snippet or code file for multiple languages.
- Auto Rename Tag – Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
- ESLint – Integrates ESLint into VS Code.
- Prettier – Code formatter – Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
- vscode-icons
vscode-icons is a package of file icons that show up inside of VS Code and make it much easier to differentiate the file types you’re working with. - HTML CSS Support – HTML
idandclassattribute completion for Visual Studio Code. - vscode-icons
vscode-icons is a package of file icons that show up inside of VS Code and make it much easier to differentiate the file types you’re working with. - Better Comments
This Better Comments extension gives a colorful comment when used in a code block, attracting developers’ attention. This helps more when working in a team or collaboration. - Indent-rainbow – This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.
- Path Intellisense – Visual Studio Code plugin that autocompletes filenames.
# Themes
# Enhancement
- GitLens — Git supercharged – GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.
- GitHub Copilot – GitHub Copilot uses OpenAI Codex to suggest code and entire functions in real-time right from your editor. Trained on billions of lines of public code, GitHub Copilot turns natural language prompts including comments and method names into coding suggestions across dozens of languages.
- Tabnine AI Autocomplete – Tabnine is an AI code assistant that makes you a better developer. Tabnine will increase your development velocity with real-time code completions in all the most popular coding languages and IDEs.
3. How To Use
Create a new folder or right click on exiting folder -> open with code -> the folder will be open in your vs cod
– By Sabuj Golui
