Part1 preface

I will share some of the front-end plugins I am using, but I use webStorm a lot. I will introduce my webStorm plugins later.

Part2 Coding is practical

This section focuses on general-purpose plug-ins that make writing code more efficient.

  • Bracket Pair Colorizer

    Add different colors to the brackets to make it easier to distinguish between blocks. Users can define different bracket types and different colors

    BorderBackground

  • Auto Close Tag (Mandatory)

    Automatically close HTML/XML tags

  • Auto Rename Tag (Required)

    The label on the other side is automatically synchronized

  • Path Intellisense (recommended)

    File path completion

Part3 Test deployment

This part of the plug-in is mainly used for ordinary debugging, deployment configuration assistance.

  • Live Server(Required)

    Lightweight Web server that can run and load HTML files directly on port 5500

  • Code Runner(Required)

    You can right click run Script and other operations to quickly run script debugging

  • NGINX Configuration Language Support

    If dealing with nginx configuration files is unavoidable, it can give you hints and completion.

  • Debugger for Chrome

    Map breakpoints on vscode to chrome for easy debugging

Part4 CSS commonly used

A plug-in for CSS assistance.

  • Easy LESS

    Write less files and automatically compile CSS files when saving

  • Px to REM & RPX (CSSREM)

    Px is converted to REM

  • CSS Tree (recommended)

    Generates a CSS tree from the selected HTML/JSX

  • CSS Peek (recommended)

    When viewing a DOM element, you can quickly see its CSS style based on its ID and class

Part5 js common

Mainly used for JS auxiliary plug-ins.

  • JQuery Code Snippets (required)

Smart tips for jQuery code

  • JavaScript (ES6) Code Snippets (mandatory)

    Es6 code snippets, quick completion

  • Sass/Less/Stylus/Javascript/Jade/Typescript/Compile relation (essential)

    Easily compiles ts, TSX, SCSS, less, Stylus, JADE, PUG and ES6 +, automatically compiles when saved

  • IntelliSense for CSS Class Names in HTML (recommended)

    It provides CSS class name completion for HTML class attributes based on definitions in the workspace or external files referenced through the link element

Part6 React development

  • React-Native/React/Redux snippets for ES6 / ES7

    React-Native/React/Redux code snippets, help you quickly complete

  • React Native Tools

    React Native debugging and integration commands

  • Typescript React Code Snippets

    This extension contains snippets of React with Typescript code

Part7 Vue development

  • Vetur (required)

    A must-have VUE development plug-in! Syntax highlighting, intellisense, Emmet and more.

  • Vue (Required)

    Vue code highlights

  • Vue 3 Snippets (required)

    This plugin adds Code Snippets based on the latest Vue 2 and Vue 3 apis.

    img

  • Element UI Snippets (mandatory)

    A snippet of elements -UI for Vue2

Part8 Small program development

  • Minapp (required)

    Smart completion of wechat applet tags and attributes (supports native applet, MPvue and WEpy frameworks with snippets)

  • Wechat – snippet (recommended)

    Wechat small program code assistance, code fragments completed automatically

Part9 Client front-end

I have done very little on the client front end, so far I have only installed a Flutter.

  • Flutter (recommended)

    Must write about flutter, that’s all I can say.

Part10 code layout review

Here is a plug-in for the web front-end’s more common layout and code review.

  • Beautify (required)

    One-click typesetting beautifies HTML, JS and CSS

  • ESLint (required)

    The importance of ESLint as a frontend goes beyond stating that it is a great code specification and error checking tool

  • Prettier (essential)

    It enforces a consistent style by parsing your code and reprinting it with its own rules that take maximum line length into account and wrap the code when necessary. Provides typesetting support for front-end files in various formats.

Part11 package management

My package management tools mainly use NPM, and plug-ins are mainly used to support NPM.

  • NPM (Required)

    This extension supports running NPM scripts defined in package.json files and validating installed modules against dependencies defined in package.json.

  • NPM Intellisense (required)

    The Visual Studio Code plug-in that automatically completes the NPM module in the import statement.

Part12 vscode beautification

The compiler looks good, and you’ll feel better when writing code

  • Background (recommended)

    Custom background yo, if you are fat nerds, some two-dimensional background is very normal things

  • Material Icon Theme (recommended)

    I think it’s a pretty icon style

This article uses the article synchronization assistant to synchronize