JS筆記-VScode自己設定速打

前端前端工程師網頁前端網頁程式網頁

Oo_花之舞__oO 2023-03-19 00:55:29 ‧ 1480 瀏覽

分享至

前情提要

VScode可以自己設定速打就像是大家都會用!來快速布局html架構
其實這些提示跟內容可以自己設定

只要按左下角的工具選擇使用者代碼片段然後可以自己新增檔案
自己設定
這邊我就要提供各位我設定的一些好用片段

未來還會持續更新哦~~~~可以持續關注!!

{
  "margin and padding": {
    "prefix": "mp0",
    "body": ["margin: 0;", "padding: 0;"],
    "description": "margin and padding equal 0"
  },

  "display flex": {
    "prefix": "dsf",
    "body": [
      "display: flex;",
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "as title"
  },

  "width and height": {
    "prefix": "wh",
    "body": ["width: $1px;", "height: $2px;"],
    "description": "as title"
  },

  ":Pseudo": {
    "prefix": "pseudo",
    "body": [
      "::before {",
      "content: '';",
      "position: absolute;",
      "height: px;",
      "width: px;",
      "background: ;",
      "top: ;",
      "}"
    ],
    "description": "make a pseudo css"
  },

  "font-awesome-link": {
    "prefix": "font-awesome",
    "body": [
      "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>"
    ],
    "description": "make a pseudo css"
  },

  "jquery-src": {
    "prefix": "jquery",
    "body": [
      "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'>></script>"
    ],
    "description": "plugin jq"
  },

  "html": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "    <meta charset='UTF-8'>",
      "    <meta http-equiv='X-UA-Compatible' content='IE=edge'>",
      "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
      "    <link rel='stylesheet' href='style.css'>",
      "    <title>Document</title>",
      "</head>",
      "<body>",
      "",
      "</body>",
      "<script src=''></script>",
      "</html>"
    ],
    "description": "html"
  }
}

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

jeffeux

iT邦新手 4 級 ‧ 2023-03-20 04:19:30

是說 !! 那個跟預設的 ! 原來只差在上面的

    <link rel="stylesheet" href="style.css">

跟下面的

<script src=""></script>

而已嗎？ XDD
如果要這樣設計建議學原本的 ! 加個 $1 $2 這些變數？
也就是

    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "    <meta charset='UTF-8'>",
      "    <meta http-equiv='X-UA-Compatible' content='IE=edge'>",
      "    <meta name='viewport' content='width=${1:device-width}, initial-scale=${2:1.0}'>",
      "    <link rel='stylesheet' href='${4:style.css}'>",
      "    <title>${3:Document}</title>",
      "</head>",
      "<body>",
      "    $0",
      "</body>",
      "<script src='$5'></script>",
      "</html>"
    ],

回應 3
檢舉

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-03-20 21:52:46 檢舉

笑惹被發現惹對呀感謝你的建議
我知道有$1 這些用法不過實際上不太知道作用可以幹嘛(?
$1會可以直接輸入可是$2之後好像就沒作用(?

謝謝建議超讚der(‘ v`)

jeffeux iT邦新手 4 級 ‧ 2023-03-25 00:54:15 檢舉

喔喔你要按 tab 啦～XD
輸入完 $1 的內容按 tab 就會跳到 $2，以此類推直到 $0
然後上面的例子如果你在 $1 什麼都不動預設值就會是 device-width

因為我個人有 coding style 跟排版潔癖所以玩這個 snippets 相關的技術之前沉迷了好久，甚至動用到 Backus–Naur Form 去了（但就卡在這裡嗚嗚）

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-03-25 09:11:25 檢舉

哇嗚！遇到大前輩，謝謝你教我！
好白癡我居然不知道這招哈哈哈
謝謝你
這些東西很值得讓大家知道學習呢，很大方地分享～～

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