uni-app 哪位大佬能把老hbuild的jq提示功能搬过来啊。

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 哪位大佬能把老hbuild的jq提示功能搬过来啊。

如题。。小公司 还在用jq 还想用上X。。难受啊

1 回复

uni-app 中集成类似于老 HBuilder 的 jQuery 提示功能,可以通过配置 VSCode(或其他编辑器)的代码片段和 IntelliSense 来实现。虽然 uni-app 本身是基于 Vue.js 的框架,并不直接支持 jQuery,但我们可以通过一些技巧来模拟类似的提示功能。

以下是一个使用 VSCode 的代码片段(snippets)和自定义的 JavaScript 提示文件(.jsconfig.json 或 .tsconfig.json 配置)来模拟 jQuery 提示功能的示例。

1. 创建代码片段

在 VSCode 中,你可以通过以下步骤创建自定义代码片段:

  1. 打开命令面板(Ctrl+Shift+PCmd+Shift+P)。
  2. 输入 Preferences: Configure User Snippets 并选择它。
  3. 选择 javascript.json(或 javascriptreact.json,如果你在使用 React)来编辑 JavaScript 代码片段。

然后,添加以下代码片段:

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');"
        ],
        "description": "Log output to console"
    },
    "jQuery selector": {
        "prefix": "$",
        "body": [
            "$('$1')"
        ],
        "description": "jQuery selector"
    },
    "jQuery click event": {
        "prefix": "click",
        "body": [
            "$('$1').click(function() {",
            "    $2",
            "});"
        ],
        "description": "Attach a click event handler using jQuery"
    }
}

2. 配置 IntelliSense

为了增强 IntelliSense 提示,你可以创建一个自定义的 .jsconfig.json 文件(如果你的项目是 JavaScript)或 .tsconfig.json 文件(如果是 TypeScript),并配置 typeRootstypes 字段来包含自定义的 JSDoc 提示文件。

然而,由于 jQuery 本身与 uni-app 不兼容,这里我们主要依赖代码片段。但为了完整性,你可以创建一个简单的 JSDoc 提示文件(例如 jquery-like.d.ts),内容如下:

declare global {
    interface JQueryStatic {
        (selector: string): JQuery;
    }

    interface JQuery {
        click(handler: (eventObject: Event) => any): JQuery;
        // 添加其他 jQuery 方法
    }
}

const $: JQueryStatic;

将这个文件放在你的项目根目录或 node_modules/@types 目录下,并在 .jsconfig.json.tsconfig.json 中引用它(如果需要)。

总结

虽然 uni-app 本身不支持 jQuery,但通过配置 VSCode 的代码片段和 IntelliSense,你可以在一定程度上模拟出类似 HBuilder 的 jQuery 提示功能。上述代码片段示例展示了如何为 $ 选择器、console.logclick 事件处理器添加快速提示。希望这能帮助你在 uni-app 开发中提高效率。

回到顶部