Use vscode snippets to work with project members to improve development efficiency

zxg_ God said to have light 2021-09-15 09:04:19
use vscode snippets work project

code snippets Code snippet means , yes vscode It provides the function of quickly completing a piece of code according to a string , Can improve the efficiency of writing code .

vscode Of snippets Can be shared with the project , When multiple people develop a project , You can maintain project level snippets And through git share , To improve project development efficiency .

Let's take a closer look at snippets.

snippets The function of

snippets The configuration of is in the following format :

"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
 Copy code 
  • prefix Is triggered snippets The prefix of , Multiple... Can be specified through an array

  • body Is the content filled into the editor

  • description yes snippets Description of

among body Some can be passed through ${} To specify the cursor position 、 The order 、 Placeholder string 、 Available values, etc , Yes 5 Grammar , Let's take a look at :

The cursor jumps : $0 $1 $2

Can pass 0 0、 1、 2 Specify cursor position , When filled s n i p p e t s After the content of , The cursor will be set to 2 Specify cursor position , When filled snippets After the content of , The cursor will be set to 0 To edit , After editing , Can pass tab Come and jump to $1.

And when there are multiple 0 0、 1 etc. , Editing one place and other contents will also be modified synchronously , That is to say vscode Multi cursor editing .

With this function, you can quickly edit snippets Editable content in .

Place holder :${1: placeholder}

Just the cursor jump, although you can quickly edit the content , But I don't know what the editing part is , therefore snippets Support for setting placeholder Value , The text will be selected by default , Input content can overwrite .

Optional value :${1:|text1,text2,text3|}

Placeholders are like input The label added placeholder attribute , Or do you want to enter it manually , When the editable area has several optional values , You have to change to the drop-down selection , stay snippets Inside is through ${1:|text1,text2,text3|} The way to support , stay | and | Fill in between , Multiple options for segmentation .

Variable :$ Variable name

When filling in the editable position of the template , Sometimes you need to use the selected value 、 Clipboard value 、 file name 、 Date, etc. , This information passes through snippets Supported variables in .

such as :

  • TM_FILENAME: file name
  • TM_CURRENT_LINE: Contents of current line
  • CLIPBOARD: The contents of the clipboard
  • WORKSPACE_NAME: workspace Name
  • WORKSPACE_PATH: workspace The path of
  • CURRENT_YEAR: The current year
  • CURRENT_MONTH: The current month
  • CURRENT_DATE: Current day
  • RANDOM: random number
  • RANDOM_HEX: 6 Bit random 16 Hexadecimal number
  • UUID:  only id

You can take the values of these variables to fill in the cursor position , The way is to use T M F I L E N A M E TM_FILENAME、 CURRENT_YEAR The way .

Variable conversion : ${ Variable name / Matching regularities / Replace with a new string / Matching mode }

It supports variable filling, but not yet , Because the contents of some variables are inappropriate , You need to do some string replacement , therefore snippets Just eat transform The function of .

such as abc-123.js The file of ,

We go through $TM_FILENAME Get the file name , Then remove the suffix and put it in uppercase

 Copy code 

For file names TM_FILENAME Do regular matching (.*).[a-z]+, Turn group one into uppercase and return , The matching pattern is ignore case (ignore).

