Visual Studio Code not fully used guide

Introduced

Visual Studio Code is a lightweight editor based on Electron developed by the "Giant Hard", which specializes in web development and supports languages including:

• JavaScript
• C#
• JSON
• HTML
• Markdown
• TypeScript
• CSS, Sass, Less
• DockerFile
• Swift
• Groovy
• Growing in ...
  

Quick Navigation

VS Code provides a multifunction input box similar to Sublime thatCommand + Pcalls out

Do not use the prefix character, you can do in-project file search; Enter a prefix character?to view all command lists (Global command + editor commands), where>prefixes are used most frequently, through which we can find all the commands, excited!

Editing features

• Multiple cursor selectionAlt + 鼠标单击
• Gradually select the other same symbolCommand + D,
• Select all the same symbolCommand + F12
• Code formattingShift + Alt + F
• Refactor (rename) SymbolF2
• Find all codes that reference the selected symbolShift + F12

• 
  

• Jump to the definition of symbolF12

• A glimpse of the definition of a symbol (it is useful to expand the panel below the symbol to display the definition code)Alt + F12
• Jumps to the previous (next) position of the cursor (the fallback scheme of the misoperation is very useful)Command + Left/Command + Right

Syntax hints

The syntax hints for VS Code are powerful and outrageous, support for supported languages, and hints for function methods with parameters

For the industry well-known frameworks and libraries, but also through the powerful *.d.ts file to support syntax hints, parameter hints, such as I used in the projectangular, type the angular namespace, a small light bulb after 1s, and then click on it, select "Download ..." After the editor began to download the background , there will be hints after success

JQuery, Backbone, underscore, Lodash, node. js, Express, restify, Async, etc. well-known open source framework and library hints can be directly managed through TSD, very convenient

Regardless of whether the TS files installed through the mini-bulb or through the TSD installation are placed in the Typings folder under the project's root path, it is easy to view the existing hint plugin

Turn on ES6 syntax support

VS code supports ES5 syntax by default, you need to manually open your code if it uses ES6 features and does not want to be built-in lint ToolTip syntax error. Create a new file in the project proj root directoryjsoconfig.js, and add the following code:

{ "compilerOptions": { "target""ES6" }    }

Save the file –> Restart Editor, ES6 syntax is supported in this project and the built-in lint tool will no longer prompt for errors

Debug node. js

After installing Mono locally and adding it to an environment variable, you can debug the node. JS program, which is similar to Webstorm, which is configured to debug by switching to the debug panel and clicking on the Green Start button, where the editor will add.settinga new file under the project root folder folder, node. js's Startup/debug profile, and task's configuration file are all placed here.

Here node. JS is configured with the file namelaunch.json:

{
        "version": "0.1.0",
        // List of configurations. Add new configurations or edit existing ones.
        // ONLY "node" and "mono" are supported, change "type" to switch.
        "configurations": [
            {
                // Name of configuration; appears in the launch configuration drop down menu.
                "name": "Launch env",
                // Type of configuration. Possible values: "node", "mono".
                "type": "node",
                // Workspace relative or absolute path to the program.
                "program": "env",
                // Automatically stop program after launch.
                "stopOnEntry": false,
                // Command line arguments passed to the program.
                "args": [],
                // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
                "cwd": ".",
                // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
                "runtimeExecutable": null,
                // Optional arguments passed to the runtime executable.
                "runtimeArgs": ["--nolazy", "--harmony"],
                // Environment variables passed to the program.
                "env": { },
                // Use JavaScript source maps (if they exist).
                "sourceMaps": false,
                // If JavaScript source maps are enabled, the generated code is expected in this directory.
                "outDir": null },
            {
                "name": "Attach",
                "type": "node",
                // TCP/IP address. Default is "localhost".
                "address": "localhost",
                // Port to attach to.
                "port": 5858,
                "sourceMaps": false }
        ] }

