[VSCode] 자동완성 등록

방법

파일  ->  기본설정  ->  사용자 코드 조각 구성  ->  'javascript' 검색  ->  javascript.json 파일

해당 파일이 열리면 형식에 맞추어 넣고싶은 자동완성 넣으면 됨.

 

내 자동완성 커스텀

{
  // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "console.log print": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "console.log"
  },

  // -- 제이쿼리
  // 제이쿼리 클래스 관련
  "jquery class": {
    "prefix": "jc",
    "body": ["$('.$1')"],
    "description": "jquery class"
  },

  "jquery class event": {
    "prefix": "jce",
    "body": [
      "$('.$1').on('$2', function (event) {\n\tevent.preventDefault();\n\t$3\n});"
    ],
    "description": "jquery class event"
  },

  "jquery class css": {
    "prefix": "jcc",
    "body": ["$('.$1').css('$2', '$3');"],
    "description": "jquery class css"
  },

  "jquery class text": {
    "prefix": "jct",
    "body": ["$('.$1').text('$2');"],
    "description": "jquery class text"
  },

  // 제이쿼리 아이디 관련
  "jquery id": {
    "prefix": "ji",
    "body": ["$('#$1')"],
    "description": "jquery id"
  },

  "jquery id event": {
    "prefix": "jie",
    "body": [
      "$('#$1').on('$2', function (event) {\n\tevent.preventDefault();\n\t$3\n});"
    ],
    "description": "jquery id event"
  },

  "jquery id css": {
    "prefix": "jic",
    "body": ["$('#$1').css('$2', '$3');"],
    "description": "jquery id css"
  },

  "jquery id text": {
    "prefix": "jit",
    "body": ["$('#$1').text('$2');"],
    "description": "jquery id text"
  },

  // ajax
  "jquery ajax": {
    "prefix": "jaj",
    "body": [
      "$.ajax({\n\ttype: '',\n\n\turl: '',\n\n\tdata: ,\n\n\tsuccess: function (data) {\n\t\tconsole.log(data);\n\t},\n\n\terror: function (reject) {\n\t\tconsole.log(reject);\n\t}\n});"
    ],
    "description": "jquery ajax"
  },

  // 쿼리셀렉터 관련
  "document querySelector": {
    "prefix": "dq",
    "body": ["document.querySelector('$1')"],
    "description": "document querySelector"
  },

  "document querySelector addEventListener": {
    "prefix": "dqe",
    "body": [
      "document.querySelector('$1').addEventListener('$2', function (event) {$3});"
    ],
    "description": "document querySelector addEventListener"
  },

  // 주석 관련
  "comment": {
    "prefix": "**",
    "body": ["/*\n\t$1\n*/"],
    "description": "document querySelector addEventListener"
  },

  // Vue
  "Vue form": {
    "prefix": "vv",
    "body": [
      "let $1 = new Vue({\n\tel: '$2',\n\n\tdata: {\n\t\t$3\n\t},\n\n\tmethods: {\n\t\t$3\n\t}\n});"
    ],
    "description": "Vue form"
  }
}

 

 

- Just Do It -