美文网首页程序员
制作Visual Studio Code代码片段变量提示

制作Visual Studio Code代码片段变量提示

作者: 学点笔记 | 来源:发表于2018-10-14 00:04 被阅读0次

ES6 有个好玩的东西:

let bar = "hello the nodejs!";
let foo = `
She saied :"${bar}"
`;
console.log(foo) // She said :"hello the nodejs!"

反引号(`)里面字符的格式(换行、空格、缩进之类的)是不变的,写了什么就是什么,而且可以通过"${}"嵌入变量。你可以用它输出你想要的内容,我经常用来生成文件——尤其是那些有固定格式的文件。下面举个例子:

用来写visual studio code 编辑器的JSON文件的代码片段。

"user strict";

const fs = require('fs');

const vars = [
    "TM_SELECTED_TEXT",
    "TM_CURRENT_LINE",
    "TM_CURRENT_WORD",
    "TM_LINE_INDEX",
    "TM_LINE_NUMBER",
    "TM_FILENAME",
    "TM_FILENAME_BASE",
    "TM_DIRECTORY",
    "TM_FILEPATH",
    "CLIPBOARD",
    "CURRENT_YEAR",
    "CURRENT_YEAR_SHORT",
    "CURRENT_MONTH",
    "CURRENT_MONTH_NAME",
    "CURRENT_MONTH_NAME_SHORT",
    "CURRENT_DATE",
    "CURRENT_DAY_NAME",
    "CURRENT_DAY_NAME_SHORT",
    "CURRENT_HOUR",
    "CURRENT_MINUTE",
    "CURRENT_SECOND"
];
const snippetDes = [
    "当前选定的文本或空字符串",
    "当前行的内容",
    "光标下的单词内容或空字符串",
    "基于零索引的行号",
    "基于单索引的行号",
    "当前文档的文件名",
    "没有扩展名的当前文档的文件名",
    "当前文档的目录(DIRname)",
    "当前文档的完整文件路径",
    "剪贴板的内容",
    "本年度(YYYY)",
    "本年度的最后两位数",
    "月份为两位数(例如'02')",
    "月份的全名(例如'July')",
    "月份的简称(例如'Jul')",
    "这个月的哪一天(10)",
    "一天的名字(例如'Monday')",
    "当天的简称(例如'Mon')",
    "24小时时钟格式的当前小时('14')",
    "当前时间的——分钟('10')",
    "当前时间的——秒('59')"
];



// 添加JSON头部
let jsonH = `{
    // ..........Start snippets variables ..........
    // Author: 1877675862@qq
    // USAGE:
    //      1. 打开VSCODE的“用户代码片段”,选择“json”类型。
    //      2. 拷贝本代码到“json.json”中保存即可(如果已有其他的片段,最外围的"{"和"}"不要复制进去)。
    "FULLDATE":{
        "prefix":"spfull",
        "body":"\\\"\\\\$CURRENT_YEAR-\\\\$CURRENT_MONTH-\\\\$CURRENT_DATE \\\\$CURRENT_HOUR:\\\\$CURRENT_MINUTE:\\\\$CURRENT_SECOND\\\"",
        "description":"日期时间:YYYY-MM-DD hh:mm:ss"
    },`;

fs.writeFileSync('_json.json', jsonH, { encoding: 'utf8', flag: 'w' })

// 开始批量写入snippets
for (let i = 0; i < vars.length; i++) {

    let tmp;

    if (i !== vars.length - 1) {
        tmp = `
    "${vars[i]}":{
        "prefix":"sp",
        "body":"\\\"\\\\$${vars[i]}\\\"",
        "description":"获取${snippetDes[i]}。"
    },`;
    } else {
        tmp = `
    "${vars[i]}":{
        "prefix":"sp",
        "body":"\\\"\\\\$${vars[i]}\\\"",
        "description":"获取${snippetDes[i]}。"
    }`;
    }

    console.log(vars[i] + " done!")

    fs.writeFileSync('_json.json', tmp, { encoding: 'utf8', flag: 'a' })
}

// 添加尾部内容

let endsp = `
// ..........End snippets variables ..........
}
`;

fs.writeFileSync('_json.json', endsp, { encoding: 'utf8', flag: 'a' })

JSON文件虽然用着方便,但写的时候很麻烦——引号" 符号太多了,写好模板用node跑一下就轻松得到了,最终生成的文件如下(_json.json):

{
    // ..........Start snippets variables ..........
    // Author: 1877675862@qq
    // USAGE:
    //      1. 打开VSCODE的“用户代码片段”,选择“json”类型。
    //      2. 拷贝本代码到“json.json”中保存即可(如果已有其他的片段,最外围的"{"和"}"不要复制进去)。
    "FULLDATE":{
        "prefix":"spfull",
        "body":"\"\\$CURRENT_YEAR-\\$CURRENT_MONTH-\\$CURRENT_DATE \\$CURRENT_HOUR:\\$CURRENT_MINUTE:\\$CURRENT_SECOND\"",
        "description":"日期时间:YYYY-MM-DD hh:mm:ss"
    },
    "TM_SELECTED_TEXT":{
        "prefix":"sp",
        "body":"\"\\$TM_SELECTED_TEXT\"",
        "description":"获取当前选定的文本或空字符串。"
    },
    "TM_CURRENT_LINE":{
        "prefix":"sp",
        "body":"\"\\$TM_CURRENT_LINE\"",
        "description":"获取当前行的内容。"
    },
    "TM_CURRENT_WORD":{
        "prefix":"sp",
        "body":"\"\\$TM_CURRENT_WORD\"",
        "description":"获取光标下的单词内容或空字符串。"
    },
    "TM_LINE_INDEX":{
        "prefix":"sp",
        "body":"\"\\$TM_LINE_INDEX\"",
        "description":"获取基于零索引的行号。"
    },
    "TM_LINE_NUMBER":{
        "prefix":"sp",
        "body":"\"\\$TM_LINE_NUMBER\"",
        "description":"获取基于单索引的行号。"
    },
    "TM_FILENAME":{
        "prefix":"sp",
        "body":"\"\\$TM_FILENAME\"",
        "description":"获取当前文档的文件名。"
    },
    "TM_FILENAME_BASE":{
        "prefix":"sp",
        "body":"\"\\$TM_FILENAME_BASE\"",
        "description":"获取没有扩展名的当前文档的文件名。"
    },
    "TM_DIRECTORY":{
        "prefix":"sp",
        "body":"\"\\$TM_DIRECTORY\"",
        "description":"获取当前文档的目录(DIRname)。"
    },
    "TM_FILEPATH":{
        "prefix":"sp",
        "body":"\"\\$TM_FILEPATH\"",
        "description":"获取当前文档的完整文件路径。"
    },
    "CLIPBOARD":{
        "prefix":"sp",
        "body":"\"\\$CLIPBOARD\"",
        "description":"获取剪贴板的内容。"
    },
    "CURRENT_YEAR":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_YEAR\"",
        "description":"获取本年度(YYYY)。"
    },
    "CURRENT_YEAR_SHORT":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_YEAR_SHORT\"",
        "description":"获取本年度的最后两位数。"
    },
    "CURRENT_MONTH":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_MONTH\"",
        "description":"获取月份为两位数(例如'02')。"
    },
    "CURRENT_MONTH_NAME":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_MONTH_NAME\"",
        "description":"获取月份的全名(例如'July')。"
    },
    "CURRENT_MONTH_NAME_SHORT":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_MONTH_NAME_SHORT\"",
        "description":"获取月份的简称(例如'Jul')。"
    },
    "CURRENT_DATE":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_DATE\"",
        "description":"获取这个月的哪一天(10)。"
    },
    "CURRENT_DAY_NAME":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_DAY_NAME\"",
        "description":"获取一天的名字(例如'Monday')。"
    },
    "CURRENT_DAY_NAME_SHORT":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_DAY_NAME_SHORT\"",
        "description":"获取当天的简称(例如'Mon')。"
    },
    "CURRENT_HOUR":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_HOUR\"",
        "description":"获取24小时时钟格式的当前小时('14')。"
    },
    "CURRENT_MINUTE":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_MINUTE\"",
        "description":"获取当前时间的——分钟('10')。"
    },
    "CURRENT_SECOND":{
        "prefix":"sp",
        "body":"\"\\$CURRENT_SECOND\"",
        "description":"获取当前时间的——秒('59')。"
    }
// ..........End snippets variables ..........
}

可能你会觉得直接写可能比先写好模板在运行要快!的确,代码量差不多,直接写可能是要快些,但等到需要多次修改的时候你就会发现有模板真的太好了......

一般JSON是没有使用(//)进行注释的,这里只是例外。

相关文章

网友评论

    本文标题:制作Visual Studio Code代码片段变量提示

    本文链接:https://www.haomeiwen.com/subject/kngaaftx.html