Recently using VS Code to develop React, this article notes some of the VS Code plug-ins used and how to install them offline.

Tips for installing VS Code on Windows

When installing, it is recommended to check the two options shown in the figure, so that the folder or file can be opened directly with VS Code, which is very convenient.

Offline installation of VS Code plug-ins

The development of Intranet environment needs to consider the offline development of plug-ins. After referring to the simple offline installation method of VSCode plug-ins, I found that the official has provided a very thoughtful way to download plug-ins. It is summed up in three steps:

  • Go to VS Code Market and search for the plugins you need
  • Click On Download Extension.vsixFormat file
  • Environment variables are configured when YOU install VS Code and executed in the consolecode --install-extension your-extension-name.vsixYou can install

Click on the EXTENSION menu on the left and click… Button, select “Install from VSIX…” Can be installed.

Some useful plug-ins

  • Chinese (Simplified) language pack for VS Code:
    • English (Simplified) Language Pack for Visual Studio Code
    • Good English students can not install this plug-in
  • One of the most downloaded VS Code theme plug-ins: One Dark Pro
    • Address: One Dark Pro
  • ESLint:
    • Address: ESLint
  • The Debugger for Chrome:
    • Debugger for Chrome
    • We can interrupt just like WebStorm
  • The Path auto-completion plug-in is Path Intellisense
    • Address: Path Intellisense
    • Although VS Code comes with automatic path completion, HTML files are fine, but there are some files in JSX (such as IMG and SRC in JSX) that cannot be intelligent prompted. This plugin works well, relative and absolute paths are fine
  • JSON tool: JSON Tools
    • Address: JSON Tools
    • Formatting JSON is easy, just two shortcuts: Format JSONCtrl(Cmd)+Alt+MJSON, compressionAlt+M
  • IntelliSense for CSS class names in HTML
    • Address: IntelliSense for CSS class names in HTML
    • This plug-in is already supportedclassName 和 class (TypeScript React, JavaScript and JavaScript React language modes)
    • The CSS Module intelligent prompt is not supported
  • CSS Module intelligent prompt
    • Address: CSS Modules
    • IntelliSense for CSS Class Names in HTML does not support IntelliSense for CSS Class Names in HTML
    • You can realize the CSS auto-complete, go to the definition position
  • Bracket color: Bracket Pair Colorizer
    • Address: Bracket Pair Colorizer
    • Use color to match parentheses
  • Bookmarks
    • Address: Bookmarks
    • Adding commonly used locations to your bookmarks can greatly improve your productivity
  • React/Redux/react-router Snippets
    • Address: React/Redux/ React – Router Snippets
    • React code section, after familiar with very convenient

Emmet is used in JSX for quick completion tags

  • VS Code comes with Emmet, which automatically completes tags in HTML files
  • Want to completionreactFor the JSX tag in the file, you need to add the Emmet setting to the user Settings:
{... // Enable Emmet abbreviations in languages that do not support Emmet by default. Add the mapping between the language and the supported languages here. // Example: {"vue-html": "html"."javascript": "javascriptreact"}
    "emmet.includeLanguages": {"javascript": "javascriptreact"}, // When enabled, press TAB to expand the Emmet abbreviation."emmet.triggerExpansionOnTab": true. }Copy the code
  • Among thememmet.triggerExpansionOnTabConfigured totrueYou can use the TAB key to auto-complete the component label
  • Can automatically setclasstoclassNameVery convenient,

About Formatting plug-ins

“Prettier” and “Beautify” don’t always work for Prettier and Beautify because they mess up JSX formatting in react.

The resources

  • Powerful VS Code
  • Simple offline installation method of VSCode plug-in