2021 vscode front end plug-in recommendation

The wind knows no way 2021-10-14 05:46:59
vscode end plug-in plug recommendation


2021 VSCode Front end plug-ins recommend

Preface

Recommend a wave of necessary plug-ins for front-end development , It can definitely improve your productivity , The rest of the time to mo fish , Beauty is not true

Develop comprehensive recommendations

Alias path jump

The plugin name : Alias path jump

Instructions : Alias path jump plug-in , Support any project ,

Use scenarios : When you're developing a page , Want to click When importing components from alias paths ( The demonstration is as follows )

Configuration instructions

  • After downloading, you only need to customize and configure some commonly used alias paths

    • Right click the plug-in --》 Extended settings --》 Path mapping in settinas.json Editor in chief
    // File name alias jump
    "alias-skip.mappings": {
    "~@/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"
    },

Effect display

test01

Path alias smart tip

Installation effect and function

img

img

indent-rainbow

  • The plugin name : indent-rainbow
  • function : Rainbow indent

image-20211001221922170

Bracket Pair Colorizer 2

  • The plugin name : Bracket Pair Colorizer 2
  • function : Give matching parentheses () perhaps object {}.. Add the corresponding color to distinguish

Screenshot

Auto Rename Tag

  • The plugin name : Auto Rename Tag
  • function : Automatically rename tags

test02

Code Spell Checker

  • The plugin name :Code Spell Checker
  • function : Check the spelling of words ( Support English )

image-20211001222515014

Code Runner

  • The plugin name :Code Runner
  • function : One click execution of various language codes ( Used to test )

test03.gif

Debugger for Chrome

  • The plugin name :Debugger for Chrome
  • function : stay VSCode End , Debugging code

image-20211001223256342

Live ServerPP

  • The plugin name :Live ServerPP
  • function : Open your file on the server , Display your modified code in real time

    • Support websocket Message service , It can be used for debugging websocket client
    • Support programmable virtual files , It can be used to simulate the server API Interface

Live Server Demo VSCode

Svg Preview

  • The plugin name :Svg Preview
  • function : Can show your SVG picture , You can also edit

demo

Tabnine

  • The plugin name :Tabnine
  • function : Smart prompt code , You can predict the code you will write and prompt

test04.gif

Template String Converter

  • The plugin name :Template String Converter
  • function : Enter... In the string $ Trigger , Convert string to template string

typing a dollar sign then open curly brace within a string converts the quotes to backticks

vscode-pigments

  • The plugin name :vscode-pigments
  • function : Real time preview of the set color

 preview

Parameter Hints

  • The plugin name :Parameter Hints
  • function : Prompt the parameter type and message of the function

image-20211001225347827

Quokka.js

  • The plugin name :Quokka.js
  • Use : After installing the plug-in ,ctrl+shift+p Input Quokka new JavaScr.. You can use
  • function : Real time display of printouts , Explore more features on your own ( Used to test )

test05.gif

Highlight Matching Tag

  • The plugin name :Highlight Matching Tag
  • function : When the cursor is over the label , Highlight the matching label

image-20211002094809502

Popular plug-ins

  • They are basically installed, so I won't introduce them in detail

plug-in unit

  • Bookmarks

    • function : It is often used to read the source code and mark the line , Jump ( Code mark quick jump )
  • ESLint

    • function : Code specification check
  • Prettier - Code formatter

    • function : Code beautification , Automatically format to canonical format
  • Project Manager

    • function : Project management plug in , When developing multiple projects , Can jump quickly
  • Path Intellisense

    • function : Path intelligent prompt
  • Image preview

    • function : When the import path is a picture , You can preview the current picture
  • GitLens

    • function : Enhanced git function , Support in VSCode Check out the author 、 Change the time and so on
  • open in browser

    • function : Open the current file in the browser

Vue Development recommendation

vue-component

  • The plugin name :vue-component
  • function : Enter the component name to automatically import the found components , Automatically import paths and components

    • When selected, automatically enter the component name ( Contains required attributes )、import sentence 、components attribute

img

img

img

