vue在VSCode中使用的小技巧

最新推荐文章于 2024-04-08 09:22:56 发布
最新推荐文章于 2024-04-08 09:22:56 发布
阅读量249 收藏
点赞数 1
分类专栏： 基于vue/SpringBoot的图书管理系统 文章标签： vscode vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43985785/article/details/114933240
版权

1、更改VSCode显示语言为中文
Ctrl+Shift+P 搜索display配置语言
在这里插入图片描述
选择中文
在这里插入图片描述
重启VSCode后启用

2、将设置更改为自动保存代码
文件->首选项->设置，更改为afterdelay
在这里插入图片描述
3、设置成更改代码后实时预览
点击【扩展】，搜索”live serve“
在这里插入图片描述
选择Install安装，重启后在最下面的状态栏会有个 GO Live
在这里插入图片描述
点击即可使用

枇杷弹琵琶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VSCode插件安装完成后的配置详解
10-14
19. `"emmet.syntaxProfiles"`：配置Emmet对不同语言的支持，例如在JavaScript中使用JSX。 20. `"eslint.enable": true`：开启ESLint代码检查。 21. `"eslint.options"`：指定ESLint的文件扩展名，例如检查`.js`和...
VSCode插件分享：一个实时预览Vue/React组件的插件
qq_43067585的博客
11-16 6903
在VSCode中开发Vue/React组件时，怎么实时预览组件？本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件，希望对大家有所帮助！
vscode-实现html和vue实时预览-对比了vscode的8个预览插件
billycoder的专栏
02-06 2万+
1.Open in Browser 打开chrome浏览器或者其他外部浏览器 总结:单纯想打开外部浏览器,用它 2.HTML Preview 内嵌浏览器 打开方便,当前页面是html页面,点击右上角图标就可以了 可以实时预览效果 不足:带图片的话,不能有中文路径 3.vscode-preview-server 可以实时预览效果 右键使用 可以内嵌,也可以外部 右键使用 4.Live Server 可以实时预览效果 右键使用 打开外部浏览器 右键菜单 5. Brow
如何在VSCode内嵌浏览器实时预览Vue项目
m0_50298323的博客
07-28 5372
如何在VSCode内嵌浏览器实时预览Vue项目
vscode内置浏览器 开发vue 显示网址
web修理工
05-31 7701
最近使用VS Code开发vue项目，需要经常在编辑器和浏览器之间来回切换查看页面效果，感觉特别繁琐！今天就来分享下如何在VS Code中实时预览HTML页面或VUE/React/Angular等页面效果。 vscode预览HTML 1、HTML Preview 在扩展中搜索“ HTML Preview ”，点击安装，通过如下快捷键预览页面。 打开浏览器预览 - ctrl+shift+v or cmd+shift+v 编辑器侧边预览 - ctrl+k v or cmd+k v 2、Live Server
推荐vscode 前端预览插件 vue开发推荐插件
情随事迁个人博客
07-24 222
live preview主要针对html项目直接预览，能够根据文件修改的情况自动刷新？ image.png 预览方式在打开的文件点放大镜图标 component previewer image.png 打开方式，底部栏打开c preview,需要修改固定网址主要针对vue这样的开发 image.png 关于语法提示 vue development extension p...
在 vscode 上使用 typescript 和 jsx 开发 ios 小组件的小框架.zip
02-08
在Scriptable小部件开发中使用TypeScript可以确保我们在编写代码时得到更好的类型检查和错误预防。 JSX是React库中的一种语法糖，允许我们像HTML一样书写JavaScript。虽然在iOS Scriptable环境中我们并不直接使用...
vscode分享代码插件Polacode介绍
12-17
在 VSCode 中，还有许多其他有用的插件，比如 ESlint，它能帮助开发者遵循特定的编码规范，自动修复代码错误；对于 Vue 开发者，有专门的 Vue 代码高亮插件；对于 Python 开发，有集成调试和语法高亮的插件；此外，...
vue3快速上手代码，学习方案
最新发布
05-23
在这个Vue3项目中，它可能包含了Vue的`<script>`标签，引用了Vue3的构建输出，以及可能的其他第三方库。 `package-lock.json` 和 `package.json` 文件是Node.js项目的依赖管理工具NPM的产物。`package.json` 存储...
基于ssm+vue校园美食交流系统.zip
04-02
微信小程序可以让用户在微信内便捷地访问和使用美食交流功能，扩大了服务的覆盖范围。 四、系统功能设计 1. 用户模块：包括用户注册、登录、个人信息管理等，可能采用了JWT（JSON Web Tokens）进行身份验证。 2. ...
vscode怎么看vue界面_VSCode打开已有vuejs项目
weixin_39733821的博客
12-18 3310
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件-&g...
VSCode扩展(前端Vue开发使用)
学习记录
01-04 7921
以下扩展是我编写当前项目代码使用到的，记录一下 Debugger for Chrome VS中启动Chrome控制台 Auto Rename Tag 重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签 background 这个就是一个非常可爱的美化背景，我称它为“小可爱”，每次编程都会心情美好，有bug报红也不能生气，哈哈哈 Beautify 自动对html，js，css进行格式化对齐显示 Bootstrap 3 Snipper .
vscode运行vue项目
代上老码的专栏
04-08 4971
通过以上步骤，你应该能够在VSCode中成功运行和开发Vue项目。记得利用VSCode的扩展市场来安装一些有用的扩展，比如Vetur或Volar，它们可以提供语法高亮、代码片段、格式化和Linting等功能，以提高你的开发效率。： 在VSCode中，打开项目根目录后，你会看到一个提示，要求你安装项目依赖。： 使用VSCode打开你的Vue项目。你可以通过VSCode的“文件”菜单选择“打开文件夹...”，然后导航到你的Vue项目目录。默认情况下，你的Vue应用将在。，你应该能够看到你的Vue项目正在运行。
三、使用VSCode运行vue项目（VSCode插件设置）
热门推荐
weixin_45681674的博客
08-10 2万+
前言1. 打开VSCode1. 下载vetur插件2. 下载eslint插件3. Auto Close Tag 自动闭合HTML/XML标签4. Debugger for Chrome2. 打开vue项目 1. 打开VSCode 1. 下载vetur插件 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行， 装好后 点击文件->首选项->设置 ->打开设置 界面，在设置界面右侧添加配置。 "emmet.syntaxProfiles": {
VSCode可视化调试Vue代码
lihefei_coder的博客
01-06 6918
1.安装扩展Browser Preview 安装完成后在侧栏会多出一个图标，点击后就能打开内置谷歌浏览器 2.安装扩展Debugger for Chrome 3.在项目里创建launch.js文件 会在当前项目下生成文件夹和配置文件 4.编辑launch.js url与项目启动后的地址保持一致 { // Use IntelliSense to learn about possib...
vscode中直接出现vue组件模板的快捷方式
蔡菜小奥比的博客
07-07 1966
vscode中直接使用vue模板的快捷方式
VSCode的组件使用
gao_jun1的博客
08-18 756
一、配置中文环境 ①、找到搜索框，输入【Chinese Language】，选择【中文简体】进行安装 ②、安装完成之后，重启VSCode，即可转换为中文环境 二、运行前端项目（不是vue） ①、找到搜索框，输入【Live Server】，点击【安装】 ②、安装成功之后，在右下角的位置有【Port：5500】，页面保存之后，点击即可运行 本篇博文介绍的是自己在使用VSCode写前端页面时经常使用的一些组件，希望对大家有帮助。 ...
前端、VUE开发 VS Code (10个常用快捷键、17个常用插件)
阿鹏的博客
03-03 1万+
VS Code 使用指南 [前端开发] VS Code 是一款来自Microsoft某团队的优秀的套壳浏览器(开源 免费 编辑器) 真香！ ???? 下载地址：https://code.visualstudio.com/ 快捷键 我常用的快捷键 打卡终端 CTRL + ` 显示/隐藏侧边栏 CTRL + B 查找下一个（需要先选中） CTRL + D 格式化代码 ALT + SHIFT + F ......
vscode中vue项目点击链接，跳转对应引入模块
qq_41231694的博客
02-03 3087
2、项目根目录中的jsconfig.json或者tsconfig.json（没有的话手动创建），第一个无法跳转到对应目录，第二个却可以。1、项目中配置@的alias别名。
vscode运行vue项目vscode插件使用
08-13
要在VSCode中运行Vue项目，可以按照以下步骤操作： 1. 确保你已经安装了Node.js和Vue CLI。如果没有安装，你可以在官方网站上下载并按照指示进行安装。 2. 在VSCode中打开你的Vue项目文件夹。 3. 打开终端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值