You don't know vscode | warehouse configuration project constraints

Zhiyuan Wang, Wedoctor Front-end Technology Department

preface

Welcome to the world of vscode, there are a lot of development tools, to find their own needs, to find the right tool, not “have a hammer, everything looks like a nail”; For VSCode, the focus is on the editor rather than the IDE, which is out of the box and therefore bulky, such as Eclipse.

On language and the workflow editor on rich support and freedom, and therefore more lightweight, which means it won’t be for a language or some way for users to do too many things, but also means TA has a high degree of freedom, such as plug-in mechanism, warehouse configuration mechanism, etc., this paper focus on the warehouse configuration to share it with other article to plug-in mechanism.

So let’s go bang, go bang!

Configuration overview

VS Code is managed by folder, but VS Code allows you to create several configurations related to the current folder or project and save them in this folder for easy sharing within the team. This folder is.vscode.

This folder can contain the following files.

Configuration file (settings.json)

This only works if the current folder is opened in VS Code. Same thing we said about changing user Settings.

Task Settings (tasks.json)

Configuration file about VS Code task system

Debug Settings (launch.json)

How to debug the code under the current folder

Vscode Repository configuration file Settings

As an editor, you naturally need to consider personal preferences and uniform project style in multi-developer, such as font size, line breaks, automatic formatting plug-in configuration, etc. In VSCode, the corresponding function is setting.json configuration

Configuration mode

Basic information

**User Settings ** : User Settings, default, associated with all projects, lower weight than workspace Settings

Json: /.vscode/settings.json: /.vscode/settings.json

User Settings: Use the UI Settings interface

Use Ctrl+, (MAC is CMD +,) or click on the gear icon in the lower left corner and select Settings. Then go to settings.json in the text editor

User Settings entry: Use the command panel

Use Ctrl+Shift+P (CMD +Shift+P for MAC) or click on the gear icon in the lower left corner and select the Command Panel. And I’m gonna say Settings

Open User SettingsWill open the UI Settings interface;
Open Settings (JSON)Json file for user Settings is opened.

Workspace setup entry:.vscode folder

When opening a folder or workspace, manually create the.vscode folder and create a settings.json file in it.

Workspace setup entry: Use the command panel

Use Ctrl+Shift+P (CMD +Shift+P for MAC) or click on the gear icon in the lower left corner and select the Command Panel. And I’m gonna say Settings

Open Workspace SettingsThe UI Settings screen also opens;
Open Workspace Settings (JSON)The Workspace Settings settings.json file opens

Configure the content

You can view related documents about all configuration items here. Common Settings are shared and configuration ideas are searched here.

Common Settings: editor appearance

editor.lineNumbers: Indicates whether to display the line number on the left of the editor. The default setting is ok
editor.renderWhitespace: allRender all whitespace characters (Spaces, tabs, etc.) as dots
editor.renderIndentGuides: Indent guides, default to code block link Settings
editor.rulers: [120]: Vertical ruler. A vertical line is drawn at the specified column number
editor.minimap.enabled: false: Whether to display the right minimap, personally like to close
editor.cursorBlinking/cursorStyle/cursorWidth: Cursor style
editor.renderLineHighlight: 'all': Sets the current line to highlight the background, and the line number is also highlighted

Common Settings: Writing experience

Custom whitespace and TAB characters

{editor. DetectIndentation: false, / / off VS Code automatic detection to control the use of tabs or the blank space key editor. TabSize: Editor. insertSpaces: 1 // Spaces corresponding to Spaces}Copy the code

Automatically saved

{
	editor.formatOnSave: true
}
Copy the code

Default type of new file

{
  files.defaultLanguage: 'markdown'
}
Copy the code

Search for configuration roadmap

Nothing, remember keywords, editor related as follows; Others, EMMM, see the corresponding documentation

Editor cursor, is related to cursor rendering and multiple cursor Settings;
Editor Find, which is the Settings related to searching within the editor;
Editor font, which is a font related setting;
Editor format is code formatting.
Editor Suggest, is a configuration related to autocomplete, suggestion window, etc.

Then search in the Setting UI panel

Tasks for vscode repository configuration

The goal of a task system is to unify as many disparate task scripts as possible and then provide a simple but highly customizable way to operate them

Configuration tasks

Tasks come from two sources: automated detection of projects and custom tasks

Automatic detection of items

VSCode automatically reads the configuration file under the project and generates tasks based on the configuration file type.

Suppose you have package.json under your project, with the content

{
 "name": "sample"."scripts": {
  "test": ""}}Copy the code

The runtime will find two nPM-related tasks by default:

npm install
npm test

Custom task

First we search for “Configure Task” in the command panel and execute it.

We can see a drop down box with several different options.

There are two options for customizing tasks

Generate from command`task.json`

If we select the first item, NPM: install, VS Code will immediately create a tasks.json file in the.vscode folder, which is in json format and is readable and easy to modify.

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0"."tasks": [{"type": "npm"."script": "install"."problemMatcher": []}]}Copy the code

The value of the Tasks property is an array. This is all the tasks we can use in the current folder.

attribute	meaning
type	Represents which scripting tool you want to use
script	Which script command is executed by the scripting tool
problemMatcher	Set rules to automatically analyze the results of a task, as described below

This type of task, however, is limited by the scripting tools supported by VS Code or plug-ins and lacks some flexibility.

Create the tasks.json file using the template

Then VS Code asked us which template we wanted to use. The number of templates here also depends on which plug-ins you have installed. By default, VS Code provides templates for MSBuild, Maven,.net Core, and finally Others, which is a generic template. Let’s take a look at it.

After selecting Others, VS Code creates a tasks.json file in the.vscode folder at the root of the current folder.

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0"."tasks": [{"label": "echo"."type": "shell"."command": "echo Hello"."group": "none"."presentation": {
    "reveal": "always"."panel": "new"
   },
   "options": {
    "cwd": ""."env": {},
    "shell": {
     "executable": "bash"}}}]}Copy the code