Vetur

  • The plugin name :Vetur
  • Development Vue necessary

Vue 3 Snippets

  • The plugin name :Vue 3 Snippets
  • Basic necessities : quite a lot Vue Code segment , It's easy to develop

React Development recommendation

React Style Helper

  • The plugin name :React Style Helper
  • function : stay React Write inline styles faster in , Also on CSS、LESS、SASS And other style files provide powerful auxiliary development functions

    • Automatic completion
    • Jump to the style and variable definition location
    • establish JSX/TSX In line styles for
    • Preview style and variable content

demo

  • In line style auto completion , Support at the same time SASS Jump and preview of variables .

demo

ES7 Reactsnippets

  • The plugin name :ES7 React/Redux/React-Native/JS snippets
  • function : quite a lot React Code segment , It's easy to develop

vscode-styled-components

  • The plugin name :vscode-styled-components
  • function : stay JS When writing styles in a file , There are smart tips

image-20211002093516003

Theme class

Dracula Official

  • The plugin name :vscode-styled-components

image-20211002093806553

One Dark Pro

  • The plugin name :One Dark Pro

image-20211002093922498

vscode-icons

  • The plugin name :vscode-icons
  • VSCode Folder & File Icon

image-20211002094123650

Other recommendations

  • The following plug-ins , May not be commonly used , If you are interested, you can try

CSS Initial Value

  • The plugin name :vscode-icons
  • function : Show each CSS The initial value of the property , When the cursor stops at css Attribute

image-20211002095626877

Sketchpad drawing

  • The plugin name :Draw.io Integration
  • function : stay VSCode Chinese painting , Support multi person collaborative editing of charts ..

img

Echars Smart prompt plug-in

  • The plugin name :echarts-vscode-extension
  • Use : After installing the plug-in ,ctrl+shift+p Input active Echars You can turn on the smart prompt
  • function : Prompt all kinds of Echar in Option Properties of , It's powerful

test06.gif

