VsCode 常用好用插件/配置+开发Vue 必装的插件

这篇具有很好参考价值的文章主要介绍了VsCode 常用好用插件/配置+开发Vue 必装的插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、VsCode 常用好用插件

VsCode 常用好用插件/配置+开发Vue 必装的插件

1、实时刷新网页的插件:LiveServer


2、open in browser

支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari


补充一下:LiveServer 和 open in browser 区别:注意观察浏览器地址栏

  • open in browser:直接打开HTML文件就是通过File协议打开的
  • LiveServer: 通过http 协议打开的,地址栏会上看到主机名, Live Server启动了一个本地开发服务器,静态和动态页面都可以实时重载。

3、自动保存:不用装插件,在VsCode中设置一下就行

VsCode 常用好用插件/配置+开发Vue 必装的插件


4、设置ctr+滚轮改变字体大小

VsCode 常用好用插件/配置+开发Vue 必装的插件


5、自动闭合HTML/XML标签:Auto Close Tag


6、图片自动检查:Image preview


7、资源树目录:vscode-icon

它不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标


8、本地历史代码记录: local history


9、git相关的插件:Git History

Git History提供了一个可视化的git日志。不再需要在终端查看git日志。可以比较各个分支、提交和跨提交的文件。


10、AI 智能提示的插件:Tabnine

用IDE编写代码的时候可以给出智能提示,写的越多提示的越准确




选择性安装

像颜色提示、主题那种,还有语法检查、语法智能提示等

HTML CSS Support

智能提示CSS类名以及id

HTML Snippets

智能提示HTML标签,以及标签含义

JavaScript(ES6) code snippets

ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

jQuery Code Snippets

jQuery代码智能提示

CSS Peek

使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。



一、VsCode 常用好用插件

1、【vue2】安装一个方便阅读 vue 代码的插件:Vetur

  • 安装之后,vue 代码,文本颜色开始发生变化[注释是绿色的哈哈哈],不安装,代码全是白色的。

Vetur插件介绍:功能包括-语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。文章来源地址https://www.toymoban.com/news/detail-479029.html

  • vue3 使用的是插件 Vue Language Features (Volar)

到了这里,关于VsCode 常用好用插件/配置+开发Vue 必装的插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VScode开发Vue必备插件及配置

    最佳的工具和插件配最佳的程序员~ Visual Studio代码设置同步 配合github账号 让你在全新电脑上打开全新VScode能把最佳插件和配置下载下来以及随时维护更新! 主要操作: 1、Upload Your Settings --上传 Press Shift + Alt + U (macOS: Shift + Option + U) 2、Download your Settings --下载 Press Shift + Alt + D

    2023年04月08日
    浏览(44)
  • WebStorm前端开发神器:十大必装插件推荐

    WebStorm是JetBrains推出的一款专业的JavaScript IDE,它提供了强大的JavaScript/TypeScript开发环境和工作流。作为前端开发人员,我们可以通过安装各种插件来丰富和增强WebStorm的功能。本文将为大家推荐10个WebStorm前端开发必装的插件。 HTML CSS Support插件可以为HTML和CSS文件提供高亮,自动完

    2024年02月08日
    浏览(58)
  • 【开发必备】推荐几个非常好用的前端VsCode插件,快来看看你都用过哪些?

    VSCode是前端开发的武器,下面给大家推荐几个必备的、非常好用的前端VsCode插件 Better Align就是一款能够实现代码规范的工具,它主要用于代码的上下对齐。它能够用冒号(:)、赋值(=,+,-=,*=,/=)和箭头(=)对齐代码。 它的主要功能是为代码中的括号或者其他符号配

    2024年02月10日
    浏览(37)
  • vscode实用配置、常用插件

    一、配置自动保存 文件--首选项--设置--输入“自动保存” 在Files:Auto Save中  选择afterDelay 在Files: Auto Save Delay中配置延迟保存的时间 二:插件vetur 常用功能: 1、使.vue代码高亮 安装激活vetur插件, 代码就有高亮,显示彩色 不仅仅vue文件,vetur还支持很多语言的代码高亮,如下

    2024年02月09日
    浏览(33)
  • Vscode——开发常用插件分享

    vscode插件是为了更高效的代码开发,为了美观的代码格式。 1.简体中文语言包 插件名称:Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 作用:将VSCode操作界面转换为中文,安装完成,重启VScode即可 2.显示文件图标 插件名称:vscode-icons 作用:vscode中的文件管理的树目

    2024年02月03日
    浏览(32)
  • VSCode卸载、重装配置、常用快捷键、插件

    参考: 彻底卸载VSCode 控制面板卸载VSCode. 删除安装插件 win+R输入 %userprofile% ,删除当前路径下的.vscode文件夹。 删除用户信息和缓存信息 win+R输入 %appdata% ,删除当前路径下的Code和Visual Studio Code文件夹。 Chinese(Simplified) 显示语言为中文 (必装) Auto Rename Tag 修改开始标签,

    2024年02月02日
    浏览(44)
  • VScode vue常用插件 Ctrl+左键 函数跳转 自定义属性跳转

    1、CSS Peek 按ctrl可以跳转css定义,按ctrl 2、Auto Rename Tag ** 修改html标签自动补全,改了首标签,尾部自动变 3、vetur 写vue肯定要有 4、vscode-elm-jump 常规的代码跳转定义,按ctrl,和webstrom一样 5、vue-helper 让你在vue单文件里面的变量函数跳转定义,按ctrl 6、Code Runner 自动检测packj

    2024年02月08日
    浏览(33)
  • 分享 Vue3 开发必备的 VSCode 插件

    分享 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用 1. Volar  🔥 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。 而随着 Vu

    2024年02月13日
    浏览(34)
  • VSCode开发 Vue3 建议必备的插件

    在使用 Visual Studio Code (VSCode) 开发 Vue 3 项目时,有一些插件可以提高开发效率、代码质量和工作流程。以下是一些常用的插件,它们可以被视为 Vue 3 开发的必备插件:  提供 Vue 文件的语法高亮。 支持 Vue 文件的智能感知和自动完成。 提供了 Vue 文件的格式化工具。 Vetur 插件

    2024年02月04日
    浏览(41)
  • VScode 好用的插件合集

    VS Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的VS Code其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让VS Code成为了开发语言工具中的霸主,让其同时支持开发多种语言成为了可能。俗

    2024年01月19日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包