vue-click-to-component
v0.3.7
Published
Option+Click(Alt+Click) Vue components in your browser to instantly open the source in VS Code.
Downloads
585
Maintainers
Readme
vue-click-to-component
English | 简体中文
Option+Click(Alt+Click) a element in the browser to instantly goto the source in your editor.
Option+RightClick(Alt+RightClick) opens a context menu with the parent elements.
Features
- Option+Click(Alt+Click) opens the immediate Component's source
- Supports
vscode
,vscode-insiders
andwebstorm
's URL handling - Automatically tree-shaken from
production
builds
Installation
npm
npm install vue-click-to-component
pnpm
pnpm add vue-click-to-component
yarn
yarn add vue-click-to-component
Even though vue-click-to-component
is added to dependencies
, tree-shaking will remove vue-click-to-component
from production
builds.
Usage
If you are using Click To Component Chrome Extension, you will not need to add import 'vue-click-to-component/client';
in main.ts/js
.
Vite
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()],
})
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
+import 'vue-click-to-component/client';
createApp(App).mount('#app')
Vue CLI
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);
+ },
});
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
module: {
rules: [
+ {
+ test: /\.vue$/,
+ enforce: 'pre',
+ loader: 'vue-click-to-component/loader',
+ },
{
test: /\.vue$/,
loader: 'vue-loader',
},
],
},
import { createApp } from "vue";
import App from "./App.vue";
+import "vue-click-to-component/client.js";
createApp(App).mount("#app");
"scripts": {
- "serve": "webpack serve"
+ "serve": "NODE_ENV=development webpack serve"
},
Configure the URL to open the editor
By default, clicking will open vscode
, and generally does not need the following configuration. Those configurations are only required if the following situations are used.
If you use vscode-insiders
, you can set editor like:
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}`;
+ };
+}
If you use WSL, you can set URL like:
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}`;
+ };
+}
You can find your WSL target in the Remote Explorer
panel of VSCode.
If you use Docker development environment, you can fix path like:
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}`;
+ };
+}
If you use WebStorm, you can set URL like:
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}`;
+ };
+}
PS: According to my test, the file can be opened, but the lines and columns do not take effect. If anyone knows how to make lines and columns work please tell me, thanks.
Force enable
By default, this tool is only enabled in the development environment (NODE_ENV
is development
). If you want to enable it in the production environment, you can configure it like below:
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",