attribute	meaning	Whether mandatory \| default values
label	The name of the task and the key selected during the task execution	true
type	There are two options for this type: running the task as a process or running it as a command line in the shell.
command	Represents which command we want to run in the shell, which can be used in conjunction with the args attribute	true
args	Array, each value in the args is passed as its parameter when running the specified command, as noted below	[]
group	Grouping, we can use this property to specify which group the task is included in. This refers to the runtime categories: Run Test Task, Run Build Task
presentation	Controls whether to automatically call up the running interface when a task is running
options	You can control several configurations during task execution, such as the location of the folder where the task script is run “CWD”, the environment variable “env”, or the shell environment used when the task script is run.
dependsOn	Implement multi-task execution
path	Relative to the root path of the project, the script will be switched to below first

Extension: The group attribute, which runs groups of tasks

In the task attribute, there is also a group attribute, which needs to know Run task first. If we enter Run Task in the command panel, the following content will appear

Running tasks are explained above; The key is [run development task] and [Run test task]; The functions are the same, providing a task list for the user to choose to execute, the only difference is that VSCode has added a category to facilitate the user to define tasks, and this category is defined by the group attribute;

Group attribute values	meaning	Corresponding Execution commands
build	Divide this task into a list of packaged tasks	Run Build Task
test	Divide this task into a test task list	Run Test Task
none	Divide this task into the default task list	Run Task

Our packaging or testing tasks are usually fixed and unique, which means we can skip the “select command” step and run with one click. How do you set it up?

"group": {
    "isDefault": true."kind": "test" // This is the one-click execution of the Run Test Task; If Run Build Task is set, kind is set to Build
   }
Copy the code

Extension: parameters when executing a command

The task object definition has a property args, which is an array, and each value in the args is passed as an argument when the specified command is run, as in

{
  "label": "echo"."type": "shell"."command": "echo 'Hello World'"
}
Copy the code

We could rewrite this as theta

{
 "label": "echo"."type": "shell"."command": "echo"."args": [
  "hello world"]}Copy the code

For commands, however, different executing shells may have different interpretations of whitespace, $, quotes, and so on, which means that parameters need to be set to escape rules, so args arrays can also store objects

"args": [{"value": "Hello World"."quoting": "escape"}]Copy the code

key	value
value	Parameters of the content
quoting	Determines what to do with this string, right

There are three values for quoting

value	meaning
escape	By default, the task system will escape this string according to the requirements of the shell we are using
strong	In bash, we would wrap this string in single quotes
weak	In bash, we enclose the string in double quotes

For instance,

The script executed under ESCAPE is actually

echo Hello\ World
Copy the code

The script executed under strong is actually

echo 'Hello World'
Copy the code

The script executed under weak is actually

echo "Hello World"
Copy the code

We analyzed bash as the shell above, what about CMD, Powershell, and so on? You can search the “quoting mechanism” for this, and refer to VS Code’s documentation on the Task parameter escape section.

Extension: multitasking

A dependsOn attribute is an array that stores the label of all tasks to be executed.

For example, I want runOrderFirst to help me start both the Microapplication Base project and the order project within it;

Json, which contains tasks for start base and Start Order

{
            "label": "runMapp"."type": "npm"."script": "start:dev"
        },
        {
            "type": "npm"."script": "serve"."path": "apps/order/"."problemMatcher": []."label": "runOrder"."detail": "To start the order"
        },
Copy the code

Then we add a task to aggregate the two, and the tasks.json content becomes the following

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0"."tasks": [{"label": "runMapp"."type": "npm"."script": "start:dev"
        },
        {
            "type": "npm"."script": "serve"."path": "apps/order/"."problemMatcher": []."label": "runOrder"."detail": "To start the order"
        },
        {
            "label": "runOrderFirst"."dependsOn": [
             "runMapp"."runOrder"]]}}Copy the code

Just run the task and the effect is as follows

We can take advantage of the grouping function and set it as a Test Task by default so that the Run Test Task can be executed directly

 {
            "label": "runOrderFirst"."dependsOn": [
             "runMapp"."runOrder"]."group": {
                "kind": "test"."isDefault": true}}Copy the code

