Front-End Development Tools Installation and Configuration (Mac)

#webdev #beginners #programming #frontend

Preface

This tutorial will guide you step-by-step into the world of front-end development tools on both Windows and Mac platforms. Together, we will explore how to properly install and configure commonly used development tools, making it easy for you to take your first step in front-end development. Whether you are a beginner or an experienced developer, this tutorial will help you resolve various issues during the installation process of development tools, allowing you to focus more on writing code. Let's get started!

VSCode (Free and User-Friendly Code Editor)

Click to Download: https://code.visualstudio.com/Download

The official website provides three installation methods. To determine your chip type, there are two ways:

First method: Click the Apple icon in the top left corner -> About This Mac -> Check the chip type.
Second method: Use a command. Open the terminal and input uname -m. It returns x86_64 (Intel-based) or arm64 (Apple silicon-based).
Intel chip: Intel chip.
Apple silicon: Apple silicon (commonly known as M series chips).
Universal: Universal version.

After the download is complete, click to view.
Actually, it's not over yet because it's currently in the Downloads folder and not in our Launchpad, so we can't find it there. Generally, software installed on Mac is in dmg format. After clicking it, drag the compressed file to the Applications folder. This completes the installation. Since we downloaded the zip format, it directly contains the application. To place it in the Applications folder, click Finder -> Drag the downloaded file to Applications. This completes the installation.
When we run the program, a dialog box will ask if you want to open it. Click Open to enter the VSCode interface, and you can start using it.

Useful plugin recommendations will be shared at the end.

ServBay (Development Environment Management Tool for Mac OS)

Before installing node.js, I want to introduce a tool called ServBay. What is it and what can it do?

ServBay is an all-in-one development environment management tool designed to ease the burden of maintaining development environments. It allows developers to start coding within minutes without spending time installing and debugging the development environment.

Official website: ServBay

ServBay supports various versions of Node.js, ensuring you can choose the appropriate version for development and deployment based on your project requirements. Here are some common versions of Node.js supported by ServBay

We can easily install and manage Node.js through ServBay's GUI panel. Here are the steps to install Node.js via the ServBay GUI panel:

Open the ServBay GUI panel.
Navigate to the Services section.
Select the Node.js version you need.
Click the green Install button and wait for the installation to complete.

Bundled Modules

ServBay provides several package managers for Node.js, making it convenient to manage project dependencies:

npm (Node Package Manager): The default Node.js package manager and the most widely used.

pnpm: An efficient package manager that saves disk space and speeds up installation.

yarn: A package manager developed by Facebook that offers stable and efficient dependency management.

Note: ServBay also allows easy switching, installation, and viewing of node versions. The reason I recommend using ServBay is that during actual development, if multiple projects are running simultaneously and they rely on different versions of node, it would be very inconvenient to uninstall the current version and install the required version each time. ServBay can help solve this problem, no need nvm.

Git (Version Control Tool)

Mac actually comes with git. Input git -v in the terminal. If a version number appears, git is installed; otherwise, it needs to be installed.

Download the installer from the official website. Official website: git-scm.com

To verify the installation, open the terminal and input git -v. If a version number appears, the installation was successful.

VSCode Useful Plugins

Theme Recommendation: Ayu (available in dark and light modes, I personally prefer dark mode).
ESLint (Helps you find and fix issues in your code).
Prettier (Formats code to maintain a consistent style, usually used with ESLint).
GitLens (Displays the history of each line of code, among other features).
Guides (Helps locate the start and end of brackets when code is deeply nested).
Image Preview (Previews images, very useful).
Material Icon Theme (Attractive icons).
Path Intellisense (Auto-completes file paths, very useful).
Todo Tree (Adds a TODO icon after downloading, allowing quick navigation to comments like //TODO xxx).
Volar (A must-have for Vue developers, provides code highlighting and other features).