This is the third day of my participation in Gwen Challenge

The previous [efficiency tools] VsCode extension plug-in (2) introduced some common front-end development process of plug-in extension, can be used as a reference, of course, there are also insufficient, some good plug-in is not listed, welcome to give advice, supplement and improve, welcome to share

This article shares some Settings of fast input code segment in daily coding process, practice (lazy) to promote the development of science and technology

Custom Snippets

Here lists the code snippets used in the development process, which is convenient for quick input and reuse of repeated code snippets. For example, fast input file information header annotation, js quick annotation todo list,comments, vue file just need to type a few letters vue2/vue3 fast input automatically generate a large section of code. Vue file template and so on, greatly improve the efficiency of our code

Of course, there are some plug-ins, Vue 3 Snippets that generate code Snippets, can also be used, of course, custom or familiar, customizable, remember

Setting method:

Keyboard shortcuts review: Ctrl + Shift + P type snippets(not necessarily whole words) and select Configure user snippets

Settings (Administration) > User Snippet > New (Generally select Create global snippet) > Input filename

In the json file that opens, you can see the following comment, prompting you to put the entire VSCode global snippets here, with each snippet containing four fields

Scope: scope, which is the type of file that works for the snippets, such as javascript,typescript, etc

Prefix: prefix, which is the generated code that appears when the prefix is typed in the editor

Body: is the code generated by prefix

Description: The description of this code snippet

$1, $2 is where the generated code will stop for input, and $0 is where the cursor will first stop after the generated code. ${1:label} ${2:another} ${2: label} ${2: label} ${1:label} ${2: label} ${2: label} ${2: label} ${2: label} Here are some code snippets for your own use

1. Annotations are relevant

1.1 auth.code-snippets

Use method: Enter AC enter (Enter) in the file to quickly enter the content of the body

// comment.snippets
"author & create_at": {
  "prefix": "ac"."body": [
    "/ * *"." * @author: xn213"." * @create_at: $CURRENT_MONTH_NAME_SHORT $CURRENT_DATE, $CURRENT_YEAR"." */".""."$1"]},Copy the code

1.1 comments.code-snippets

Input corresponding letters and output corresponding codes: log, comment, attention…

"Print to console": {
  "prefix": "log"."body": ["console.log('$1', $2)"."$3"]."description": "Log output to console"
},
"comment": {
  "prefix": "comment"."body": [
    "/************* ↓↓ '$1' by xn213 *************/"."$2"."/************* ↑↑ '$1' by xn213 *************/"]."description": "Comment"
},
"attention": {
  "prefix": "attention"."body": ["/************* ATTENTION '$1' by xn213 **************/"]."description": "Note ⚠ ️"
},
"todo": {
  "prefix": "todo"."body": ["/************* TODO '$1' by xn213 **************/"]."description": "To-do list"
},
Copy the code

2. The code segment

Of course you can write them all in one file. #2.1 and #2.2 are categorized here

2.1 vue3.code-snippets

Enter vue3 to quickly generate vue3 code snippets

"vue3 template": {
  "prefix": "vue3"."body": [
    "<template>"." 
      

       "
      
."$4"." "."</template>".""."<script lang=\"ts\">"."import { defineComponent } from 'vue'"."export default defineComponent({"." name: '${1:test}',"." props: {}"."})"."</script>"."<style lang=\"${2:scss}\" scoped>".""."</style>"."",]},Copy the code

2.2 vue2.code-snippets

"vue template": {
  "prefix": "vue2"."body": [
    "<template>"." 
      

       "
      
."$4"." "."</template>".""."<script>"." export default {"." name: '${1:test}',"." props: {},"." data() {"." return {".""."}"."},"." created(){ ".""."},"." methods: {".""."},"."}"."</script>"."<style lang=\"${2:scss}\" scoped>".""."</style>"."",]},Copy the code

2.3 Code segment correlation

Quick introduction of modules, interfaces, tools, etc. : import, API, utils…

"Introducing an API": {
  "prefix": "api"."body": [
        "import { $1 } from '@/api$2'"]."description": "Introducing an API"
},
"Introducing utils utility methods": {
    "prefix": "utils"."body": [
        "import { $1 } from '@/utils/index.js'"]."description": "Introducing utils utility methods"
},
"Select a single DOM element": {
    "prefix": "qs"."body": [
        "document.querySelector('$1')"]."description": "Select a single DOM element"
},
Copy the code

Of course, here is a part of the list, these can be customized according to their own needs, can greatly improve the efficiency of the code word, have you got it?

trailer

Below, I will update some optimized configurations of Vscode, so stay tuned.. hahah