【VsCode】使用VsCode学习VUE+TS必备插件

最新推荐文章于 2024-05-14 10:33:58 发布
最新推荐文章于 2024-05-14 10:33:58 发布
阅读量927 收藏 6
点赞数 3
分类专栏： 前后端通吃 文章标签： vscode 学习 vue.js 插件 格式化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Larry_794204525/article/details/138203738
版权
本文介绍了几个VSCode插件，包括自动补全HTML标签的AutoCloseTag，自动修正标签对的AutoRenameTag，智能路径提示PathIntellisense，以及在浏览器中打开HTML文件的OpeninBrowser。此外，还提到了微软的IntelliCode、Vue框架的官方推荐插件Volar和Vetur的关系，以及代码格式化工具Prettier和语法检查工具ESLint。
摘要由CSDN通过智能技术生成

目录标题

《Auto Close Tag》💕

自动补全html 标签

// 输入
<MyTag>
// 就可以自动补全
<MyTag></MyTag>

《Auto Rename Tag》💕

修改 html 标签，自动帮你完成尾部闭合标签的同步修改

在这里插入图片描述

《Path Intellisense》

智能路径提示，可以在你输入文件路径时智能提示

《Open in Browser》💕

从 vscode 打开 html 文件，并且可以自由选择用哪个浏览器打开

《IntelliCode》

微软推出的一款代码智能提示插件

《Vue-Official》💕

Volar 正式升级更名为 Vue-Official ！
提示：如果使用的是vue2，则使用 Vetur 插件；使用 vue3 的话 ，要禁用 Vetur 插件，然后用 Volar 插件。两个插件不要同时使用，会冲突。
请添加图片描述

《Prettier - Code formatter》💕

prettier规范的是代码偏向于排版层面上的风格。

《ESLint》💕

eslint,它规范的是代码偏向语法层面上的风格。

无休居士
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode插件开发之Swagger生成Ts
a1196324866的博客
11-23 2821
vscode插件开发之Swagger生成Ts。当后端同学给到我们Swagger接口文档的时候，是不是在为要写接口类型烦恼，为了偷懒，那么就any吧。any一时爽，同事泪两行。为了高质量的偷懒，来开发个插件。利用SwaggerApiJson和vscode的webVIew功能。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3 + Vite + Ts 开发必备的 VSCode 插件
yanby921005的博客
11-14 1057
TypeScript Hero：可以帮助你快速重构 TypeScript 代码，包括重命名、提取函数等。TSLint：另一个代码风格检查工具，可以帮助你遵循一致的 TypeScript 代码风格。GitLens：方便的 Git 工具，可以快速查看代码的 Git 历史记录、文件修改记录等。GitLens：方便的 Git 工具，可以快速查看代码的 Git 历史记录、文件修改记录等。Prettier：代码格式化工具，可以根据配置格式化代码，让你的代码更加整洁易读。Vue Peek：快速定位 Vue 组件和模板。
VsCode中搭建TypeScript调试环境
m0_47584501的博客
09-15 9799
无摘要
vscode好用的插件
热门推荐
李小乐er
04-27 6万+
1.Chinese (Simplified) Language Pack for Visual Studio Code（汉化vscode 必备） 2.Bracket Pair Colorizer（给代码中的括号添加亮色 便于区分 这里截图有报错 是特意便于演示写的多组括号） 3.Auto Close Tag （自动补全标签 必备） 4.Auto Rename Tag （修改标签名 自动同步修改闭合标签的标签名 必备） 5.Class autocomplete for HTML （自动补全cl
VSCode 配置插件
qq_34820433的博客
04-13 2595
TypeScript 中开发中 VSCode 配置和插件安装。
前端 VSCode 插件
weixin_43867229的博客
05-25 398
前端 vscode 插件
【vue3+ts】项目初始化+vscode插件
string佳佳的博客
10-12 464
如果安装了vue2的插件vetur，要禁用掉，否则插件会冲突。搜索volar，安装前面两个。
基于vue+springboot在线考试系统 框架 idea + vscode + html + css + vue + jav
最新发布
06-19
基于vue+springboot在线考试系统 框架 idea + vscode + html + css + vue + java + springboot + mysql 角色 管理员 9999 123456 教师用户 777 123456 学生用户 111 123456 模块介绍 管理员 登陆模块 ...
vscode 插件开发 + vue的操作方法
10-15
在开发VSCode插件时，有时我们希望将Vue应用程序集成其中，为用户提供更丰富的交互体验。下面我们将详细探讨如何在VSCode插件开发中结合Vue进行操作。 首先，我们需要一个已经开发好的Vue项目。确保你的Vue项目配置...
VScode集成插件
03-25
1.下次github网址下对应vscode相关插件； 2.可执行go install 指令进行安装； 3.可直接使用bin下编译好的dlv.exe godef.exe等一系列相关插件。
vscode ts安装环境
04-18
vscode ts安装环境。。
vue+cli+ts项目实战.rar
04-02
《Vue+CLI+TS项目实战解析》 Vue.js 是一款流行的前端框架，以其简洁的API和高效的性能赢得了开发者们的喜爱。Vue CLI（命令行界面工具）则是官方提供的一个强大脚手架，它使得构建Vue项目变得简单快捷。在这个...
2024前端vscode必备插件(持续更新)
weixin_60053942的博客
04-05 1万+
2024前端vscode必备插件，包含 vue、html、css、ai、调试等等，提高你的开发效率
VScode用TS写Vue使用到的一些扩展详解
m0_58235310的博客
11-30 264
标签更改时自动更名。
vscode Vue ts 自定义模板
贪睡的小聪
03-15 1021
vscode Vue ts 自定义模板 首先打开vscode选择用户片段 选择vue.json { // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be ex
vscode上不容错过的插件
在下是小白的博客
05-03 298
！ 快速生成html模板。
2024年最全VSCode 开发Vue必备插件，2024年最新三面美团前端岗
2401_84413092的博客
05-14 559
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】语法纠错映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）自动闭合HTML/XML标签自动完成另一侧标签的同步修改ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间自动路径补全。
vscode+vue3+vuex+uniapp怎么配置
08-28
对于在VSCode中配置Vue3、Vuex和Uniapp的开发环境，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。你可以在官网上下载并安装它们。 2. 接下来，你需要全局安装Vue CLI。在命令行中执行以下命令： ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue项目。在命令行中进入你想要创建项目的目录，并执行以下命令： ``` vue create your-project-name ``` 根据提示选择你需要的特性和插件，包括Vuex，以及是否使用TypeScript等。 4. 安装Uniapp插件。在命令行中进入项目目录，并执行以下命令： ``` vue add uni-app ``` 根据提示选择适用于你的平台（如H5、微信小程序等）以及是否使用TypeScript等。 5. 配置Vuex。在项目目录中找到src目录，然后创建一个store目录，在其中创建一个index.js文件。在index.js中编写你的Vuex配置，例如： ```javascript import { createStore } from 'vuex' const store = createStore({ state: { // 状态 }, mutations: { // 修改状态的方法 }, actions: { // 异步操作 }, getters: { // 计算属性 } }) export default store ``` 然后，在src目录的main.js中引入Vuex并使用它： ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store/index' createApp(App).use(store).mount('#app') ``` 6. 在VSCode中打开你的项目，在扩展商店中搜索并安装Vue、Vuex和Uniapp相关的插件，例如"Vetur"和"uniapp-snippet"等。这些插件将提供语法高亮、代码提示和其他开发工具。 现在，你已经成功配置了VSCode中的Vue3、Vuex和Uniapp开发环境。你可以开始开发你的项目了。祝你好运！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值