# code-location-launch

> 点击页面自动定位打开vscode对应代码行

Latest version **1.1.1** (published 2023-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install code-location-launch
pnpm add code-location-launch
yarn add code-location-launch
bun add code-location-launch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2023-08-03 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.1 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | xd |
| Maintainers | npmxd |
| Keywords | code location, vscode |

## Links

- npm: https://www.npmjs.com/package/code-location-launch
- npm.io page: https://npm.io/package/code-location-launch

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) 0.24.0

## Recent versions

- 1.1.1 (latest) — 2023-08-03
- 1.1.0 — 2023-08-03

## README

# 点击页面自动定位打开vscode对应代码行

## 安装
```
pnpm add code-location-launch
```

## 使用 - 配置
#### 注意添加区分运行环境和运行命令的判断来使用插件，避免影响生产环境
`webpack`
```
// webpack.dev.js
const { codeLocationServer } = require('code-location-launch')

module.exports = {
    ...
    module: {
      rules: [
        {
          // 使用 add-location-loader
          test: /\.vue$/,
          loader: 'code-location-launch/add-location-loader',
        }
      ]
    },
    devServer: {
      ...
      // 添加监听服务server
      onBeforeSetupMiddleware: function(devServer) {
        codeLocationServer(devServer.app)
      }
    },
}

// main.js
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化
```

`vue-cli`
```
// vue.config.js
const { codeLocationServer } = require('code-location-launch')

module.exports = {
    ...
    devServer: {
      ...
      // 添加监听服务server
      before: codeLocationServer
    },
    chainWebpack(config) {
        ...
        // 使用 add-location-loader
        config.module
          .rule('vue')
          .test(/\.vue$/)
          .use('code-location-launch/add-location-loader')
          .loader('code-location-launch/add-location-loader')
          .end()
        ...
    }
}

// main.js
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化
```

`vite`
```
// vite.config.ts
const { codeLocationServer, codeLocationLoader } = require('code-location-launch')

export default defineConfig({
  plugins: [
    // 添加监听服务server
    codeLocationServer(),
    // 使用 add-location-loader
    codeLocationLoader()
  ]
}

// main.ts
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化
```

## 使用 - 触发
  本地运行项目后，alt键+鼠标左键点击页面相应元素


## 注意事项
  - 确保开发环境才开启，避免影响生产环境
  - [原理文章](https://mp.weixin.qq.com/s/AZQTK_lk8BxxWZCDU5P_Yg)

---
_Source: https://npm.io/package/code-location-launch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._