Configure the front-end environment from scratch and install necessary software and plug-ins

Preface

Front-end development is a rapidly developing field. As a front-end developer, you need to master various technologies and tools. When you first join the job, before starting front-end development, you first need to configure the front-end development environment, including installing the necessary software and plug-ins. This article will introduce how to configure the front-end environment from scratch and install the necessary software and its plug-ins.

1. Install Node.js

Node.jsIt is an Chrome V8engine-based JavaScript running environment that can run JavaScriptcode on the server side. Commonly used build tools and package managers in front-end development, such as npmand webpack, all need to rely on Node.js. Download the corresponding version of the installation package from the Node.js official website ( https://nodejs.org/en/ ) and install it. It is recommended to choose LTSthe (Long Term Support) version as it is more stable and reliable.

During the installation process, you can select the installation path and other options as needed. After the installation is complete, you can enter the node -vand npm -vcommands on the command line to check the version numbers of Node.js and npm to confirm that the installation is successful.

2. Install the editor

The editor is one of the most commonly used tools by front-end developers, which can improve development efficiency and code quality. Common editors include Visual Studio Code, , Sublime Text, Atometc. In this article, we take as Visual Studio Codean example because it is one of the most popular front-end development tools currently, with powerful functions and a rich plug-in library.

Download the installation package of the corresponding version from the VS Code official website ( https://code.visualstudio.com/ )
After the download is complete, double-click the installation package and follow the instructions to complete the installation. You can select the installation path and other options as needed.
After the installation is complete, open VS Code and you will see a simple editor interface.

3. Install version control tools:

Version control tools can help you manage and track code changes. Commonly used version control tools are Git. Here are the steps to install on Git:

Search for " Git " in the browser and enter the official website https://git-scm.com/ .
Click the download button and select the corresponding installation package according to your operating system.
After the download is complete, double-click the installation package and follow the instructions to complete the installation.
Open the command line tool and run git --versionto view the Git version number to ensure that the installation is successful and the corresponding version number is displayed.
Before using Git, you need to perform some basic configuration, such as setting your user name and email address. This can be configured using the following commands:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

4. Install the browser

Choose a modern browser for debugging and testing your web applications. Common choices include Google Chrome, Mozilla Firefox, and Microsoft Edge. In this article, we take as Google Chromean example .

Chrome 浏览器It is one of the most commonly used browsers in front-end development. You can install some commonly used developer tool plug-ins, such as Vue.js Devtools, React Developer Toolsetc. Here are the steps to install on Google Chrome::

Search "Google Chrome" in the browser and enter the official website ( https://www.google.com/chrome/ )
Click the download button and select the corresponding installation package according to your operating system.
After the download is complete, double-click the installation package and follow the instructions to complete the installation. During the installation process, you can select the installation path and other options as needed.
After the installation is complete, open the Chrome browser and you will see a simple browser interface.

During development, we can use Chrome DevToolsto debug code and analyze performance.

5. Installation package management tools

Package management tools are often used in front-end development to install and manage open source libraries and frameworks. Common choices include npmand Yarn. After installing Node.js, npm has been installed automatically. You can open the command line tool npm -vto ensure that the installation is successful and the corresponding version number is displayed.

You can use to npminstall packages and modules that the project depends on, such as React, Vue.js, jQueryetc. Enter the project directory on the command line and enter npm install 包名the command to install the corresponding package.

In actual development, we may need to use other package management tools, such as Yarn. You can enter the command on the command line npm install -g yarnto install Yarn. After the installation is complete, you can use yarn installthe command to install the packages and modules that the project depends on.

6. Install the necessary VS Code plug-in

VS CodeIt is a powerful editor that supports the development of various languages and frameworks. In VS Code, you can install various plug-ins to extend its functionality. Here are some commonly used VS Code plug-ins:

1. Essential plug-ins

ESLint: Code checking tool that can help developers check for grammatical errors and standardize code style, and provide repair suggestions . It supports multiple JavaScriptspecifications, such as Airbnb, Google, , Standardetc. Using the ESLint plug-in in VS Code can implement real-time code inspection and error prompts, improving code quality .
Prettier: Code formatting tool , used to automatically format code and unify code style.
Bracket Pair Colorizer: Bracket matching plug-in , used to add color to brackets to facilitate viewing the code structure.
Auto Rename Tag: HTML tag renaming plug-in , used to automatically rename HTMLtags to avoid manual modification.
Live Server: Local server plug-in , used to start the local server and preview web pages in real time.
GitLens: Git code base plug-in , used to display Gitdetailed information of the code base, Githistory and comments in the code, to facilitate version control.
Path Intellisense: File path automatic completion plug-in , which can help developers quickly input file paths and improve development efficiency.
Material Icon Theme: File icon theme plug-in , used to add file icons to help developers view file types more clearly. It can add different icons for different types of files, such as folders, files, pictures, audios, videos, etc.
Debugger for Chrome: Used for Visual Studio Codedebugging JavaScriptcode in .

The above are some commonly used VS Code plug-ins. You can install other plug-ins according to specific project needs. In VS Code, you can press Ctrl+Shift+Xthe shortcut key to open the plug-in panel, search for the plug-in that needs to be installed, and then click to install .

2. Vue.js plug-in

Vetur: It is a Vue.js development plug-in that can help developers better write Vue components. It provides functions such as 语法高亮, 自动补全, 错误检查, 代码格式化etc., allowing developers to write Vue code more quickly.
Vue 3 Snippets: is a Vue.js 3code snippet plug-in that can help developers write Vue 3 code faster. It provides common code snippets such as Vue 3 组件, 指令, 生命周期and so that developers can write Vue 3 code more quickly.
Vue Peek: It is a Vue.js development plug-in that can help developers view the definition of Vue components more quickly . It can quickly jump to the component definition in the template , allowing developers to understand the structure and properties of the component more quickly.

3. React plug-in

ES7 React/Redux/GraphQL/React-Native snippets: It is a React development plug-in that can help developers write React code faster. It provides common code snippetsReact 组件 such as , 生命周期, 状态管理and so that developers can write React code more quickly.
Reactjs code snippets: It is a React development plug-in that can help developers write React code faster. It provides common code snippets such as React 组件, 生命周期, ** 状态管理**, etc., allowing developers to write React code more quickly.
React-Native/React/Redux snippets for es6/es7: It is a React Native development plug-in that can help developers write code faster React Native. It provides common code snippets such as React Native 组件, 生命周期, ** 状态管理**, etc., allowing developers to write React Native code more quickly.

Summarize

Configuring the front-end environment from scratch requires installing some necessary software and plug-ins, including Node.js, 编辑器, Git, Chrome 浏览器, 包管理工具and VS Code 插件etc. This article describes how to install these tools and plug-ins, and introduces some commonly used VS Code plug-ins. In actual development, other tools and plug-ins can also be installed according to specific project needs to improve development efficiency and code quality.