Results the following

Run the task

Use the command Run Task in the control panel. Then select the corresponding command.

For example, select the “echo” task (which is the name we put in the label) and press Enter. VS Code will ask us “Select what errors and warnings to scan the task output for”. Now select the first option “Continue without scanning the task output”.

example

Evoke Chrome, let’s first implement evoke in MAC, then worry about generic.

First: Define task

{
 "version": "2.0.0"."tasks": [{"label": "chrome"."type": "process"."command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"}}]Copy the code

Second: Run tasks

Let’s Run it to see what it looks like, using the command Run Task in the control panel, then select Chrome;

Finally: Consider platform differences

If you’re running Windows or Linux, this task won’t work because the Chrome addresses don’t match at all.

So we can modify task.json to customize commands for the system.

{
 "version": "2.0.0"."tasks": [{"label": "chrome"."type": "process"."command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"."windows": {
    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
      },
   "linux": {
          "command": "/usr/bin/google-chrome"}}}]Copy the code

Launch vscode repository configuration

Debugging, is the most indispensable part of the function, for most IDES, because of the use of object determination and use extremely convenient, such as IDEA in JAVA, and even Google Browser in the front end; For vscode, which is different from the IDE, this requires greater flexibility, which requires configuration files.

Routine use of

For newbie friendliness, vscode has a default setting for debugging out of the box. Using NodeJS as an example, you can set breakpoints and debug them.

To set breakpoints

There are two solutions, you can enter the keyword [debugger] in the file; You can also put a red dot on the left side of the file, the effect is consistent;

debugging

You can either click the debugger button on the left [a Beetle icon] or use the shortcut [CMD + Shift + D]. Then select the type of program you want to debug. By default, the currently open file will be debugged.

Advanced use: debug and configure launch.json

What if you need to debug a project instead of just a single file? Or a specific file within the project, which requires the launch.json file, also under.vscode for the task function.

How to create

Click the Debugger button on the left [a Beetle icon], or use the shortcut [CMD + Shift + D] to call up the Debugger panel, then click on the create entry, and select the type and it will be created automatically.

{
 // Use IntelliSense to learn about related attributes.
 // Hover to view descriptions of existing properties.
 / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "Start program"."program": "${file}"}}]Copy the code

attribute	role	note
type	Represents the type of the debugger
request	How do I start the debugger	[launch \| attach] [direct startup code and debug \| debugging process of the existing code]
name	That’s the name of this configuration
program	Tell the Node.js debugger which file we want to debug	This value supports predefined parameters such as ${file},$ {workspaceFolder}

How to write

For writing the launch.json file, we have two tools at our disposal

Use the template provided by VS Code’s debugger plug-in

When creating launch.json, you are asked to select the type to create the corresponding template

Automatic completion function

Another thing that helps us is to use auto-complete when writing configuration properties. When writing a new property, pressing Ctrl + Space will bring up a suggestion list that provides all the properties available in the current debug configuration, which we can then use as needed

The end of the

At this point, the sharing of warehouse configurations is over; There’s a lot of information in this section, and since the editor’s default Settings are bound to fit most scenarios, it’s likely that most of us have never been exposed to these concepts, but trying to be a better version of ourselves is the whole point.

For example, a few days ago, I started a project where I wanted to plug in save auto-formatting, esLint +prettier, most people already have that in their project when they join, I did the same, so I was a little confused at first, but I wanted to try it out, Finally, I found that it is actually the configuration. Vscode file setting. Json file, interested students can refer to the end of the article [reference post about achieving uniform project code style], they write very well, I will not rewrite a article.

Series of articles

For the related sharing of vscode, the list of articles is as follows

Cursor operation: completed
Space control: completed
Project constraints | warehouse configuration: in this paper
Plug-in development: To be completed
Language support: To be done

Graph TB A[Vscode] --> F[command world] A[Vscode] --> D[language support] A[Vscode] --> B[cursor manipulation] A[Vscode] --> C[space control] A[Vscode] --> G[project constraint] A [Vscode] -- > E/plug-in development B - > B1 [cursor movement] -- > B2 B [much] cursor B - > B3 (custom) C - > C1 / edit area C > C2 [having] C -- -- -- -- > > C3] [command panel C C4[sidebar] G --> G1[Debug debugger] G --> G2[Task Task] G --> G3[snipshapt]

The relevant data

A reference post on achieving uniform code style for projects

ESLint+Prettier: juejin.cn/post/689932…
Eslint official website rules: eslint.cn/docs/rules/…
Some problems about prettier configuration: www.jianshu.com/p/99e0c58f3…
Where does esLint format prettier? www.itcan.cn/2020/09/12/…

Predefined parameters that can be used in configuration files

Visual Studio Code Variables Reference

Learning document

Check out VS Code’s official blog here

Click here to view VS Code update logs

Check out Erich Gamma’s presentation on VS Code at Goto Conference here

You don’t know vscode | warehouse configuration project constraints