실용적인 전투: vue 파일을 지원하여 정의로 이동하는 플러그인을 vscode에서 개발합니다.

vscodevscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。【推荐学习：《vscode教程》】

插件

vscode支持vue文件跳转到定义的插件(vue jumper)已正式发布到vscode插件市场，可以到vscode插件市场直接下载体验。

功能

该插件支持vue-cli提供给我们很多组件引用写法的跳转支持。

1、省略写法跳转支持

我们在引用组件的时候，如果组件的名称是index.vue或者index.js时，我们引入时可以省略index.vue或者index.js。如果我们使用了省略写法，vscode自身是无法支持跳转的，所以该插件需要支持省略写法跳转。

import MycoMponent from '../components/MyComponent' // '../components/MyComponent/index.vue'

2、alis别名路径跳转支持

在vue-cli（webpack）的配置下，我们可以配置alis别名，这样我们可以提升生产效率，但是vscode本身是不支持的，所以该插件需要支持alis别名路径跳转。

import MycoMponent from '@/components/MyComponent'

3、components注册别名跳转支持

vscode本身是支持components注册别名跳转的（如果引入时有省略写法和alis别名路径也是不支持的），所以该插件也需要支持components注册别名跳转。

<script>
import MycoMponent from &amp;#39;@/components/MyComponent&amp;#39;
export default {
    components: {
        MycoMponentReName: MycoMponent
    }
}
</script>

4、mixins中引入的组件跳转支持

在实际开发中，我们可以有很多复用的功能抽离到了mixins 자체적으로 정의로 점프할 수 있는 vue 파일 구성 요소를 지원하지만 지원이 매우 약합니다. vue-cli 구성을 통해 다양한 유연한 사용법을 작성할 수 있어 생산 효율성을 향상시킬 수 있습니다. 그러나 vscode 자체에서 제공하는 기능이 파일 정의로 점프하는 것을 지원하지 못하게 하는 것은 이러한 유연한 쓰기 방법입니다. 이러한 유연한 작성 방법과 호환되고 작업 효율성을 높이기 위해 Vue 파일을 지원하는 vscode 플러그인을 작성하여 정의로 이동했습니다. [추천 학습: "vscode tutorial

"]

Plug-in

vscode는 정의된 플러그인(vue 점퍼)으로의 Vue 파일 점프를 지원합니다. vue 점퍼가 공식적으로 vscode 플러그인 시장에 출시되었습니다. vscode 플러그인 마켓에 가서 직접 다운로드하고 경험해 보세요.

함수

이 플러그인은 vue-cli를 지원하여 다양한 구성 요소 참조 작성 방법에 대한 점프 지원을 제공합니다.

1. 생략된 작성 점프 지원🎜🎜컴포넌트를 참조할 때 해당 컴포넌트의 이름이 index.vue 또는 인 경우 index.js를 도입할 때 index.vue 또는 index.js를 생략할 수 있습니다. 생략된 쓰기 방법을 사용하는 경우 vscode 자체는 점프를 지원할 수 없으므로 플러그인은 생략된 쓰기 방법 점프를 지원해야 합니다. 🎜

<template>
    <MyComponent />
</template>
<script>
import myMixins from &#39;@/mixins/myMixins&#39;
export default {
    mixins: [myMixins]
}
</script>

🎜2. Alis 별칭 경로 점프 지원🎜🎜🎜vue-cli(webpack) 구성에서는 생산 효율성을 향상시킬 수 있도록 alis 별칭을 구성할 수 있습니다. vscode 자체에서는 이를 지원하지 않으므로 플러그인에서 Alias ​​Alias ​​경로 점프를 지원해야 합니다. 🎜

// myMixins.js
import MycoMponent from '@/components/MyComponent'
export default {
    components: {
        MycoMponent
    }
}

🎜3. 구성 요소 등록 별칭 점프 지원 🎜🎜🎜vscode 자체에서 구성 요소 등록 별칭 점프를 지원합니다(도입 시 쓰기 및 Ali 별칭 경로 생략이 지원되지 않는 경우). 플러그인은 구성 요소 등록 별칭 점프도 지원해야 합니다. 🎜

<template>
    <MyComponent />
</template>
<script>

🎜4. mixins에 도입된 구성 요소 점프 지원🎜🎜🎜실제 개발에서는 다음을 포함하는 mixins code>로 추출된 재사용 가능한 많은 함수를 가질 수 있습니다. 컴포넌트 도입 및 등록. 본 vscode 자체는 점프를 지원하지 않으므로 플러그인에서는 믹스인 도입을 지원합니다. 🎜<pre class="brush:js;toolbar:false;">// main.js import vue from &amp;#39;vue&amp;#39; import MycoMponent from &amp;#39;./components/MyComponent&amp;#39; vue.use(MycoMponent)</pre>rrree🎜🎜5. 글로벌 컴포넌트에 점프 지원 도입🎜🎜🎜글로벌하게 등록된 컴포넌트의 경우, vscode 자체는 이 경우 점프를 지원하지 않습니다. 전역 구성 요소의 도입은 상대적으로 복잡하기 때문에 플러그인은 퍼지 검색을 사용하여 구성 요소가 정의된 위치를 찾고 전역 구성 요소 도입을 위한 점프 지원을 달성합니다. 🎜rrreeerrreee🎜VSCode에 대한 자세한 내용을 보려면 🎜vscode 기본 튜토리얼🎜을 방문하세요! 🎜🎜

위 내용은 실용적인 전투: vue 파일을 지원하여 정의로 이동하는 플러그인을 vscode에서 개발합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!