The process of building a development environment based on visual studio code + react

Development environment windows

Development Tools Visual Studio Code

Node installation and npm

To install Node on Windows, you can download it directly from the Node official website and install it as a normal software.
After the installation is complete, you can run node in the console to test whether the installation is successful. Win + r enter cmd , and directly enter node -v in the terminal to output the version number and whether it has been successfully installed.
Currently, the new version of node comes with npm ( npm is a package management tool installed with node ). After installing node here and testing the installation successfully, you can continue to enter npm -v in the console to check whether it is installed successfully. If successful, the version number will be output.

Install Visual Studio Code

There is nothing to note about the normal software installation of vs code, just download and install it

Install React

Refer to the document React JavaScript Tutorial in VS Code. The document is very detailed and you will basically have no problem just following it.

• Create a local folder, that is, the folder where the project is saved, and open the console in the folder. I use git bash here. Just right-click in the folder and find git bash to start it.
• Enter npm install -g create-react-app in the console to install create-react-app using npm
• After installing create-react-app, continue to enter create-react-app my-app to create a project. my-app is the created React project. Wait for a while ( some dependent packages need to be downloaded here ), and you can see the entire file structure created.
  

• Switch the console directory to the project directory and run npm start to check whether the current project is created successfully. Normally, after entering the command, the default browser will be opened directly to preview http://localhost:3000/. At this time, you will see a react page.
  

At this point, the newly created React project can run normally
5. Open the project folder with VS Code, where you can see the entire file structure

All files can be modified directly using VS Code.

Install Debugger for Chrome

1.VS Code provides the Debugger for Chrome plug-in that supports the use of Chrome kernel debugging.

Search and install directly and reload VS Code
2. Using Debugger for Chrome for debugging requires additional configuration of the project

Set the launch configuration here. The original document says that a new launch.json will be created. I already have a launch.json file here, so I can add the configuration directly to it. There is an Add Configuration button here to directly add the configuration node. Note that there are two chrome-related nodes here, one Launch and one Attach.

After creating two nodes, find a node called "request": "launch" and set it to the URL used to start the React project, which is http://localhost:3000/ Leave the other configuration node as default and modify it if you have any questions. The modified configuration is as follows:

{
    // Use IntelliSense to learn about related properties. 
    // Hover to see descriptions of existing properties.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "node",
            "program": "${workspaceFolder}\\start"
        }
    ]
}

Start the project npm start and open the debug toolbar

Select the previously added chrome node to start, and a new chrome page will open

Find the index.js file in the project source code, set a breakpoint, click the left button in front of the line number, and then refresh the page to enter the endpoint

At this point, debugging is now simple.

Install eslint

eslint is a composable JavaScript and JSX linter. Can be used to check for syntax errors.

• Enter npm install -g eslint in the console to install eslint
• Install the eslint plugin through VS Code
  

3. Open the command panel of VS Code and find it directly in the view or Ctrl+Shift+P to enter ESLint and find the option to create a .eslintrc.json file. At this time, a configuration file will be created in the root directory of the project. At this time, some syntax errors in your project will be automatically detected.

There are also rules for configuring semicolons in the reference document, which can be added if needed.

This is the end of this article about setting up the visual studio code + react development environment. For more information about setting up the vscode react environment, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!