Dot-JS

一个强大的 VS Code 扩展，用于快速生成代码片段和日志语句。

功能特点

• 支持多种文件类型：HTML, JavaScript, TypeScript, Vue 等
• 可自定义触发词和输出格式
• 智能识别变量和字符串
• 支持前缀和后缀配置
• 支持自定义格式化输出

安装

1. 打开 VS Code
2. 按下 Ctrl+Shift+X 打开扩展面板
3. 搜索 "Dot-JS"
4. 点击安装

配置

在 VS Code 的 settings.json 中添加以下配置：

{
  "dotJS.config": [
    {
      "trigger": "log",
      "description": "生成 console.log 语句",
      "hideName": false,
      "format": "console.log",
      "prefix": "",
      "suffix": ""
    },
    {
      "trigger": "debug",
      "description": "生成 console.debug 语句",
      "hideName": false,
      "format": "console.debug",
      "prefix": "DEBUG: ",
      "suffix": ""
    }
  ],
  "dotJS.sign": "."
}

配置项说明

• trigger: 触发词（例如：log, debug）
• description: 补全项的描述
• hideName: 是否在输出中隐藏变量名
• format: 输出格式（例如：console.log）
• prefix: 变量名前缀
• suffix: 变量名后缀
• sign: 触发符号（默认为 "."）

使用方法

1. 在代码中输入变量名或字符串，后跟触发符号和触发词 例如：

   const name = "John";
   name.log    // 将生成 console.log("name", name)
   

2. 对于字符串：

   "Hello".log    // 将生成 console.log("Hello")
   

3. 支持的触发方式：

   • 变量名 + . + 触发词
   • 字符串 + . + 触发词

示例

基本用法

const user = { name: "John", age: 30 };
user.log    // 生成: console.log("user", user)

const message = "Hello World";
message.log    // 生成: console.log("message", message)

自定义格式

const data = { id: 1 };
data.debug    // 生成: console.debug("DEBUG: data", data)

隐藏变量名

const count = 42;
count.log    // 如果 hideName 为 true，生成: console.log(count)

支持的文件类型

• HTML
• JavaScript
• TypeScript
• Vue
• JavaScript React
• TypeScript React

注意事项

1. 确保在 settings.json 中正确配置了 dotJS.config
2. 触发符号默认为 "."，可以在配置中修改
3. 变量名中包含单引号时，会自动使用双引号

问题反馈

如果您遇到任何问题或有改进建议，请提交 Issue。

许可证

MIT