Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "Building methods based on visual studio code+react Development Environment", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "method based on visual studio code+react development environment" article.

Development environment windows

Development tool visual studio code

Node installation and npm

Windows installation node can be downloaded directly from the node official website and installed as ordinary software.

After the installation is completed, you can run node in the console to test whether win + r is installed successfully, enter cmd, and directly enter node-v in the terminal to output the version number and have been successfully installed.

The current new version of node comes with npm (npm is a package management tool installed with node). After node is installed here and the test installation is successful, you can continue to type npm-v in the console to see if the installation is successful. If you succeed, you will lose the publication number.

Install visual studio code

Vs code normal software installation does not need to pay attention to, download and install directly

Install React

The reference document React JavaScript Tutorial in VS Code document is already very detailed and it is basically no problem to follow the document once.

Create a local folder, that is, the folder where the project is saved, and open the console under the folder. Here, I use git bash to right-click under the folder to find the git bash startup.

Type npm install-g create-react-app in the console to install create-react-app using npm

After installing create-react-app, continue to type create-react-app my-app to create a project my-app is a created React project, wait for a period of time (here you need to download some dependency packages), you can see the entire file structure that has been created

Change the console directory to the project directory and run npm start to check whether the current project has been created successfully. Normally, after entering the command, you will directly open the default browser preview http://localhost:3000/ and you will see a react page.

At this point, the newly built React project is ready to 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 to support the use of the chrome kernel debug.

Reload VS Code after directly searching for installation

two。 Using Debugger for Chrome for debug requires additional configuration of the project

Set the startup configuration here. As mentioned in the original document, a new launch.json will be created. I already have a launch.json file here and you can add the configuration directly in it. There is a button to add the configuration directly. Note that there are two chrome-related nodes, one Launch and one Attach.

After creating two nodes, find "request": one of the nodes of "launch" has a url that sets the url to the url started by the React project, that is, the other configuration node of http://localhost:3000/ can be modified by default if there is a problem. All the modified configurations are as follows:

{/ / use IntelliSense to learn about the relevant properties. / / hover to see a description of an existing property. / / for more information Please 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 opens

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

Now it is easy to debug.

Install eslint

Eslint is an assemblable JavaScript and JSX inspection tool. Can be used to check the syntax error specification code.

Type npm install-g eslint in the console to install eslint

Installing the eslint plug-in through VS Code

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

The above is about the content of this article on "Building methods based on visual studio code+react Development Environment". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.