Translation plug-ins

  • The plugin name :A-super-translate
  • Usage method : Select row ,Ctrl+Shift+p Input translate

    • type ctrl+` Then press the ctrl+1 Replace the selected area directly for translation
  • function : The comment part of the translation identification code , Do not interfere with reading . Support different languages , A single 、 Multiline comment 、

    • Support user string and variable translation , Support hump splitting

Introduction

Introduction

summary ( Attach all plug-in pictures )

  • According to the demand , You can install the corresponding plug-ins ( Too many plug-ins installed ,VSCode It is too laggy. )
  • Of course, the computer configuration is powerful enough , When I didn't say

image-20211002103141474

版权声明
本文为[The wind knows no way]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211002145413036G.html

  1. Html + CSS + JS implémentation ️ Responsive Lucky Turnover ️ [with full source Sharing]
  2. Ren Jialun, who married young, was in a mess. Now she feels that it is a blessing in disguise
  3. 达梦数据库使用disql生成html格式的巡检报告
  4. React render phase parsing II - beginwork process
  5. Tableau linéaire de la structure des données (dessin à la main)
  6. In 2022, what are the highlights and popular elements in skirts to make skirts more elegant and gentle?
  7. JQuery installation
  8. Exemple de développement Android, dernière compilation de questions d'entrevue Android
  9. Differences and relations between JDK, JRE and JVM, nginx architecture diagram
  10. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  11. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  12. Questions d'entrevue pour les ingénieurs en développement Android, Android Foundation 72 questions
  13. It's kind of Cadillac CT6 to have a Mercedes Benz S-class captain and a 10At entry-level configuration, falling to less than 300000
  14. H6 meets the strong enemy again! The car body has a Cayenne visual sense, breaking 8.8 seconds, and the top configuration is less than 130000
  15. How nginx supports HTTPS and Linux kernel video tutorial
  16. Le martyr se réjouit de sa vieillesse Audi R8 V10 performance Rwd
  17. import 方式隨意互轉,感受 babel 插件的威力
  18. Le mode d'importation peut se déplacer librement pour sentir la puissance du plug - in Babel
  19. Pas de héros en termes de ventes!Du point de vue de la force du produit, la nouvelle version ax7 Mach est plus forte que H6
  20. The vue3 + TS project introduces vant as needed
  21. 深入浅出虚拟 DOM 和 Diff 算法,及 Vue2 与 Vue3 中的区别
  22. 深入淺出虛擬 DOM 和 Diff 算法,及 Vue2 與 Vue3 中的區別
  23. Explorer les algorithmes DOM et diff virtuels et les différences entre vue2 et vue3
  24. 两万字Vue基础知识总结,小白零基础入门,跟着路线走,不迷路(建议收藏)
  25. Résumé des connaissances de base de 20 000 mots vue, Introduction à la petite base blanche zéro, suivre la route et ne pas se perdre (Collection recommandée)
  26. 兩萬字Vue基礎知識總結,小白零基礎入門,跟著路線走,不迷路(建議收藏)
  27. "Talk show conference 4" Zhou qimo a remporté le championnat. Tout le monde l'admire. Il est mature et stable et a une vue d'ensemble
  28. Test logiciel entrevue non technique questions classiques - mise à jour continue!
  29. Digital forward disassembly reverse disassembly
  30. Analyse du cache distribué redis et essence de l'entrevue en usine v6.2.6
  31. [Hadoop 3. X series] use of HDFS rest HTTP API (II) httpfs
  32. Zhang Daxian sang in the morning to bless the motherland, xYG team: singing is much better than us
  33. My three years' experience -- avoiding endless internal friction
  34. Introduction à l'algorithme "dénombrement binaire" modéré 01 - - question d'entrevue leetcode 10.09. Recherche de matrice de tri
  35. Introduction à l'algorithme simple 06 - - leetcode 34. Trouver la première et la dernière position d'un élément dans un tableau de tri
  36. CSS animation
  37. Explain the new tags in HTML5 and the pseudo classes and pseudo elements in CSS3
  38. They are all talking about "serverless first", but do you really understand serverless?
  39. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  40. Front and back end data interaction (VI) -- advantages, disadvantages and comparison of Ajax, fetch and Axios
  41. Front and back end data interaction (V) -- what is Axios?
  42. Front and back end data interaction (III) -- Ajax encapsulation and call
  43. 前端 100 万行代码是怎样的体验?
  44. 湖中剑 前端周刊 #10(ESLint8、Web 端侧 AI、react-if)
  45. 湖中劍 前端周刊 #10(ESLint8、Web 端側 AI、react-if)
  46. 前端 100 萬行代碼是怎樣的體驗?
  47. Huzhong Sword Front End Weekly # 10 (eslint8, Web end ai, React if)
  48. Quelle est l'expérience du premier million de lignes de code?
  49. Pancakeswap front-end source compilation and deployment Linux
  50. Pancakeswap front-end source compilation - Windows
  51. Walls and columns are powered, and 50W transmission power is available in any corner. The University of Tokyo has built a wireless charging house
  52. Pas besoin d'embrayage pour allumer une voiture?Vieux conducteur: la voiture est très blessée par des erreurs. Ces mauvaises habitudes doivent être changées!
  53. Cadre de développement Android MVP, résumé de l'entrevue
  54. [Azure Cloud Service] Azure Cloud Service ajoute des champs personnalisés pour le rôle Web (hôte IIS) (ajoute le champ user agent dans l'en - tête de demande http au Journal de sortie IIS)
  55. Principes de la plate - forme de développement Android, questions d'entrevue de développement Android
  56. [Azure Cloud Service] Azure Cloud Service ajoute des champs personnalisés pour le rôle Web (hôte IIS) (ajoute le champ user agent dans l'en - tête de demande http au Journal de sortie IIS)
  57. Weilai es8 was listed in Norway and SAIC's driverless concept car appeared at the World Expo
  58. One of the most high-frequency algorithm problems in the front end! Reverse linked list
  59. Échange de doigts d'épée 11. Nombre minimum de tableaux rotatifs
  60. Questions et réponses à l'entrevue Big Data (réimprimé)