Note: The code for the ES6 feature in the Node.js code needs to have "--harmony" turned on, so `runtimeArgs` needs to add a "--harmony"

Commonly used to add environment variables, add application parameters, node's execution parameters and other operations can be modified here, after the configuration is finished, click the Green Start button again, Vscode can start the service, while listening to the 5858 port for debugging operations

Vscode Debug operation is similar to the browser developer tool, Webstorm debugging tool, but it does not provide the command line terminal information display, so when debugging will open the system's default shell for program run information display

Support Markdown

The powerful Sublime Text 2/3 also supports markdown syntax highlighting, but the preview feature requires plugins to be implemented and can be previewed in the browser with one click. VS Code comes with a preview feature thatCommand + Shift + vallows you to preview it natively, enabling a real-time preview by opening the two-column editor

With other independent Markdown Editor (Mou, Macdown, Mark Fei??). And so on), the VS code can also set.mdthe preview style of the file, and with the shortcut groupCommand + ,You can quickly open the User Settings file and add the following fields

"markdown.styles": [
    "https://jasonm23.github.io/markdown-css-themes/screen.css"
]

The Markdown.styles field value is an array of style URLs, and by specifying that our previews change the style of the external style sheet (. css file), the beauty of the skin for Yan's party is that it can always bring extra power to writing (development).

The theme of the lottery, please poke me.

Configuration tasks

VS Code provides thetask.jsonability to run a Task with a configuration file for shortcut keys, such as HTML-Markdown:

{
        "version": "0.1.0",
        "command": "marked",
        "isShellCommand": true,
        "args": ["sample.md", "-o", "sample.html"] }

When configured, press the shortcut key "COMMAND + Shift + B" in the markdown file focus to compile the conversion, similar to other tools that can be called through the command number tool, such as LESSC, Gulp, Grunt, and so on

Personally feel that the current task function is very chicken, even the basic watcher function to rely on GULP to achieve, and most of the tasks through simple command line calls can, writing configuration file sometimes instead of simple things complicated, and besidespackage.jsonthescriptsfield has been given the ability to run tasks by configuring the project.

 
"scripts": {
        "start": "NODE_ENV=production node --harmony server-side/server.js",
        "dev": "NODE_ENV=development node --debug --harmony server-side/server.js",
        "pm2": "NODE_ENV=production pm2 start server-side/server.js --node-args=\"--harmony\"",
        "pm2-dev": "NODE_ENV=development pm2 start server-side/server.js --node-args=\"--harmony\"",
        "local": "NODE_ENV=local nodemon --debug --harmony server-side/server.js",
        "test": "npm run test-jshint && npm run test-mocha",
        "test-mocha": "NODE_ENV=test mocha --harmony ./server-side/**/*.spec.js",
        "test-jshint": "jshint -c .jshintrc server-cd side/**/*.js --exclude server-side/**/*.spec.js --reporter node_modules/jshint-stylish/stylish.js",
        "test-mocha-watch": "NODE_ENV=test mocha --watch --harmony ./server-side/**/*.spec.js" },

Version control

VS Code support git version control, provides basic stage, commit, fetch, pull, push and other git common functions, set the default open the background of the auto git fetch, the third of the right panel is the GIT management tool UI, After the opening of the current project document status at a glance, by clicking the plus sign can be changed to the file stage.
The Commit message input box provided by the editor also allows the developer to fill in multiple lines of commit information (command line tools are not supported)

It provides a recommended color diff tool that clearly allows developers to see the differences in file changes and improve the efficiency of diff.

The bottom left corner of the toolbar in the editor clearly shows the branch where the current development is located

Click on the current branch, the editor will pop up all (remote, local) branches for switching, user-friendly

There are still deficiencies

• Lack of plug-in systems
• Editor lack of color matching
• Still need more language support
• Local File History Snapshot lacking

• Cursor position history forward, backward

• ^_^ Welcome to Supplement

Visual Studio Code not fully used guide