This article is based on the VS Code plugin and configuration for the React project. It was written in 2018, and the Project team has been developing React for more than two years now. It is time to update the Visual Studio Code plugin usage documentation. The purpose of this article is to be practical. In line with the principle of no fuss, we only select plugins, themes and fonts that are easy to use when developing the React project. We also welcome students to recommend useful efficiency tools.

Tips for installing VS Code for Windows

During the installation, it is recommended to check the two red options in the following figure, so that after the installation is successful, you can directly use VS Code to open the folder or file with the right mouse button, which is very convenient.

If you do not check these two options when installing, will you have to reinstall VS Code to use this feature? Of course not, see this article: Add VS Code to the right click menu by modifying the registry.

Offline installation of VS Code plug-ins

Due to the soft opening in the bank, the development can only be carried out on the Intranet at ordinary times, so the offline installation of the plug-in needs to be considered. By referring to the simple offline installation method of VSCode plug-in, I found that the official has provided the online download function of the plug-in very kindly. There are altogether 3 steps:

  • Go to the Visual Studio Marketplace and search for the plug-ins you need
  • Click On Download Extension to Download.vsixFormat file
  • To visually install the VS Code plug-in, click on the left EXTENSION menu and click… Button to select “Install from VSIX…” Can be installed.

Another help is how to download an offline plug-in that matches the VS Code version. The development environment of the project is on the Intranet, so the VS Code version can only be fixed to a certain version. However, the offline download packages of plug-ins provided in the plug-in market are corresponding to the latest VS Code version. How can I download the offline plug-ins of the specified VERSION of VS Code?

Update 2020-12-03, find the method to Download the specified version of the plug-in, you can view the Download Extension request URL, The current is https://marketplace.visualstudio.com/_apis/public/gallery/publishers/${publisher_name}/vsextensions/${extension_name}/${ Version}/vspackage can download the specified version by checking the Changelog of the plug-in, but the relationship between the plug-in version and VS Code version can only be checked by time at present, I wonder if there is a more convenient method.

3. Appearance configuration

VS Code’s default look is definitely not pretty, so here are two favorite themes.

Default theme and font preview:

1. Color matching theme:

  • # 1 VS Code theme plugin downloaded: One Dark Pro
  • Personal favorite Theme: Material Theme, select Material Theme Palenight High Contrast

2. Material Icon Theme

  • The second most downloaded Icon plugin personally feels a little better than vs Code-icons, which is number one

3. English font: FiraCode

  • See Fira Code for the installation: fonts designed for programming
  • A recommended website for testing various Programming Fonts online is Programming Fonts

4, Chinese font: Siyuan bold

  • See Fira Code for the installation: fonts designed for programming

The final configuration is as follows:

    "workbench.colorTheme": "Material Theme Palenight"."workbench.iconTheme": "material-icon-theme"."editor.fontFamily":  "'Fira Code','Source Han Sans CN'".// Set the font type to Fira Code and Source bold
    "editor.fontLigatures": true.// Controls whether font hyphen is enabled
    "editor.fontSize": 16./ / size
    "editor.lineHeight": 24./ / line height
    "editor.fontWeight": "500"./ / word
    "editor.minimap.enabled": false.// Do not display the right preview map
    "editor.renderIndentGuides": false.// Do not display indent guides
    "editor.rulers": [120].// Displays the vertical ruler after a certain number of equal width characters. Enter multiple values to display multiple rulers. If the array is empty, no ruler is drawn.
    "editor.wordWrap": "on".// wrap
Copy the code

One Dark Pro Preview:

Material Theme Palenight High Contrast

4. Practical plug-ins

  • Chinese (Simplified) Language Pack for Visual Studio Code:

    • Chinese (Simplified) language pack for VS Code
    • Students who are good at English do not need to install this plug-in

  • ESLint:

    • Using ESLint for code checking is a must for this plugin
    • After installation, you can see that an ESLint Server is started on Node

  • Prettier:

    • Formatting plugin (Opinionated) is a representation of the formatting tool. Be less Opinionated and just follow its conventions
    • Supported languages: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML
    • You can use ESLint or StyleLint for details

  • GitLens:

    • Enhanced VS Code’s built-in Git functionality
    • This plug-in is a must for projects hosted using Git

  • Debugger for Chrome:

    • Vscode-js-debug has been merged
    • Built in since VS Code version 1.46

  • The Path Intellisense:

    • Automatic path completion plug-in
    • Although VS Code has its own auto-complete path function, there is no problem with HTML files, but some files in JSX can not be intelligent prompt (such as img SRC in JSX), this plugin is very useful, relative path absolute path is not a problem

  • JSON Tools

    • Formatting JSON is easy with just two shortcuts: Format JSONCtrl(Cmd)+Alt+MJSON, compressionAlt+M

  • IntelliSense for CSS class names in HTML

    • CSS intelligent prompt plug-in
    • This plug-in is already supportedclassName 和 class (TypeScript React, JavaScript and JavaScript React language modes)
    • The CSS Module intelligent prompt is not supported

  • CSS Modules:

    • CSS Module Intelligent information
    • IntelliSense for CSS Class Names in HTML does not support CSS Module IntelliSense
    • You can automatically complete the CSS and go to the defined position

  • Bracket Pair Colorizer 2:

    • The bracket color matching plugin, which has been upgraded to version 2, uses the same VS Code bracket analysis engine for faster and more accurate analysis
    • Use color to match parentheses

  • Bookmarks:

    • Bookmarking commonly used locations can greatly increase productivity
    • Shortcut keys: Ctrl + Alt + K/Commond + Option + K

  • CodeSnap:

    • Simple and quick generation of beautiful code screenshots, highly recommended

  • Tabnine Autocomplete AI:

    • Use AI to auto-complete the code and prompt, with a period of time, according to the habit of completing the code is still very sweet
    • It can also be used offline

Five, about formatting

ESLint + Prettier should be standard, the configuration will be in the next article.

The Webpack alias cannot jump to the corresponding file in VS Code

Create a jsconfig.json file in the project root directory, such as @src alias configured in webpack:

{
  "compilerOptions": {
    "baseUrl": "."."paths": {
      "@src/*": ["./src/*"]}}}Copy the code

Refer to the link

  • Powerful VS Code
  • Simple VSCode plug-in offline installation method
  • Fira Code — Fonts designed for programming