vue----vscode跳转定义组件的插件,以及vscode常用插件

在新公司里刚安装了vscode,写vue或者小程序都会用到vue,小程序代码高亮的设置
在vscode底部栏进入.vue文件底部这里会显示文件格式,鼠标移上去有选择语言模式,vue文件选择vue,wxhl文件选择html
在这里插入图片描述
下面是点开文件==》首选项==》设置==》进入setting.json文件,我用的以下设置,够平时工作上用了。这些都是平时安装插件的时候系统自动配置的,我一开始新安装vscode只配置了vue和javascript,供配置参考。

{
    "window.zoomLevel": 1,
    "files.associations": {
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.wxml": "html"
    },
    "emmet.triggerExpansionOnTab": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    }

}

vue常用插件,我用的插件不多,还希望有大佬补充
vue格式化文件-------

vue-fomate

vue-definition----vue跳转事件和跳转到引入的组件位置

vue-peek 查看定义,可以看到定义的源文件

在这里插入图片描述

还有一些插件如Chinese转换vscode为中文版,css-formater—css格式化插件
css-peek跳转css样式,但我安装后没感觉跳转,可能使用不当,希望有人指点迷津…
再截个图

在这里插入图片描述

### VSCode 插件支持快速导航至 Vue 组件 在 Visual Studio Code 中,有多个插件可以显著提升开发者的工作效率,尤其是在处理 Vue.js 单文件组件(SFCs 或 `.vue` 文件)时。以下是几个推荐的插件及其功能描述: #### Vetur Vetur 是一个非常流行的 Vue 工具包,它提供了语法高亮、智能感知、 Emmet 支持以及错误检查等功能[^1]。对于快速导航而言,Vetur 提供了对 `import` 和 `<template>` 部分中的标签名解析能力,允许用户通过右键菜单或者快捷键跳转到对应的定义位置。 #### Vue Language Features (Volar) 作为官方推荐替代方案之一,Volar 能够提供更现代化的语言服务体验给基于 TypeScript 的项目环境下的开发人员使用。相比起旧版工具链来说更加轻量级同时也兼容更好一些新特性比如 Composition API 等等。此扩展同样具备强大的符号索引机制从而实现高效定位目标资源的功能。 如果希望手动配置其他高级选项,则可以通过安装额外依赖来增强其表现效果;例如设置路径别名映射关系以便全局范围内都能正确识别模块地址而无需每次都写全限定名称形式调用外部库函数方法体内部逻辑结构复杂度较高情况下尤其有用处。 ```javascript // tsconfig.json example configuration snippet for alias support with volar { "compilerOptions": { ... "paths": { "@/*": ["src/*"] } }, } ``` 另外值得注意的是当遇到某些特殊场景下可能还需要调整 workspace settings 来满足特定需求比如说开启实验性的ESLint集成模式等等操作步骤相对繁琐一点但是最终可以获得更好的整体性能优化成果展示出来给大家看哦! 最后提醒一下大家记得重启编辑器让更改生效哈~
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值