react代碼片段rcc


{
  "React Class": {
    "scope": "javascript,typescript",
    "prefix": "rnc",
    "body": [
      "import React, { Component } from 'react'",
      "",
      "/**",
      "*",
      "* @ author: ",
      "* @ email: ",
      "* @ date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
      "*/",
      "class $TM_FILENAME_BASE extends Component {",
      "",
      "\trender() {",
      "\t\treturn (",
      "\t\t)",
      "\t}",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "\tcontainer: {",
      "\t\tflex: 1",
      "\t}",
      "})",
      "",
      "export default $TM_FILENAME_BASE"
    ],
    "description": "創建一個React-Native類"
  }
}











{ "React-Native Class":{ "scope": "javascript,typescript", "prefix": "rnc", "body": [ "import React, { Component } from 'react'", "import { StyleSheet, View, Text ,Image } from 'react-native'", "", "/**", "*", "* @ author: ", "* @ email: ", "* @ date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE", "*/", "class $TM_FILENAME_BASE extends Component {", "", "\trender() {", "\t\treturn (", "\t\t\t<View style={styles.container}>", "\t\t\t</View>", "\t\t)", "\t}", "}", "", "const styles = StyleSheet.create({", "\tcontainer: {", "\t\tflex: 1", "\t}", "})", "", "export default $TM_FILENAME_BASE" ], "description": "創建一個React-Native類" } }



此處以React-Native 類文件進行舉例說明,常用的字段也只有這幾個(scope,prefix,body,description)

  • 如代碼的React-Native Class 字段:給模板取的名稱(這個可根據自己喜歡取名)

  • scope(固定字段):文件創建屬性,比如javascript,typescript,可不寫,但不能亂寫

  • prefix(固定字段):智能提示選項卡,比如你取名rnc,當你創建一個文件后,輸入rnc后就會出現智能選項卡

  • body (固定字段):字符串數組,放置代碼片段,一句代碼占用一個元素。

    注:縮進使用 "\t" ,盡量不要使用空格
    
  • description(固定字段):顧名思義,這個模板的描述,智能提示卡上可顯示(所以應簡短明了)

3.語法解釋
  • $1,$2,$3...$0:制表位,表示代碼片段創建好后光標顯示的位置,$1表示光標初始位置,$2表示用戶按下鍵盤上的Tab鍵光標移動的下一個位置,依次類推,$3表示再次按下Tab鍵的下一個位置,數字表示Tab按下幾下顯示的位置,$0表示光標結束的位置

     注:如果兩個字段一樣,都可以使用相同的,用戶輸入時,兩處同時輸入
    
  • ${1:className}:預占制表位,和上邊一樣,只是上邊是顯示空白,這個會在光標處顯示預占位className,這個className可以寫你自己需要的東西,當Tab選中時可修改,比如${1:params1},${2:params2}

    注:預占制表位可嵌套使用,比如${1:another ${2:placeholder}} 
  • ${1|one,two,three|}:占位符有選擇的值,當用戶Tab選中是顯示可選的值,用戶給出的值中選擇。語法:在| |(雙豎線)內寫預選參數,多個參數用“,”隔開,根據需要,數字1也是可變的

  • $name 或 ${name:default}:插入可變的值,當一個變量不設置,默認或空字符串插入,當一個變量是未知的(即它的名字不是下面定義的變量)變量的名稱,那插入之后將轉換成占位符

可以使用的基本變量

    TM_SELECTED_TEXT 當前選中的文本或空字符串
    TM_CURRENT_LINE 當前行中的內容(即你哪行輸入模板,即顯示當行)
    TM_CURRENT_WORD 詞的內容根據光標或空字符串
    TM_LINE_INDEX 基於zero-index的行號(即你在哪行創建的快速模板的行號 減1) TM_LINE_NUMBER 基於一個索引的行號(即你在哪行創建的快速模板的行號) TM_FILENAME 當前文檔的文件名 TM_FILENAME_BASE 當前文檔的文件名(不包括擴展) TM_DIRECTORY 當前文檔的目錄 TM_FILEPATH 當前文檔的完整的文件路徑 CLIPBOARD 剪貼板的內容 

可插入的日期和時間變量

    CURRENT_YEAR 當前日期的年(example '2019')
    CURRENT_YEAR_SHORT 當前年的后兩位(example '19')
    CURRENT_MONTH 當前月兩位表示法 (example '02')
    CURRENT_MONTH_NAME 當前月全稱 (example 'March')
    CURRENT_MONTH_NAME_SHORT 當前月簡稱 (example 'Mar')
    CURRENT_DATE 當天兩位表示法 (example '06')
    CURRENT_DAY_NAME 星期 (example 'Monday')
    CURRENT_DAY_NAME_SHORT 星期簡稱 (example 'Mon')
    CURRENT_HOUR 24小時制,小時
    CURRENT_MINUTE 分
    CURRENT_SECOND 秒

例如:

{ "hello": { "scope": "javascript,html", "prefix": "hello", "body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE" } } 

輸出:當前的年月日(例如:2019-03-06 11:03)

可插入的塊語法

    BLOCK_COMMENT_START 例如在PHP中輸出/*或者HTML中輸出<!-- BLOCK_COMMENT_END 例如在PHP中輸出*/或者HTML中輸出 --> LINE_COMMENT 例如在PHP中輸出//或者HTML中輸出<!-- --> 

例如:

{ "hello": { "scope": "javascript,html", "prefix": "hello", "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END" } } 

輸出:

<!-- Hello World -->


作者:幻雪之戀_0414
鏈接:https://www.jianshu.com/p/c3ae6c6d6908
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM