Setting up development environment
“Senior engineers are fast on delivery not just because of the experience, they just have better workflow”—chinese proverb (probably)
Let’s start your Web development journey start with a solid foundation, a well-configured development environment.
Having a proper workflow helps you have a mental map to move around the code you write, streamlines coding, improves code quality and productivity, and helps you focus more on building cool stuff.
This document will help you set up a basic workflow which you can build up on.
Tools and Editors
Section titled “Tools and Editors”The cornerstone of your development environment is the text editor, where you’ll write, edit, and manage code.
Text Editors
Section titled “Text Editors”The following are the commonly used text editors for web development.
It is a free, open-source text editor renowned for its versatility, speed, and robust ecosystem developed by Microsoft. It supports languages like HTML, CSS, and JavaScript out of the box, making it perfect for web development. Its extensive extension library enables customization for debugging, version control, and more.
Key Features
- Light weight
- Built-in Git integration for seamless version control
- IntelliSense for intelligent code completion
- Extensive marketplace with extensions (e.g., Prettier, ESLint, Live Server)
- Cross-platform support (Windows, macOS, Linux), you can have similar development experience across different operating systems.
- Comes with GitHub Copilot, an AI-Powered coding assistant.
Setup:
Visit code.visualstudio.com and download the installer for your operating system,
and Install the package,
you can further customize editor by installing extensions,
access the Extensions panel from sidepanel or press Ctrl+Shift+X on windows or Cmd+Shift+X on macOS to open,
and installing following for a quick workflow setup
- Live Server, Real-time browser previews.
- Prettier, well-defined code formatting.
- JavaScript (ES6) code snippets help you code faster.
WebStorm, developed by JetBrains, is a powerful, paid IDE tailored for JavaScript, TypeScript, and web development. It’s ideal for professional developers working on complex projects with frameworks like React, Angular, or Vue.js.
If you are using webstorm for non-commercial use, it is completely free. For commercial use you need to get a license, even the commercial version has 1 month free version. Students can apply for a free license at jetbrains.com/academy/student-pack/.
Key Features
- Intelligent code completion for JavaScript, TypeScript, HTML, and CSS
- Built-in debugging, testing, and version control tools (e.g., Git integration)
- Support for modern frameworks (React, Angular, Vue.js)
- Has built-in AI support as an Add-on (Paid). Provides the ability to switch between different AI models.
- Cross-platform support (Windows, macOS, Linux), you can have similar development experience across different operating systems.
Setup:
Visit jetbrains.com/webstorm and download the installer for your OS.Run the installer, follow the prompts, and select preferred configurations.
Open WebStorm, take the onboarding tour, most of the common plugins comes preinstalled, if you want to install more plugins you can do via File > Settings > Plugins
AI Text editors
Section titled “AI Text editors”Cursor is an AI-powered code editor built on top of VS code; You get all the vscode features plus AI-powered coding assistance.
It comes with 2-week free usage with limited AI-powered features, for a full feature set you can check out the pricing.
There are more text editors in the market both AI first or Non AI ones, you can choose the ones that fit your needs. But the basics remain the same.
If you choose VS Code / Cursor AI ->
You can create files you want by clicking on File -> New File
If it is Webstorm ->
File -> New -> File
Additional Tools
Section titled “Additional Tools”Enhance your environment with these complementary tools, though it is not mandatory for the basics; you can check out the following. Across the articles we will go through them in detail as we encounter the use cases.
Browser Developer Tools, which are built into Chrome and Firefox or your favorite browser you are using, for debugging and testing.
Git is a Version control system, you can check out details of git over here. First, install git from git-scm.com and integrate with your editor.
Node.js, Run JavaScript outside the browser and manage packages via npm. Download from nodejs.org.