Code sharing for developing Nodejs programs with vs code

This article mainly introduces how to use vs code to develop Nodejs programs. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Recently I have been studying nodejs again and struggled to choose a lightweight editor. Since I have been engaged in .net development, although Microsoft has launched a plug-in for Visual Studio to develop node js, and uses Not bad, but I always feel that this editor is too big (one installation is several G)! webstore is currently one of the most popular IDEs for Nodejs development. The reason for its popularity is, of course, the integrated development environment of Nodejs IDE, which integrates project creation, editing, and debugging, simple configuration, and powerful intelligent prompts. As I said before, I have been doing .net development. It just so happened that Microsoft launched vs code in 2016, a lightweight text editor that can write programs in various languages ​​and debug them. In order to become familiar with this editor, it will be convenient for subsequent work. development, so this time I chose vs code as the editor for this development (although VScode looks more like powerful file editors such as Uedit and Noteplus, it also provides scalable and powerful prompt functions (especially file js reference prompt), and the built-in Nodejs debugging function, making it different from ordinary editing tools)! Of course, it is also related to Microsoft’s future strategy!

The premise of this article is that you have installed vs code. Editor and nodejs environment, if they are not installed, please download and install them yourself!

1. Use Express to create a project [Both steps are executed in dos mode]

1, install global Express! (Please ignore if already installed)

npm install -g express

2, Create project

Create project (create folder name ExpressApp)

express ExpressApp

Interlude: If you are used to the Linux environment, you can install cmder on your computer (if you don’t know what it is, please Baidu). This command line tool has beautiful layout. It's so boring like Microsoft's DOS! I use the Mini version. If you want to experience all the functions under Linux, you can download the full version.

3, download the third-party package

(1)cmd command line to switch to the project directory

cd d:\nodejs\ExpressApp

(2) Edit package.json as needed and run the following instructions to install the third-party package

npm install

The installed third-party package can be seen in node_modules in the project directory

ExpressApp
|– node_modules

(3) Run the project

npm start

The output is as follows:

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp
node ./bin/www
Note: The npm start command will automatically execute node ./bin/www

in the browser Enter http://localhost:3000 to access the Express welcome page

2. Use VSCode to develop Nodejs

1. Open Nodejs with VSCode

code d:\nodejs\ExpressApp 
code.

Note: Create ExpressApp.bat under the current project and enter "code .". Next time, use this file to open the Nodejs project directly with VSCode

2 , Add smart prompts

Open the Nodejs project with VSCode. There is no smart prompt by default.

(1) Use TypeScript Definition Manager (TSD) to download the required tsd file in the project, and there will be intelligence when opening it in VSCode
Install tsd globally (if it is already installed, ignore it)

npm install -g tsd

Download the required component prompts (take the prompts for downloading node, express, requirejs as an example)

tsd query node --action install
tsd query express --action install
tsd install require

Note:

①Multiple prompt components can be separated by spaces after the query parameter, abbreviated as tsd query node express –action install

②The component will add the typings folder to the project directory

|– typings
|– node
|– express
|– require

(2) Add smart prompts for js file references

If the file references another file common.js, add the following to the file header

{
  // See https://go.microsoft.com/fwlink/?LinkId=759670
  // for the documentation about the jsconfig.json format
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "jspm_packages",
    "tmp",
    "temp"
  ]
}

(Tips, if you introduce rquire, then you A "light bulb" prompt will be displayed in the lower right corner of the editor. You just need to click the light bulb and you don't have to write this configuration file yourself.)

This configuration means that the code obeys ES5 standards and uses commonjs specifications. Send VScode With this configuration, you can realize smart prompts for require reference js files in files. (There will be smart prompts when I test without this configuration, I don’t know the reason)

3. Debugging

1. Create VSCode scheduling configuration file

When you click the debug panel and click the Run (F5) button, a drop-down box will appear on the right, select "Node.js"

Then the launch.json file will be created in the project directory

ExpressAppp
|–.vscode
|– launch.json

You can edit launch.json as needed and modify the startup configuration items

2. Create a break Point:

Create breakpoints as needed: On the left side of the js file editing area, breakpoints will be added/removed

3, Scheduling

Click Run on the debugging panel or press the shortcut key F5, and press F10 for single-step debugging!

In fact, these are included in Microsoft's official documents. Some small details or steps will be ignored by developers, which will have a certain impact on later development, so please strictly follow the configuration requirements!

Related recommendations:

Use vs code to write php and debug

The above is the detailed content of Code sharing for developing Nodejs programs with vs code. For more information, please follow other related articles on the PHP Chinese website!