本文仅适用于 VS Code，其他编辑器退后

最近一直在改bug，为了读懂代码逻辑，console.log大法用的频繁超载。（别问为什么不debugger，什么用着顺手什么就是好的，毕竟每个人体质不同嘛🤣）

控制台内打印的数据也一刻不停歇过，数据很容易淹没在log浪潮内，只好在log内添加自定义的标识符在控制台筛选关键字。

于是乎写了很多重复的代码：

js 复制代码

console.log("aomyh == '变量名'", 变量名)

当打印的变量过多时，且变量的数据过大时，一屏的log也很多，找数据也不会轻松。

这个方法笨的离谱，咱得解决呀，又又又于是乎，脑子动起来！咱也不会写啥高级脚本，当然优先考虑输出模板啦。

❌ ~~第一个考虑的，在键盘上设快捷键，但是这玩意得在中文输入时才显示，每次还得切换一下输入法多冒昧啊，关键这玩意它输出的也不准呀，pass，pass~~

正文开始

✅ 第二种，就是用vs code自带的代码块Snippets（点题啦，+10分）。

说到底还是快捷键，输入你的触发字符，输出你自定义的文本。

如何设置

js 复制代码

command + shift + p 
输入 snippet 
选择 Configure User Snippets 
选择 Global Snippets file ...
输入自定义文件名，生成后缀.code-snippets的文件
开始配置吧

如何配置

配置可以分两种，一种是个人使用，自定义自己风格的代码片段；另一种是在项目中使用，比如创建tsx文件的模板。

先说第一种个人使用 ，我在这里定义了四种log样式，其中加了占位符$CLIPBOARD，它是将剪切板上内容替换上去，使用场景就是，先复制一个需要打印的变量名，在字符的地方，输入设置的key，选择对应快捷选项就能将剪切板的内容代入输出了

js 复制代码

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "log",
		"body": [
			"console.log(",
			"  '\\n%c aomyh == $CLIPBOARD',",
			"  'color: #fff; border-radius: 12px; padding: 3px 10px; background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%)',",
			"  '\\n',",
			"  '\\n',",
			");",
		],
		"description": "Log output to console"
	},
	"Print to param console": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "logs",
		"body": [
			"console.log(",
			"  '\\n%c aomyh == $CLIPBOARD',",
			"  'color: #fff; border-radius: 12px; padding: 3px 10px; background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%)',",
			"  '\\n',",
			"  '\\n',",
			"  $CLIPBOARD,",
			");",
		],
		"description": "Log output to console"
	},
	"Print to Success console": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "slogs",
		"body": [
			"console.log(",
			"  '\\n%c aomyh == $CLIPBOARD',",
			"  'color: #22c6a8; border-radius: 12px; padding: 3px 10px; border: 2px solid #22c6a8',",
			"  '\\n',",
			"  '\\n',",
			"  $CLIPBOARD,",
			");",
		],
		"description": "Log output to console"
	},
	"Print to Error console": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "elogs",
		"body": [
			"console.log(",
			"  '\\n%c aomyh == $CLIPBOARD',",
			"  'color: #ff4d4f; border-radius: 12px; padding: 3px 10px; border: 2px solid #ff4d4f',",
			"  '\\n',",
			"  '\\n',",
			"  $CLIPBOARD,",
			");",
		],
		"description": "Log output to console"
	},
}

效果展示

第二种在项目中使用 在项目的根目录下创建.vscode文件夹，将后缀.code-snippets的文件放入其中，可提交到git仓库。

举个🌰，快速创建tsx初始代码：

js 复制代码

{
  "Typescript React template": {
    /** 唤醒代码块的命令 tsx  */
    "prefix": "tsx",
    "body": [
      "/**",
      " * @description 请添加${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}组件的描述和注释!!!",
      " *",
      " * @date 创建时间 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}",
      " * @author 开发人员",
      " */",
      "",
      "import React from \"react\";",
      "",
      "interface ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props {}",
      "",
      "const ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}: React.FC<${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props> = props => {",
      "    const {} = props;",
      "",
      "    return <div className=\"\"></div>;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}",
      ""
    ], //代码块的主体
    "description": "typescript React 代码模版"
  },
}

变量名

上面的使用中，提到了占位符，官方还有很多，官方内容请看大屏幕。

懒得翻的，直接看我这个，谷歌翻译直译

常量

