README.zh-CN.md

vue-click-to-component

English | 简体中文

在浏览器中按住 Option(Alt) 点击组件，立即在编辑器中打开对应代码。

功能

• 按住 Option(Alt) 点击打开组件对应的代码
• 支持 vscode、 vscode-insiders 和 webstorm 的 URL 打开
• 自动“摇树优化”，不会打包到生产代码中

安装

npm

npm install vue-click-to-component

pnpm

pnpm add vue-click-to-component

yarn

yarn add vue-click-to-component

虽然 vue-click-to-component 安装到了生产依赖，但摇树优化会将 vue-click-to-component 在生产打包中移除.

使用

Vite

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import vueClickToComponent from 'vue-click-to-component/vite-plugin';

// https://vitejs.dev/config/
export default defineConfig({
-  plugins: [vue()],
+  plugins: [vueClickToComponent(), vue()],
})

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
+import 'vue-click-to-component/client';

createApp(App).mount('#app')

Vue CLI

vue.config.js

const { defineConfig } = require("@vue/cli-service");
+const vueClickToComponent = require("vue-click-to-component/vue-cli-plugin");

module.exports = defineConfig({
  transpileDependencies: true,
+  chainWebpack: (config) => {
+    vueClickToComponent(config);
+  },
});

main.js

import Vue from 'vue'
import App from './App.vue'
+import 'vue-click-to-component/client.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

webpack

webpack.config.js

module: {
  rules: [
+    {
+        test: /\.vue$/,
+        enforce: 'pre',
+        loader: 'vue-click-to-component/loader',
+    },
    {
        test: /\.vue$/,
        loader: 'vue-loader',
    },
  ],
},

main.js

import { createApp } from "vue";
import App from "./App.vue";
+import "vue-click-to-component/client.js";

createApp(App).mount("#app");

package.json

"scripts": {
-  "serve": "webpack serve"
+  "serve": "NODE_ENV=development webpack serve"
},

配置打开编辑器的 URL

默认情况点击会打开 vscode，一般不需要下面的配置。只有使用了下面这些情况才需要配置。

Visual Studio Code Insiders

如果你使用 vscode-insiders，可以像下面这样修改编辑器：

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    return `vscode-insiders://file/${sourceCodeLocation}`;
+  };
+}

WSL

如果你使用 WSL，你可以像下面这样设置 URL：

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    // Please change to your WSL target
+    const wslTarget = 'Ubuntu-22.04';
+    return `vscode://vscode-remote/wsl+${wslTarget}/${sourceCodeLocation}`;
+  };
+}

你可以在 VS Code 的 Remote Explorer 面板找到你的 WSL 目标。

Docker

如果你使用 Docker 开发环境，你可以像下面这样修正路径：

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    // Please change to your docker work dir
+    const dockerWorkDir = '/usr/src/app';
+    // Please change to your local work dir
+    const workDir = '/Users/zjf/gh/vue-click-to-component/examples/vite';
+
+    let realSourceCodeLocation = sourceCodeLocation;
+    if (realSourceCodeLocation.startsWith(dockerWorkDir)) {
+      realSourceCodeLocation = `${workDir}${realSourceCodeLocation.slice(dockerWorkDir.length)}`;
+    }
+
+    return `vscode://file/${realSourceCodeLocation}`;
+  };
+}

WebStorm

如果你使用 WebStorm，你可以像下面这样设置 URL：

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    const [path, line, column] = sourceCodeLocation.split(':');
+    return `webstorm://open?file=${path}&line=${line}&column=${column}`;
+  };
+}

注：根据我的测试，文件可以打开，但是行列不生效。如果有谁知道如何让行列生效，请教给我一下，谢谢。

强制开启

默认情况下，这个工具只有在开发环境（NODE_ENV 为 development）才会开启。如果你想在生产环境也开启，可以像下面这样配置：

main.ts:

-import 'vue-click-to-component/client';
+import 'vue-click-to-component/client-force-enable';

package.json:

-"build": "vue-tsc && vite build",
+"build": "vue-tsc && VUE_CLICK_TO_COMPONENT_FORCE_ENABLE=true vite build",