The opportunity to sort out this article is that I recently gave my friend Amway several VSCode plug-ins that I think are easy to use. As a result, he could not configure some plug-ins after installing them. Just take advantage of the recent free, their common plug-in and configuration sorted out to share.

Install Visual Studio Code

Download and install the plugin from the official website, and then use the shortcut key CTRL + Shift + X to search for the plugin.

Interface optimization

1. The localization

Install the Chinese (Simplified) Language Pack for Visual Studio Code plug-in, and then restart VS Code.

2. Background image

Add a background image (GIF format) to your editor.

Install the background plugin and restart the editor. VS Code will prompt you to ignore it.

This is the default:

If you want to change it to a custom image, add the following changes to settings.json:

{
    "background.useDefault": false.// Whether to use the default image
    "background.customImages": [    // A custom image address can be used for network images
        "C:/Users/images/1.png"."C:/Users/images/2.png"."C:/Users/images/3.png"]."background.style": {           / / CSS styles
        "opacity": 0.4}}Copy the code

The restart vscode takes effect.

3. Embellish notes

Add different colors for different types of code comments. Support comments for various file types.

Just install Better Comments.

The default looks a little different from the one shown above. You can customize keywords, colors, and styles in settings.json.

The restart vscode takes effect.

"better-comments.tags": [{"tag": "fix".// Keyword (case insensitive). Better Comments will style this line after detecting the keyword
        "color": "#FF2D00".// Text color
        "strikethrough": false.// Whether to display the delete line
        "underline": false.// Whether to display underscores
        "backgroundColor": "transparent".// Background color
        "bold": false.// Whether to bold
        "italic": false                   // Whether to enable italic text},... Multiple keyword configuration]Copy the code

4. Color the brackets

Set different color highlights for pairs of parentheses in the code to make it easier to read.

Bracket Pair Colorizer 2 provides better performance than Bracket Pair Colorizer.

Json: “bracketsingutter “: true, meaning brackets are displayed before the line number for easy location. Other Settings are unnecessary. After modifying setting.json, please restart vscode.

5. Display the file size

After the filesize plug-in is installed, the current filesize is displayed in the status bar.

6. Indent highlighting

Highlight the indentation before the text, alternating with four different colors.

Install the plugin indent-rainbow

Configuration:

{
    // Highlight colors
    "indentRainbow.colors": [
        "Rgba (40140160,0.3)"."Rgba (40160140,0.3)"."Rgba (60140140,0.3)"."Rgba (60160160,0.3)"].// Highlight color when tabSize error occurs
    "indentRainbow.errorColor": "Rgba (128,32,32,0.6)".// Highlight color for indent with space and TAB
    "indentRainbow.tabmixColor": "Rgba (128,32,96,0.6)".// The type of file to highlight
    "indentRainbow.includedLanguages": [
        "vue"."html"],}Copy the code

7. File ICONS

Material Icon ThemePlug-in, you can install.

Language support

8. VUE support

The Vetur plugin provides Vue syntax highlighting, code snippets, auto-completion, formatting code, and more.

9. SVG

SVG plugin provides syntax highlighting, auto-completion, document hints, color selection, URL jump, quick ID modification, SVG preview and PNG export.

Code snippet

10. 30-seconds-of-code

Plugins based on the 30-seconds-of-code library provide some simple and practical JS methods. Not only can you use it in your project, but it’s also a great resource to study.

Once installed, type 30s in the editor and a code prompt will appear. Select the snippets you want and press Tab. Official document recommended “editor. SnippetSuggestions” : “top” setting, means the position of the control code snippets and other Suggestions to arrange. This depends on personal needs, do not set is also possible. I think the default “inline” is better.

11. vscode-element-helper

An autocomplete plug-in based on ElementUI.

12. HTML templates

Provides standard HTML boilerplate code used in all Web applications.

Install the HTML Boilerplate plugin, type HTML5 in the.html file, and select the prompted HTML5-Boilerplate to generate the following template:

<! DOCTYPEhtml>
<! --[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <! [endif]-->
<! --[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <! [endif]-->
<! --[if IE 8]> <html class="no-js lt-ie9"> <! [endif]-->
<! --[if gt IE 8]><! --> <html class="no-js"> <! - <! [endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
  </head>
  <body>
    <! --[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <! [endif]-->
    
    <script src="" async defer></script>
  </body>
</html>
Copy the code

The project management

13. Uniform code style

EditorConfig helps maintain a consistent coding style for multiple developers working on the same project across multiple editors and ides.

Create a new. Editorconfig file in the project root directory that defines the coding specification for the project and has a higher priority than the editor’s own Settings. After the EditorConfig for VS Code plug-in is installed, the configuration in EditorConfig is applied to the edit file when the file is saved/formatted. Note that formatting rules must be consistent with the various Lint rules.

# If root = true is not specified, EditorConfig will continue to look for.editorConfig files outside the project.
root = true

Set the file character set
charset = utf-8

The following configuration applies to file types. You can set different rules for different file types
[*.{js,jsx,ts,tsx,vue,scss,json}]

# Convert the newline character to LF when saving
end_of_line = lf

# Indent format
indent_style = space
indent_size = 2

Delete whitespace at the end of the line automatically when saving
trim_trailing_whitespace = true

Insert a blank line at the end of the file when saving
insert_final_newline = true
Copy the code

14. ESLint

To install the ESLint plugin, run NPM install -g ESLint.

Add the rules file.eslintrc.js to the project root directory, and the plugin will check the code against the rules. See the configuration here. Here is a simple example:

module.exports = {
  env: {
    browser: true.commonjs: true.es6: true.node: true
  },
  extends: [
    'standard'].globals: {
    Atomics: 'readonly'.SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 11
  },
  rules: {}}Copy the code

If you don’t want the tool to examine a file or line of code, you can put a comment /* eslint-disable */ before the code.

If you need to ignore lint checks for multiple files, you can create an.eslintignore file in the project root directory, and directories/files written to this file will be ignored.

build
node_modules
doc
Copy the code

Add the following configuration to settings.json and try to fix the error when saving:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true}}Copy the code

Prettier is basically enough, not necessary.

15. Git visualization

SourceTree in VS Code.

Install Git Graph and use the Shift + Alt + G shortcut keys to open the Git Graph page.

16. The Git log

A powerful Git log management toolGitLens — Git supercharged

When the installation is complete, the log is displayed next to each line of code in the default format of Submitter + modification date + Commit Message

17. Project switching

Save the project directory, easy to switch between different projects.

Install the Project Manager plug-in. After completion, there is a Project Manager activity bar, where saved projects are managed. Common commands are as follows:

18. NPM management

npmThe extension supports running NPM scripts defined in package.json files and validating installed modules against dependencies defined in package.json.The plugin will warn when modules in package.json have the following:

  • It is defined in package.json but not installed
  • Modules are installed, but not defined in package.json
  • The version number of the installed module is inconsistent with that defined in package.json

utility

19. Bookmark management

Add bookmark management to your project.

Install the Bookmarks plug-in. Once installed, the activity bar will have a Bookmarks menu that lists all bookmarks under the current project.

  1. Add/Remove bookmarks:
    • shortcutsCtrl + Alt + K
    • Use the right mouse button menu and select “Bookmarks: Switch”
  2. Jump between bookmarks:
    • On aCtrl + Alt + J. Or right-click the menu and select “Bookmarks: Skip to Previous”
    • The nextCtrl + Alt + L. Or right-click the menu and select “Bookmarks: Skip to Next”
  3. List all bookmarks:
    • Activity bar View
    • F1 bring up the search box and searchBookmarks: List
  4. Add a description to a bookmark: Find the bookmark in the activity bar and click the Edit button to add a description.

20. Built-in browser

Chrome browser inside VSCode.

After installing the Browser Preview plug-in, a “Browser Preview” menu appears in the left activity bar. Click the menu to open a Browser TAB in the editor. To use this plugin, you must have Google Chrome installed.

Json add “browser-preview. StartUrl “: “http://localhost:8080” to set the default page address.

If you have the Debugger for Chrome plugin installed, write the following configuration in.vscode/launch.json to enable debugging in Browser Preview.

{
  "version": "0.2.0"."configurations": [{"type": "browser-preview"."request": "attach"."name": "Browser Preview: Attach"
    },
    {
      "type": "browser-preview"."request": "launch"."name": "Browser Preview: Launch"."url": "http://localhost:8080"}}]Copy the code

If you press F5 to run debugging, the following error may occur:

Just open a Browser Preview window and run debugging.

21. Switch naming format with one click

Quickly change the case of the current selection or word.

After the installation is complete, run the following command:

  • Change Case Commands: Lists all Change Case Commands, with preview if only one word is selected
  • Change Case Camel: Change Case Camel format, convert the delimiter to a string with the first letter of the next word capitalized
  • Change Case Constant: Converts to uppercase letters and underscores delimited strings
  • Change Case Dot: Convert to lowercase, period-separated string
  • Change Case Kebab: Convert the string to lowercase letters separated by “-“
  • Change Case Lower: Convert to lowercase string
  • Change Case LowerFirst: Converts the first lowercase character string
  • Change Case No: Convert a string without any Case (lowercase letters, space delimited)
  • “Change Case Param” : converted to lowercase characters separated by “-“
  • Change Case Pascal: Hump format with capital letters
  • Change case. Path: Convert to a lowercase, slash-separated string
  • Change Case Sentence: Convert to lowercase (uppercase first word) space-delimited string
  • Change Case Snake: Convert lowercase, underlined strings
  • Change Case Swap: Convert to a string. Each character is uppercase reversed
  • Change Case Title: Convert to a space-separated string, capitalizing the first character of each word
  • Change Case Upper: Converts to uppercase string
  • The extension. ChangeCase. UpperFirst: transformation, led by letter uppercase string

22. Code run

Run Code quickly in VS Code

After Code Runner is installed, the current file/currently selected Code can be run directly. The results of the run are displayed in the Output panel.

Crtl + Alt + N run the code

Ctrl + Alt + M stops running

Ctrl + Alt + L Selects the language in which to run the code

If you want to run TS code, you need to install TS-Node

npm install -g ts-node
Copy the code

Spell check

If words like userInfor,bulid, or chorme appear in your project, you’ll need this plugin. If you don’t understand why I’m saying this, you can’t live without this plugin.

Code Spell Checker is a plugin that checks for spelling errors in Code. All typos in the project are listed in the Problems panel.

But there are some words that we don’t want to give an error, such as web words like readonly. We can add the following Settings to settings.json:

{
    "cSpell.userWords": ["readonly". otherWords] }Copy the code

Of course, you can disable checking by adding comments to the file:

  • /* cSpell:disable */
  • /* spell-checker: disable */
  • /* spellchecker: disable */
  • /* cspell: disable-line */
  • /* cspell: disable-next-line */

Enable check:

  • /* cSpell:enable */
  • /* spell-checker: enable */
  • /* spellchecker: enable */

24. Quick search

Open the default browser in VS Code and search for keywords to edit the search engine.

After the CodeBing plug-in is installed, use the shortcut keys Ctrl + Alt + F to use it. However, to make it easier to use, let’s change the Settings a little:

The first step is to change the shortcut keys. Press Ctrl + K,Ctrl + S to open the shortcut Settings page, search codebing.search and change the key binding to Alt + F (personal habit).

As you can see in the documentation, the author provides the following default configuration, you can modify it if necessary, as for its use, please read down.

{
    "codebing.searchProviders": {
        "b": "https://www.bing.com/search?q={query}"."g": "https://www.google.com/search?q={query}"."yh": "https://search.yahoo.com/search?p={query}"."ddg": "https://duckduckgo.com/?q={query}"."wiki": "https://en.wikipedia.org/wiki/{query}"."yt": "https://www.youtube.com/results?search_query={query}"."twit": "https://twitter.com/search?q={query}"."gh": "Https://github.com/search?utf8= ✓ & q = {query}"."so": "https://stackoverflow.com/search?q={query}"}}Copy the code

Then open settings.json and add the configuration item “codebing.defaultProvider”: “so”, where the value is the shortcut to the search engine configured above.

Can consider to add this configuration: “codebing. NoInputBoxIfTextSelected” : true, means when using search command is the mouse to select text, search box, will no longer be thrown directly search the mouse selected content.

Now you can use it happily:

  • When the text is not selected, press the shortcut keyAlt + F, enter the content in the input box, and press Enter.
  • You can specify the search engine by using a shortcut + space in the input box. For example, type”g vue“Will use Google to search vue.
  • Select a text and press the shortcut key to search for the selected content.

25. Name artifacts

If you have trouble naming, try Codelf.

When you use the Codelf plug-in, you find that the plug-in simply opens the url (Codelf) in the default browser and searches for keywords. So we could have done the same thing by configuring CodeBing without installing the plug-in.

Add the following Settings to settings.json:

{
    "codebing.searchProviders": {
        "c": "https://unbug.github.io/codelf/#{query}"}}Copy the code

Then use the shortcut + space to specify the search engine’s way (for example: enter “C user”) to initiate a Codelf search.

Also, add the following Settings to use baidu Translate:

{
    "codebing.searchProviders": {
        "tec": "https://fanyi.baidu.com/#en/zh/{query}"."tce": "https://fanyi.baidu.com/#zh/en/{query}"}}Copy the code

26. The CSS automatically sorts

Sorting CSS properties makes our code more concise and elegant.

Install the CSScomb plug-in. Add configuration to settings.json:

{
    "csscomb.formatOnSave": true.// Automatic formatting when saving
    "csscomb.preset": "csscomb" // Format the template
}
Copy the code

Be sure to configure “csscomb.preset”, whose default value is {} and plugin use is invalid if not configured. Three different configurations are officially available (Csscomb, Zen, and Yandex), as well as a custom configuration file.

When using the official configuration, I found some problems with typesetting, as shown in the picture below after sorting:

Therefore, the official configuration needs to be modified slightly. Here’s csscomb as an example.

  • First of all to deletesettings.jsonIn the"csscomb.preset": "csscomb"Configure this line and create a new one in the project root directorycsscomb.jsonFile (or you can set it directly"csscomb.preset"For your custom JSON object).
  • Copy the contents of the official profile tocsscomb.json.
  • Modified as follows:
// Change the indentation format+ "block-indent": " ",
- "block-indent": " ",// No line breaks before braces+ "space-before-opening-brace": " ",
- "space-before-opening-brace": "\n",// Insert line breaks between CSS declarations+ "space-between-declarations": "\n",
Copy the code

Then save our CSS file again.

27. File preview

In VS Code, hover your mouse over the file path and click to open the corresponding file in a new TAB. And installedFile PeekAfter, you can open a file preview window, preview the file content, and support file editing.

Place the mouse cursor on the file path and use the shortcut key F12 to open the preview window. Double-click the preview window to open it in a new TAB.

28. vim

Using the Vim plug-in, use Vim in VS Code.

Common configuration (settings.json) :

  1. vim.handleKeysControls whether a key/key combination is handled by the VSCodeVim extension. For example, after enabling the Vim extensionctrl + FThe shortcut keys are replaced with page down. If you want to retain the original search function, you can set this option:
  "vim.handleKeys": {
    "<C-f>": false
}
Copy the code
  1. "vim.startInInsertMode": trueStart in insert mode instead of normal mode.
  2. "vim.visualstar": true 在visualIn mode, press the * key or the # key to search for the currently selected content.
  3. "vim.useSystemClipboard": trueSynchronize the content copied by the Vim plug-in to the system clipboard, for exampleyy.ddCommand.
  4. "vim.hlsearch": trueHighlight all text that matches the current search.
  5. "vim.insertModeKeyBindings"/"vim.normalModeKeyBindings"/"vim.visualModeKeyBindings"Insert/Normal/Visual key bindings.
"vim.insertModeKeyBindings": [
    // In insert mode, press j twice to enter normal mode.
    {
      "before": ["j"."j"]."after": ["<Esc>"]}],"vim.normalModeKeyBindingsNonRecursive": [
    // In normal mode, press the 
      
        key successively, which is equivalent to the dd command (cut the current line).
      
    {
      "before": ["<leader>"."d"]."after": ["d"."d"]}]Copy the code
  1. "vim.leader": "<space>"Customize the <leader> key, default is “\”.
  2. "vim.easymotion": trueEnable the vim-EasyMotion plugin.
  3. "editor.lineNumbers": "relative"Displays the line number as the number of lines separated from the cursor.

29. Statistics on working hours

WakaTime is a plug-in that automatically tracks how long you write code. Once installed, go to wakatime.com to create an account, copy your Secret API Key in Settings – Accounts, go back to VS Code, press F1 to search for WakaTime: API Key, and type Secret API Key to save. Visit wakatime.com/dashboard for a statistical chart.

30. View the CSS definition

CSS Peek, tracing to the CSS class and ID definitions in the stylesheet.

31. Class smart tips

HTML CSS Support allows classes to be written on HTML tags and intelligently indicate which styles are supported by the current project.

32. Modify the NAME of the HTML tag

Auto Rename Tag Automatically modifies the label on the other side. You can change the value in files such as.vue.js. md.

33. Package labels

Wrap a layer of HTML tags (p tags by default, configurable) around the selected text.

Install the htmltagWrap plugin and create an outer tag by selecting the text and using Alt + W. If you do not want to use the default p tag, change the configuration: “htmLTagwrap. tag”: “p”.

34. JS code refactoring

When editing code in JavaScript (or TypeScript/Flow),JavaScript BoosterProvides various code actions (quick fixes).

File – Preferences – Keyboard Shortcuts – search editor.action.quickFix and configure it to your preferred shortcut.

35. The jsdoc annotations

One-click generation of jsDoc-style function comments.

After the jsdoc plugin is installed, select a function parameter, CTRL + Shift + P, type Gen jsdoc and select Gen jsdoc to generate jsDoc-style function comments.

File – Preferences – Keyboard Shortcuts – search extension.genjsdoc and configure it to your preferred shortcut.

Add configuration “jsdoc.author”: “author” to set @author to your name.

36. Jsdoc preview

Preview jSDoc-based documents in your browser.

To install the Preview JSDOC plug-in, type Preview JSDOC after CTRL + Shift + P and select the Preview JSDOC: Open Browser command.

37. open in browser

Open the page file in your browser.

Install the Open in Browser plug-in, open the page file, use the shortcut key Alt + B to open the current page in the default browser, Shift + Alt + B to open the browser.

38. Interface test

REST ClientAllows you to send an HTTP request and view the response directly in VS Code.

After installing the plugin, create a new.http or.rest file, and write your Request code by clicking Send Request, right-clicking Send Request, or using the shortcut keys Ctrl + Alt + R.

After sending the request, Waiting state will be displayed in the bottom status bar. Click Waiting to terminate the request.

Multiple requests in the same file are separated by ###.

  • Send a request (note how the content-Type parameters are passed) :

    GET http://dummy.restapiexample.com/api/v1/employees HTTP / 1.1
Content-Type: application/json
Copy the code
    POST http://dummy.restapiexample.com/api/v1/create HTTP / 1.1
Content-Type: application/json

{
  "name": "seyin"."age": "26"
}
Copy the code
    POST http://api.apishop.net/common/disease/queryDiseaseListByKeyword
Content-Type: Application/x - WWW - form - urlencoded apiKey = HSE5UZLe81xxxxxxxxxxxxxxxxxxx49bb4c46c5ae89963 & page = 1 & pageSize = 10 & keyword = coldCopy the code
    POST https://example.com/comments HTTP / 1.1
Content-Type: application/xml
Authorization: token xxx

< C:\Users\Default\Desktop\demo.xml
Copy the code

  • variable

    • The environment variable

      Set environment variables in settings.json:

      {
  "rest-client.environmentVariables": {
    "$shared": {},
    "local": {
      "host": "http://localhost:8080"."token": "test token"
    },
    "prod": {
      "host": "http://dummy.restapiexample.com"."token": "prod token"}}}Copy the code

      Use the shortcut keys Ctrl + Alt + E to switch between different environments.

      Using environment variables:

      GET {{host}}/api/v1/employees HTTP / 1.1
Content-Type: application/json
Copy the code

    • File variable

      The declaration mode is @key = value and the usage mode is {{key}}. And like JS there is variable promotion.

      @baseurl = {{host}}/ API /v1 @contentType = application/json @name = seyin @age = 26 ### API TEST #POST {{baseUrl}}/create HTTP / 1.1
content-type: {{contentType}}

{
  "name": "{{name}}"."age": "{{age}}"
}
Copy the code

    • Request variable

      RequestName specifies the name of a Request. Use for {{requestName. (the response | request). (the body | headers). (* | JSONPath | XPath | Header Name)}}.

      @baseurl = {{host}}/ API /v1 @contentType = application/json @name = seyin @age = 26 ### createUserPOST {{baseUrl}}/create HTTP / 1.1
content-type: {{contentType}}

{ "name": "{{name}}", "age": "{{age}}} ### delete the created user @id ={{createUser.response.body.data.id}}
DELETE {{baseUrl}}/delete/{{id}}HTTP / 1.1Copy the code

    • System variables

      System variables provide a set of predefined variables in the format {{$variableName}}. Some commonly used system variables are listed here. See the official documentation for more information.

      • {{$GUID}} Unique identifier
      • {{$dotenv [%] variableName}} to return.httpFiles in the same directory.envThe value of the environment variable in the file (declared asvariableName = value)
      • {{$randomInt min Max}} returns a random integer between min (inclusive) and Max (exclusive)
      • {{timestamp [offset option]}} Adds the UTC timestamp. You can even specify any date and time based on the current time in the format {{\timestamp number option}}, for example, to represent 3 hours ago, just {{$timestamp -3 h}}; {{$timestamp 2d}}
      • {{datetime rfc1123 | iso8601 | “the custom format” | ‘custom format [offset option]}} add iso8601, rfc1123 or custom display format of date/time string. You can even specify a date-time relative to the current date, similar to a timestamp, for example: {{\datetime ISO8601 1 y}}, representing a date in iso8601 format one year from now. If the custom format is specified, use single or double quotation marks, for example: {{$datetime “DD-MM-YYYY” 1 y}}. The date is formatted using day.js.
      POST {{baseUrl}}/create HTTP / 1.1
content-type: application/json

{ "name": "{{$dotenv USERNAME}}", "guid": "{{$guid}}", "age": "{{$randomInt 10 30}}", "date": "{{$datetime iso8601 1 y}}"}Copy the code

  • cURL Request

    The REST Client can send a cURL Request or convert an RFC 2616 Request to the cURL format (right-click Copy Request As cURL).

    curl --request POST --url http://api.apishop.net/common/disease/queryDiseaseListByKeyword --header 'content-type: application/x-www-form-urlencoded' --header 'user-agent: Vscode -restClient '--data page=1 --data pageSize=10 --data 'keyword= keyword'Copy the code
    • -X, –request
    • -L, –location, –url
    • -H, –header(no @ support)
    • -I, –head
    • -b, –cookie(no cookie jar file support)
    • -u, –user(Basic auth support only)
    • -d, –data, –data-ascii,–data-binary

  • Generate snippets

    When the cursor is over a request, right-click and select Generate Code Snippet or use the shortcut Ctrl + Alt + C to Generate a Snippet of the current request. Support for multiple languages.

39. TODO management

Search for and highlight comment labels (such as TODO and FIXME) in the workspace, and manage comment labels in the project in the active bar TODOs window.

The installationTodo TreePlugin, the initial Settings will look like this:

Custom Settings:

{
  "todo-tree.highlights.customHighlight": { // Set styles for each label
    "TODO": {
      "icon": "tasklist"./ / icon
      "foreground": "#ff8c00".// Text color
      "background": "transparant".// Background color
      "iconColour": "#ff8c00" // Icon color
    },
    "FIXME": {
      "icon": "alert"."foreground": "white"."background": "#FF2D00"."iconColour": "#FF2D00"
    },
    "BUG": {
      "icon": "bug"."foreground": "white"."background": "#FF2D00"."iconColour": "#FF2D00"
    },
    "NOTE": {
      "icon": "note"."foreground": "#98c379"."background": "transparant"."iconColour": "#98c379"
    },
    "HACK": {
      "icon": "beaker"."iconColour": "#abb2bf"
    },
    "XXX": {
      "icon": "question"."foreground": "#3498DB"."background": "transparant"."iconColour": "#3498DB"}},"todo-tree.highlights.defaultHighlight": { // Global style configuration
    "type": "text" // Highlight the type tag text tag-and-comment text-and-comment line whole-line
  },
  "todo-tree.general.statusBar": "current file".// What to display in the status bar - None, total (total), count for each tag (tags), count for the first three tags (first three) or count for the current file only (current file).
  "todo-tree.general.tagGroups": { // Alias group
    "FIXME": [ / / sets the multiple tags to the same group, Shared todo - tree. Highlights. CustomHighlight style
      "FIXME"."FIX" // The custom tags must be configured in todo-tree.general.tags]},"todo-tree.general.tags": [ // The tag name that the plug-in matches
    "XXX".// The code at the identifier implements the function, but the implementation method is questionable.
    "TODO".// Indicates that the code is not complete. It should include what to do next.
    "NOTE".// Describe how the code works.
    "HACK".// indicates that the code implementation took a shortcut. Include a reason for using a hack. It may also indicate that there may be a better solution to the problem.
    "FIXME".// Indicate that the code is faulty and should be fixed as soon as possible.
    "FIX"."BUG" // BUG]."todo-tree.regex.regex": "(\\s*\\*\\s*|\\s*\/\/\\s*|\\s*<! --\\s*)($TAGS).*" // Matches the re, which needs to be modified to match the tag names in multi-line comments
}
Copy the code

The effect is as follows:

40. Draw a flow chart

Draw.io IntegrationThe plugin willDraw.ioIntegrate into VS Code.

After installing the plug-in, you can edit.drawio,.dio,.drawio.svg, or.drawio.png files in VS Code.

IO: Convert To… Command to convert file formats.

41. Send an email

useMJMLThe plugin edits/sends email in VS Code.

MJMJ can send mail based on Nodemailer or Mailjet. Here Nodemailer is used as an example configuration and QQ mailbox is used as the outbox.

{
  "mjml.mailFromName": "seyin"./ / the sender
  "mjml.mailSender": "[email protected]".// The sender's email address must be the same as the login email address
  "mjml.nodemailer": { / / Nodemailer configuration
    "host": "smtp.qq.com"."port": 465."secure": true."auth": {
      "user": "[email protected]".// Same as sender's email
      "pass": "xxxxxxxx"}},"mjml.mailRecipients": "[email protected]".// The default recipient
  "mjml.mailer": "nodemailer" // Use Nodemailer or Mailjet to send mail
}
Copy the code

What is the host port in nodemailer configuration? , login QQ mailbox webpage version, open the Settings -> account, findYou can operate according to the official documents. The other mailboxes are similar.

Add the following configuration to settings.json to use Emmet functionality:

{
	"emmet.includeLanguages": {
        "mjml": "html". otherLanguages } }Copy the code

After the configuration is complete, write your.mjml file and use the command MJML: Send Email to successfully Send the Email.

Click here for the official documentation on MJML syntax.

Here is a simple weekly template:

<! -- header.mjml -->
<mj-style>
  .done {
    color: #98c379;
  }

  .doing {
    color: #ff8c00;
  }

  .text-content {
    letter-spacing: 1px;
    line-height: 2;
  }

  .text-bold {
    font-weight: bold;
  }

  .first-line td {
    border-top: 1px solid #eee;
  }

  .line td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 12px;
    padding-right: 0;
  }

  .line td:nth-child(1) {
    border-left: 1px solid #eee;
  }
</mj-style>
Copy the code
<! -- mail.mjml -->
<mjml>
  <mj-head>
    <mj-include path="./header.mjml" />
  </mj-head>
  <mj-body background-color="#F4F4F4" color="#55575d" font-family="Arial, sans-serif">
    <mj-section background-url="https://s1.ax1x.com/2020/08/03/aa9BVS.png" background-size="cover" background-repeat="no-repeat">
      <mj-column width="600px">
        <mj-image align="center" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/168e09c2212512f820f~tplv-t2oaga2asx-image.image" width="50px" height="50px" border-radius="50px" padding="10px 0 0 14px" border="1px solid white" />
      </mj-column>
      <mj-column>
        <mj-text align="center" font-size="20px" font-weight="bold" color="white" font-family="Helvetica Neue">
          TeamSecret
        </mj-text>
        <mj-text align="center" font-size="12px" color="white" font-family="Helvetica Neue">Front-end Development Engineer</mj-text>
      </mj-column>
    </mj-section>
    <mj-divider border-color="#f4f4f4"></mj-divider>
    <mj-section background-color="#fff" background-repeat="no-repeat">
      <mj-column width="100%">
        <mj-table>
          <tr class="first-line line">
            <td class="text-bold">The project name</td>
            <td>XXXX Management System</td>
            <td class="text-bold">The project schedule</td>
            <td colspan="3">System design stage</td>
          </tr>
          <tr class="line">
            <td class="text-bold">head</td>
            <td>Zhang SAN</td>
            <td class="text-bold">Commencement date</td>
            <td colspan="3">2020/02/20-2020/02/20</td>
          </tr>
        </mj-table>
        <mj-table>
          <tr class="line first-line">
            <td align="center" class="text-bold" colspan="6">Work Contents of this week</td>
          </tr>
          <tr class="line">
            <td class="text-bold">Project/System</td>
            <td class="text-bold" colspan="4">Job content</td>
            <td class="text-bold">completion</td>
          </tr>
          <tr class="line">
            <td rowspan="2">XXXX system</td>
            <td class="done" colspan="4">xxxxxxxxxxxx</td>
            <td>Has been completed</td>
          </tr>
          <tr class="line">
            <td class="doing" colspan="4">xxxxxxxxxxxxxx</td>
            <td>80%</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">Uncompleted items and reasons</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">Major problems affecting the progress of the work, suggested measures</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
        </mj-table>
        <mj-table>
          <tr class="first-line line">
            <td align="center" class="text-bold" colspan="6">Work Plan for next week</td>
          </tr>
          <tr class="line">
            <td class="text-bold">Project/System</td>
            <td class="text-bold" colspan="2">Job content</td>
            <td class="text-bold">Project Commencement Date</td>
            <td class="text-bold">Scheduled completion date</td>
            <td class="text-bold">Need to cooperate with department/personnel</td>
          </tr>
          <tr class="line">
            <td>XXXX system</td>
            <td colspan="2">Work plan Work plan Work plan work plan</td>
            <td>2020/02/20</td>
            <td>2020/02/20</td>
            <td>Zhang SAN</td>
          </tr>
          <tr class="line">
            <td align="center" class="text-bold" colspan="6">Note for</td>
          </tr>
          <tr class="line">
            <td colspan="6">&nbsp;</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Copy the code

42. Set synchronization

VS Code Settings, plug-ins, snippet synchronization on different machines.

Typically, VS Code configuration synchronization requires a third-party Settings Sync plugin and github account. There is now a built-in configuration synchronization feature in VS Code Insiders (Preview) that allows you to synchronize multiple machines using your Microsoft account or GitHub account. Looking forward to updates soon

Using plug-ins:After installing the plug-in, use the shortcut keysShift + Alt + UUpload Settings, if you are using it for the first time, will bring up a welcome page, click on the pageLOGIN WITH GITHUBButton. The browser will be opened. Enter your GitHub account to log in and complete authorization. Then go back to VS Code and the plugin has read your Gist. It doesn’t matter whether you have it or not. Click SKIP to create a new GistId and press the shortcut button againShift + Alt + UYou can upload the configuration to your GitHub account. Use shortcut keysShift + Alt + DDownload the remote configuration to the local PC.

In the latest VS Code Insiders Preview, there is a built-in synchronization set. Just click on the Settings icon at the bottom of the Activity bar and click Turn on Setting Sync… Then follow the prompts to log into your GitHub or Microsoft account.