Setup of development environment

1. Overview of this article:

◇ How to configure the development environment for the new PC

Those tools should be installed on a new computer

◇ Chrome installation and setup tips

◇ Vscode configuration

Git configuration

◇ Node and NPM configuration

Installation of scaffold tools

◇ Postman tool installation

Installation of scaffold tools

Other recommendations

2. The preface

After formal entry or routine system reinstallation, if the company is equipped with a new computer. All need to rebuild the development environment, the process of setting up the environment is very painful, because do not know what things need to be installed, must configure, will also cause some plug-ins or packages missing installation, which has become a lot of novice programmers trouble. Here is a list of the basic configuration of the development environment. This list includes the basic configuration of the new computer when I interview the author. You can continue to add plug-ins, tools and so on in this list, so that the new computer can be configured according to the list.

3. Configure the list

3.1 Chrome installation and Settings tips

Chrome download address, installation method next next

1.1 Setting the Default Search

After setting this parameter, enter the content to be searched in the address box

  1. Click Settings

  1. Set the default search to Baidu

Google add-on Amway wave

  1. Very easy to use a sidebar

  1. A must for Vue developers
  2. Lantern, a free VPN tool

Download by Lantern (github)

1.2 Filtering Static Resources

3.2 Vscode download, install, and common plug-ins

Vscode download address

3.2.1 Chinese language Plug-in

  1. Search Chinese

  2. Click on simplified Chinese to download

3.2.2 theme

A pleasing theme protects your eyes and gives you the comfort of writing code

  1. I’ve downloaded my favorite Atom theme, and you can install your own

  2. Search Atom, the first one is

  3. Click on the install

3.2.3 File Icon Theme

Allows you to quickly identify the type of file

  1. Search icon

  2. Find your favorite icon theme, download and install

  3. Set the theme

  4. In the popup frame, start your own theme installation

3.2.4 Source code management plug-in GitLens

In the process of collaborative development, the development logs can be viewed to improve development efficiency

  1. Search GitLens

  2. Click on the install

3.2.5 Live Server

Ability to start a local server for better real-time preview of development projects

  1. Search the Live Server

  2. Download and install

3.2.6 prettier-code formatter

Helps developers format code and provides color keywords to make code more readable

  1. Search for prettier-code formatter

  2. Download and install

3.2.7 Simple React Snippets

If you need to develop React, you can install this plugin

  1. Download Simple React Snippets

  2. Install the download

3.2.8 JS JSX Snippets

If you need to develop React, you can install this plugin

  1. Search JS JSX Snippets

  2. Install the download

3.2.9 Vetur

Vue development tools

  1. Search Vetur

  2. Install the download

3.2.10 Set the colors of comments and variables

Customize comments and variables as needed

  1. Click Settings in the lower left corner

  2. Search the setting.json file

  3. Copy the following code Settings

    "editor.tokenColorCustomizations": {
    "comments": {
        // Set the font style bold underline italic etc
        "fontStyle": "".// Set the font color
        "foreground": "#4CAEE2"
    }, / / comment
    "keywords": "#0a0"./ / key
    "variables": "#f00"./ / variable names
    "strings": "#e2d75dbd"./ / string
    "functions": "#5b99fcc9"./ / the function name
    "numbers": "#AE81FF" / / digital
}
Copy the code
3.3 Git Download, Installation, and Configuration

Git download address

3.3.1 Configuring the Global User Name and mailbox

  1. Configuring the Global Mailbox

    Git config --global user.emailCopy the code

  2. Configure the global user name

    git config --global user.name "wang"
Copy the code
3.3.2 rainfall distribution on 10-12 SSH configuration

  1. Enter ssh-keygen in Git Bash Here and press Enter three times as prompted

    ssh-keygen
Copy the code

  2. Copy the contents of the public key

    • Where the address
    // C:\Users\ your computer user name \.ssh\id_rsa.pub
Copy the code

  3. Copy the content to github, Code cloud, GitLab and other hosting platforms, find the Settings, copy the public key content, paste it

3.4 Node and NPM download Settings

Node download address

Node version no later than 10, 20210519

3.4.1 track CNPM

  1. Installation Method 1:

    npm i cnpm -g
Copy the code

  2. Installation Method 2:

    #If you do not configure Taobao mirror can parameter incoming acceleration
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code
3.4.2 yarn

  1. Installation Method 1:

    npm i yarn -g
Copy the code

  2. Installation Method 2:

    cnpm i yarn -g
Copy the code
Rule 3.4.3 NRM

  1. The installation

    cnpm install -g nrm
Copy the code

  2. The available image sources for NRM are displayed

    C:\Users\WebSec>nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
Copy the code

  3. Changing the Mirror Source

    nrm user xxx
Copy the code
3.4.4 nodemon

  1. The installation

    cnpm i nodemon -g
Copy the code

  2. Executing the Node script

    nodemon xxx.js
Copy the code

www.cnblogs.com/jing-tian/p…

Node version switching tool

3.5 Download of scaffolding tools
3.5.1 track of vue – cli installation

See the website

Blog. Jijian. Link / 2021-03-26 /…

The React documentation does not explain how to create a project using NPX, unlike the react documentation which has a direct command to create a project using NPX.

React usage and NPX features can be used to estimate its usage.

npx @vue/cli create hello-vue

www.ruanyifeng.com/blog/2019/0…

NPX use tutorial

3.5.2 the create – app – react to install

See the website

3.6 Postman Installation and Download

Download address

  1. Let’s download it

  1. After the installation is complete, enter the Postman interface

  1. Enter interface

3.7 Installing other Developer Tools

Install as needed according to your own project needs

  1. Wechat developer tools
  2. Alipay developer tools
  3. HBuilder
  4. . Etc.

4. Install other tools

  1. everything

    • Quickly locate files and folders based on their names

  2. notepad++

    • A free code editor, common terms code audit and review

  3. teamviewer

    • Or sunflower

    • Connect to a remote desktop anytime, anywhere

  4. ToDoList

    • Manage, plan and collaborate on tasks and projects

  5. Good pressure

    • Compression tools

5. Conclusion:

At this stage, you’ve installed your usual software, plug-ins, or tools for daily development, and you’re ready to start developing on your new computer.

Remember: don’t forget to add your usual plug-ins, software, and tools to the list for later configuration.