" Fill in the file name ": {
"scope": "javascript,typescript",
"prefix": "filename",
"body": [
"description": " file name "
 Copy code 

Let's experiment with the effect :

You can see , Get the file name correctly , And remove the suffix and put it in uppercase .

got it snippets The function of , So how to set up snippets Well ?snippets To what extent does it take effect ?

snippets The scope of the

command + shift + p Open the command panel , Input snippet, choice configure user snippets:

You can choose to create a global 、 Project wide 、 Language range snippets:

Files in different locations will be opened to add snippets.

At the language level snippets It only works for a specific language , This can also be encapsulated as a plug-in . In plugins package.json It can be configured in :

"contributes": {
"snippets": [
"language": "javascript",
"path": "./snippets.json"
 Copy code 

Project wide snippets It is in the root directory of the project .vscode/xxx.code-snippets Added below ,vscode These files will be read at startup , Then make it effective within the scope of the project .

When there are some project level pieces of code that can be shared , Submit this file completely to the remote git Warehouse , Then project members can share these snippets Set up . For some projects with more template code , Still more meaningful .


snippets yes vscode Provides some quick input code snippets for improving development efficiency , Support the jump of cursor position 、 Multi cursor simultaneous editing 、 Place holder 、 Optional value 、 Variable 、 Variable conversion and other functions , Use these functions flexibly , Can make easy-to-use to improve development efficiency snippets.

snippets Yes global、language、project 3 Scope of effectiveness :global Is the global setting ;language Is the language level setting , It can be further encapsulated into plug-in sharing ;project Is within the scope of the project , stay .vscode Under the xx.code-snippets in , It can be submitted to git Warehouse , Share with other members .

Flexible use of snippets function , It can improve development efficiency , And this can also be shared at the project level . I hope this article can help you understand snippets.

本文为[zxg_ God said to have light]所创,转载请带上原文链接,感谢

  1. Contrôle de l'arbre en vue converti en style de table
  2. CSS3 animation flash Effect
  3. Discuter des propriétés de la file d'attente pour l'événement bloc
  4. Node around USModules
  5. Webpack - - Premier aperçu (concept de base)
  6. Mise en œuvre du cadre de base mvvm par JS natif
  7. Calculer les propriétés par rapport aux auditeurs, etc.
  8. Configuration standard dockerfile et docker-composer.yml
  9. Collection de questions d'entrevue HTML
  10. Conteneur, définir la largeur et la hauteur ne répond pas?
  11. Introduction et syntaxe des objets (mise à jour à long terme)
  12. Bubble Mart invests in cat galaxy, which is a vertical e-commerce platform around the quadratic element
  13. Exigences et dépendances dans package-lock.json
  14. Mouvement tridimensionnel de la terre, du ciel et de la lune basé sur three.js
  15. Compréhension et analyse de l'objet de base JS
  16. Simple use of status data management (context, mobx, Redux)
  17. Simulated drumming
  18. Array method
  19. Performance optimization issue 03 - HTTP request optimization
  20. Vue learning -- watch listener
  21. Learn more about nexttick in Vue
  22. Talk about some moves used by vue3.0 in the project - External skill chapter (I)
  23. JavaScript genrator generator
  24. La dernière réponse à l'entrevue de développement Android, l'hiver froid de l'industrie
  25. Maserati's motorcycle has less than 10 in the world. It is definitely a work of art
  26. 2021 partage des questions du dernier examen écrit d'entrevue Android, pas d'accord
  27. Programmation asynchrone Java scirp, développement frontal de base
  28. 2021 dernier examen écrit d'entrevue Android, écrit trop bien
  29. Quels aspects doivent être pris en considération dans le tableau principal du distributeur libre - service?
  30. He inherited his mother's hundreds of millions of property for his boyfriend to squander. Unexpectedly, he was ruthlessly abandoned when he had 100 yuan left
  31. The fuel cost is half less than that of fuel vehicles at the same level. Is it really cheap to use song Pro DM?
  32. Le dernier résumé de l'expérience d'entrevue d'embauche de l'école Android de l'usine est nécessaire pour l'usine
  33. Le dernier dictionnaire avancé de programmeurs d'usine, l'expérience d'entrevue d'embauche de l'Agence de développement Android
  34. La dernière collection d'entrevues Android Golden nine Silver ten
  35. L'expérience d'entrevue de l'Ingénieur d'algorithme de saut d'octets, 2 mois d'entrevue Tencent, station B, Netease et ainsi de suite sur 11 entreprises résumé!
  36. La dernière collection d'entrevues d'Android Golden nine Silver ten recommande un projet github
  37. Yuan Li's recent situation revealed that he was obsessed with public welfare, dressed simply and fearless, grew fat, and married an 11-year-old husband
  38. Initial experience of template tool plop of [front end Engineering]
  39. Dernière question d'entrevue avancée et réponse d'Alibaba Android, Alibaba P8 vous apprendra en personne
  40. Partage des dernières questions d'entrevue pour Android haute fréquence, Introduction aux compétences d'entrevue pour le développement d'Android
  41. Partager les dernières questions d'entrevue Android haute fréquence avec quelques conseils
  42. About JavaScript modules
  43. Iteratable object and class arrays
  44. Function realization of Vue elementui exporting excel form
  45. Use canvas to realize a small screenshot function
  46. Object oriented programming (2)
  47. Several common value transfer methods between Vue components
  48. Démarrer avec le serveur de base zéro: Hello World
  49. J'a I construit un escalier pour aller sur la lune, combien de façons puis - je poursuivre la sœur Chang'e?
  50. CSS implémente la fonction d'expansion et d'arrimage du Texte multiligne
  51. Varlet CLI | vue3 Component Library Quick Prototyping Tool
  52. Belle vue sur les trois rivières Xiapu
  53. La partie Web qui déploie SharePoint ajoute son propre module de fonctionnalité
  54. React Native (mise à jour à long terme)
  55. La conception et le codage de l'arbre binaire requis pour chaque entrevue d'embauche de la société Java millet;
  56. 10 jours pour obtenir l'offre d'emploi Android d'Alibaba, entrevue Android
  57. A remporté avec succès Byte, Tencent, Pulse offer, 7 ans Java une expérience d'entrevue de baise,
  58. 10大前端常用算法,web应用与开发
  59. Nginx - minimum configuration! You deserve it
  60. Les questions d'entrevue couramment utilisées pour le cadre Java sont - elles prometteuses pour le développement Java?