TM_SELECTED_TEXT当前选定的文本或空字符串
TM_CURRENT_LINE当前行的内容
TM_CURRENT_WORD光标所在单词或空字符串的内容
TM_LINE_INDEX基于零索引的行号
TM_LINE_NUMBER基于单索引的行号
TM_FILENAME当前文档的文件名
TM_FILENAME_BASE当前文档的文件名，不带扩展名
TM_DIRECTORY当前文档的目录
TM_FILEPATH当前文档的完整文件路径
RELATIVE_FILEPATH当前文档的相对（相对于打开的工作区或文件夹）文件路径
CLIPBOARD剪贴板的内容
WORKSPACE_NAME打开的工作区或文件夹的名称
WORKSPACE_FOLDER打开的工作区或文件夹的路径
CURSOR_INDEX基于零索引的游标编号
CURSOR_NUMBER基于单索引的游标编

日期和时间

CURRENT_YEAR本年度
CURRENT_YEAR_SHORT当前年份的最后两位数
CURRENT_MONTH两位数表示的月份（例如"02"）
CURRENT_MONTH_NAME月份的全名（例如"July"）
CURRENT_MONTH_NAME_SHORT月份的简称（例如"Jul"）
CURRENT_DATE两位数表示的月份日期（例如"08"）
CURRENT_DAY_NAME日期的名称（例如"星期一"）
CURRENT_DAY_NAME_SHORT当天的简称（例如"Mon"）
CURRENT_HOUR24 小时制格式的当前时间
CURRENT_MINUTE当前分钟为两位数
CURRENT_SECOND当前秒数为两位数
CURRENT_SECONDS_UNIX自 Unix 纪元以来的秒数
CURRENT_TIMEZONE_OFFSET当前 UTC 时区偏移量为+HH:MM或-HH:MM（示例-07:00）。

随机值

RANDOM6 个随机的 10 进制数字
RANDOM_HEX6 个随机 Base-16 数字
UUID版本 4 UUID

行注释或块注释

BLOCK_COMMENT_START示例输出：PHP/*或 HTML<!--
BLOCK_COMMENT_END示例输出：PHP*/或 HTML-->
LINE_COMMENT输出示例：PHP 中//

说了这么多，其实也那么多。再列出一些本人在用的吧

js 复制代码

{
  "window.location.href": {
    "prefix": "href",
    "body": ["window.location.href"]
  },
  "window.location.search": {
    "prefix": "search",
    "body": ["window.location.search"]
  },
  "useEffect": {
    "prefix": "effect",
    "body": ["useEffect(() => {", "", "},[])"]
  },
  "useState": {
    "prefix": "state",
    "body": ["const [_, set] = useState<boolean>(true)"]
  },
  "useMemo": {
    "prefix": "memo",
    "body": ["const data = useMemo(() => {", "", "},[])"]
  },
  "div": {
    "prefix": "div",
    "body": ["<div className={classes.domName}></div>"]
  },
  "className": {
    "prefix": "className",
    "body": ["className={classes.}"]
  },
  "display:flex": {
    "prefix": "flex",
    "body": ["display: \"flex\",", "alignItems: \"center\",", "justifyContent: \"center\","]
  },
  "display:grid": {
    "prefix": "grid",
    "body": ["display: \"grid\",", "\"grid-template-columns\": \"repeat(2, 1fr)\",", "gridGap: 10,"]
  },
  "text": {
    "prefix": "text",
    "body": ["color: \"#000000\",", "fontSize: 16,", "fontWeight: \"bold\","]
  },
  "&:before": {
    "prefix": "before",
    "body": [
      "\"&:before\": {",
      "    content: '\"\"',",
      "    position: \"absolute\",",
      "    height: \"\",",
      "    width: \"\",",
      "    top:0,",
      "    right:0,",
      "    bottom:0,",
      "    left:0,",
      "},"
    ]
  },
  "&:after": {
    "prefix": "after",
    "body": [
      "\"&:after\": {",
      "    content: '\"\"',",
      "    position: \"absolute\",",
      "    height: \"\",",
      "    width: \"\",",
      "    top: 0,",
      "    right: 0,",
      "    bottom: 0,",
      "    left: 0,",
      "},"
    ]
  },
  "&:first-child": {
    "prefix": "first",
    "body": ["\"&:first-child\":{}"]
  },
  "&:last-child": {
    "prefix": "last",
    "body": ["\"&:last-child\":{}"]
  },
  "&:nth-child": {
    "prefix": "nth",
    "body": ["\"&:nth-child()\":{}"]
  }
}

还有很多场景可以使用，快动起来吧。我先开始了，一键useEffect，启动！

总的来说，使用起来学习成本不高，对于不会写脚本又想diy的小伙计们，是相当友好了。

本次汇报over！

开发提效 - 用好Snippets

正文开始

如何设置

如何配置

变量名

常量

日期和时间

随机值

行注释或块注释