chana1024/linzhinan-vue-code-link

linzhinan-vue-code-link's Issues

自动定位插件优化建议

也是有看到vivo的这篇文章，找到了 linzhinan-vue-code-link
在体用使用后，提出一点点建议：

1. 快捷键设置问题，建议触发快捷键可以让用户配置，类似于字节跳动的react-dev-inspector插件
   
2. 触发快捷键之后，建议在页面上弹出 debug 的遮罩层，在点击遮罩层的时候进行跳转
   具体参考https://juejin.cn/post/6901466406823575560

yarn serve报错

报错的提示都是duplicate attribute: code-location 好像是ant-vue的问题，我这个项目是1.x的版本。

包的名字取的真奇葩

尬

关于antdv的tree组件bug

<a-tree v-model="checkedKeys" :treeData="treeData" :selectedKeys="selectedKeys" :expandedKeys="expandedKeys" @expand="onExpand" :autoExpandParent="autoExpandParent" :replaceFields="replaceFields" @select="onSelect" :show-line="true">
          <template slot="title" slot-scope="{ name }">
            <span v-html="
                name.replace(
                  new RegExp(searchValue, 'g'),
                  '<span style=color:#f50>' + searchValue + '</span>'
                )
              "></span>
          </template>
        </a-tree>

如果a-tree里面套了一个template，template里面有span标签用了v-html的js代码，比方说上面这个，插件会把其中的html字符串给加上行号，导致页面显示是这样的。

使用建议: 不屏蔽右键菜单, 支持自定义激活方式

体验了一把 vue-code-link, 针对 client 的实现有 2 点建议期望采纳

1. 屏蔽了右键菜单, 会影响到正常的业务操作, 建议不要屏蔽右键菜单
2. 激活方式为 shift + 鼠标右键, 用起来不太适应, 建议支持自定义激活方式

尝试改了下源码 node_modules/@linzhinan/vue-code-link/client/index.js
调整为不屏蔽右键菜单, 激活方式改为 shift + 鼠标左键

// /client/index.js
function openFileInEditor(e) {
    // if (e.shiftKey && e.button === 2) {
   if (e.shiftKey && e.button === 0) {
        e.preventDefault();
        const filePath = getFilePath(e.target);
        sendRequestToOpenFileInEditor(filePath)
    }
}

function init() {
    if (process.env.NODE_ENV === 'development') {
        const indexcss = require("../css/index.css")
        // document.oncontextmenu = function() {
        //     return false;
        // }
        document.onmousedown = function(e) {
            // if (e.shiftKey && e.button === 2) {
            if (e.shiftKey && e.button === 0) {
                const element = document.createElement('div');
                const elementId = "clickBall" + uuid(8, 16);
                element.id = elementId;
                element.style.left = (e.clientX - 20) + "px";
                element.style.top = (e.clientY - 20) + "px";
                element.setAttribute("class", "clickBall hidSlow");

                document.body.appendChild(element);
                setTimeout(() => {
                    document.getElementById(elementId).remove();
                }, 1000)
                openFileInEditor(e)
            }
        }
    }
}

无法定位到代码，控制台提示/code not found

我平常本地运行的地址是http://xx.xx.xx.xx:8081/
想试试这个插件
按照npm上面的教程把代码嵌入进去然后运行起来之后
使用shift+左键点击元素会提示http://xx.xx.xx.xx:8081/code not found
为啥咧？但是我在cmd终端上面直接输入code是能唤起vscode的

补充：我本地运行代码的时候，接口是设置了代理的，会跟这个有关系么

建议修改一下 /code 这个接口名称

今天在公司项目引入了这个插件, 因为接口名称冲突了, 导致登录页的验证码接口一直获取不到, 老是304....查了半天想起来可能是这个插件的问题, 搜了一下果然有个同名接口 (捂脸哭
比如可以把 /code 改成 /vcl_code (随便想的示例 这样就不容易冲突

不支持webpack5

按照文档操作，出现报错。

ERROR in ./node_modules/@linzhinan/vue-code-link/server/openCodeFile.js 27:13-26
Module not found: Error: Can't resolve 'os' in 'xxxxx/node_modules/@linzhinan/vue-code-link/server'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }
 @ ./node_modules/@linzhinan/vue-code-link/server/index.js 1:21-59
 @ ./node_modules/@linzhinan/vue-code-link/index.js 1:26-45
 @ ./src/main.js 9:0-61 10:0-22

webpack compiled with 4 errors

补充下vue2项目的package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@linzhinan/vue-code-link": "^1.0.36",
    "amfe-flexible": "^2.2.1",
    "axios": "^1.3.6",
    "babel-plugin-import": "^1.13.6",
    "core-js": "^3.8.3",
    "js-base64": "^3.7.5",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "postcss-pxtorem": "^6.0.0",
    "sass": "^1.62.0",
    "sass-loader": "^13.2.2",
    "scss": "^0.2.4",
    "vant": "^2.12.54",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  }
}