VSCode 开发前端插件

最新推荐文章于 2024-07-26 11:05:31 发布
最新推荐文章于 2024-07-26 11:05:31 发布
阅读量4.7k 收藏 77
点赞数 7
分类专栏： VSCode 文章标签： vue vscode js 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z772330927/article/details/107659186
版权

VSCode 开发前端插件

一、VUE(开发vue)

vue

在这里插入图片描述

Vue 2 Snippets

在这里插入图片描述

Vue VSCode Snippets

在这里插入图片描述

Vetur

在这里插入图片描述

Vuter

在这里插入图片描述

二、Auto

Auto Rename Tag

自动重命名标签
与Visual Studio IDE一样，自动重命名配对的HTML / XML标记。
在这里插入图片描述

Auto Close Tag

自动关闭标签
自动添加HTML / XML关闭标记，与Visual Studio IDE或Sublime Text相同。
在这里插入图片描述

三、Beautify

Beautify

美化javascript，JSON，CSS，Sass，和HTML的代码。
在这里插入图片描述

四、ESLint

ESLint

将ESLint集成到VS Code中
在这里插入图片描述

五、Code Runner

Code Runner

运行多种语言的代码段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT / CMD，BASH / SH，F＃脚本，F＃（ .NET Core），C＃脚本，C＃（.NET Core），VBScript，TypeScript，CoffeeScript，Scala，Swift，Julia，Crystal，OCaml脚本，R，AppleScript，Elixir，Visual Basic .NET，Clojure，Haxe，Objective-C ，Rust，球拍，Scheme，AutoHotkey，AutoIt，Kotlin，Dart，Free Pascal，Haskell，Nim，D，Lisp，Kit，V，SCSS，Sass，CUDA，Less和自定义命令在这里插入图片描述

六、CSS

CSS Modules

CSS模块扩展，支持自动完成，去定义
在这里插入图片描述

CSS Peek

速览：内联加载css文件并在那里进行快速编辑。（Ctrl+Shift+F12）
转至：直接跳至CSS文件或在新的编辑器（F12）中打开它
悬停：将定义悬停在符号（Ctrl+hover）上
在这里插入图片描述

cssrem

VSCode中的一个pxto rem插件，换算为rem（用于小程序开发）
在这里插入图片描述

七、小程序

minapp

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
在这里插入图片描述

八、npm

npm

该扩展支持运行文件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。
在这里插入图片描述

九、Image

Image preview

图像预览
在这里插入图片描述

十、Path

Path Autocomplete

路径自动完成
在这里插入图片描述

Path Intellisense

自动完成文件名的Visual Studio Code插件。
在这里插入图片描述

十一、PowerShell

PowerShell

该扩展为Visual Studio Code提供了丰富的PowerShell语言支持。现在，您可以使用Visual Studio Code提供的出色的类似IDE的界面编写和调试PowerShell脚本。

在这里插入图片描述

十二、Git

Git History

Git历史记录，搜索和更多内容（包括git log）
在这里插入图片描述

十三、Vant

Vant Snippets

自动补全Vant 组件的标签

在这里插入图片描述

十四、vscode

vscode-icons

vscode图标美观VSCode
在这里插入图片描述

Chinese (Simplified) Language Pack for Visual Studio Code

中文（简体）语言包为VS Code提供本地化界面。
在这里插入图片描述

十五、Debugger

Debugger for Chrome

使vscode上的断点到Chrome上，方便调试
在这里插入图片描述

Debugger for Firefox

使vscode上的断点到Firefox上，方便调试
在这里插入图片描述

十六、jQuery

jQuery Code Snippets

超过130个用于JavaScript代码的jQuery代码段。只需输入字母“ jq”即可获得所有可用的jQuery代码片段的列表。
在这里插入图片描述

十七、Color

Color Highlight

此扩展程序可样式化文档中找到的css / web颜色。
在这里插入图片描述

十八、注释

koroFileHeader

一个好玩的注释插件，按下快捷键，ctrl+shift+p 输入codeDesign
在这里插入图片描述

十九、Prettier

Prettier - Code formatter

Visual Studio代码格式化程序，是一个固执己见的代码格式化程序。 它执行一致的风格通过解析代码和重印,它有自己的规则,考虑到最大线长度,必要时包装代码。
在这里插入图片描述

二十 Bracket

Bracket Pair Colorizer**

可以将匹配的括号染成相同的颜色。同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人找不到对应的括号，这款插件可以帮你完美解决
在这里插入图片描述

Import

Import Cost

**Importcost可以在代码中显示导入的估计大小。
在这里插入图片描述
**
记录VSCode中有用的前端开发插件，会持续更新。

今天代码敲了吗
关注
专栏目录
VSCode搭建前端开发环境
yidianyuanzhidong的博客
06-01 2579
一、首先安装vscode 官网下载jiangchenVScode下载
前端开发Vscode插件
sunsktop的博客
08-12 2784
vscode插件（前端相关）
vs code 前端开发工具
02-10
前端开发工具，
VSCode 开发Vue必备插件
tangyb828的博客
09-28 477
Vetur 语法高亮、智能感知、Emmet等，包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着） EsLint 语法纠错 快捷键设置： 文件 -> 首选项 -> 键盘快捷方式 -> 搜索"fix" -> 修改"ESLint: Fix all auto-fixable Problems" 快捷方式为 “ctrl+alt+l” （IDEA 格式化代码快捷键） JavaScript(ES6) code sn
vs code中vue常用插件
最新发布
JavaUpgrade
07-26 1428
以上插件大多数都可以通过VS Code的扩展商店进行安装，并且都有详细的安装和使用说明。为了保持插件的更新和最佳性能，建议定期检查并更新已安装的插件。同时，随着技术的发展和Vue生态的变化，新的插件可能会不断出现，因此建议定期关注VS Code插件市场的动态，以便获取最新的工具和功能。
前端vscode开发工具
11-25
在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。 　　　都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。 　　　我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下
【前端】 Vscode 搭建基础开发环境
weixin_41979605的博客
07-11 9107
是否看见别人家的页面美如画，功能炫酷，效果叼叼，其实前端对于用户交互这一块还真是不错。特别是对于一些后端程序员来说，一直想学习写出亮瞎钛合金狗眼的页面（**_*）只要功夫深，肯定能入门，就让我来带你步入前端的大门吧vscode 本身就是js写的，经过测试，确实更适合前端开发，就如idea对于Java一样一样的推荐windows系统,毕竟windows才是用的人最多的(-,- )|客户说好才是真的直接使用电脑管家搜索vscode,下载安装即可(官网很慢) 默认是英文版本，我们安装中文插件。插件搜索 chine
vscode前端开发工具
07-11
vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具...
vscode 前端常用必备插件汇总
2301_82243626的博客
04-29 548
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vscode好用的前端插件和快捷键
sika-master的博客
05-25 1157
用到好用的vscode插件，总结一下 文章目录1.Material Theme主题2.Community Material Theme 1.Material Theme主题 这个主题可以设置tabs高亮提示，非常友好 2.Community Material Theme 主题的设置
VSCODE1.8X插件组合
01-23
【VSCODE1.8X插件组合】是针对Visual Studio Code 1.8.x版本的一组精心挑选的插件集合，这些插件被设计来增强编辑器的功能，提高开发效率，尤其对于前端开发者而言非常实用。它们安装在`.extensions`目录下，这是...
vscode-前端插件
weixin_44748599的博客
04-08 646
文章目录Auto Close TagAuto Rename TagBeautifyBracket Pair ColorizerDebugger for ChromeESLintHTML CSS SupportHTML SnippetsJavaScript(ES6) code snippetsjQuery Code SnippetsMarkdown Preview EnhancedmarkdownlintMaterial Icon Themeopen in browserPath IntellisenseRe
vue 时间回显 格式化_VSCode 开发Vue必备插件
weixin_39783426的博客
01-31 347
1。Vetur —— 语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）2。EsLint —— 语法纠错3。Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）4。Auto Close Tag —— 自动闭合HTM...
前端开发利器之VSCode
coder_jxd的博客
04-21 2759
小伙伴们大家好，本次和大家聊聊前端开发者最常使用的编辑器——VSCode。阅读本文，前端萌新可以快速上手此工具，前端老手则可以重新审视有无细节遗漏之处。
vs code 简易使用教程（前端）
热门推荐
supming1的专栏
10-01 3万+
一、常用设置： 1、设置tab为2空格 用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2 2、设置换行采用\n形式 用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。 如果映是\r\n了，可以通过下图的方式进行转换 二、vs code 常用插件 安装方法：点击vscode左侧扩展，搜索插件，点击安装 Path In...
VSCode前端开发插件
weixin_45703724的博客
06-30 768
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。
VSCode前端开发神器工具
weixin_33802505的博客
05-20 690
预计阅读时间： 2分钟 你还在使用SUBLIME TEXT,Atom,WEBSTORM,HBuilder 这些开发工具吗？那你就outdated了 微软开源的Visual Studio Code,简称VS Code，让你重新定义代码开发工具的神器，它是目前使用人数最多的编辑器。尽管它由微软发布于2015年，与其他热门编辑器相比显得有些年轻，但它在过去几年中一直在不停的更新，它在最新的Stack...
推荐用vsCode写前端的几个好用的插件
茂茂的博客
04-29 940
vsCode强大之处除了它免费以外，它的插件功能也是非常的强大，这里推荐几个写前端推荐用的插件（大佬别喷，我也是菜鸡！！！） Auto Rename Tag 这个插件最强大的就是，在写html标签时，修改标签名，闭合标签会自动更改 ...
vscode前端开发插件
08-27
对于前端开发者来说，VS Code 有很多非常实用的插件。以下是一些常用的前端开发插件： 1. ESLint：用于代码规范检查和自动修复。 2. Prettier：用于代码格式化，使代码风格统一。 3. HTML CSS Support：提供 HTML 和 CSS 的智能提示和自动完成。 4. Live Server：在本地启动一个实时预览服务器，方便调试和查看页面效果。 5. GitLens：增强了对 Git 的支持，可以查看代码的提交历史和作者等信息。 6. Auto Rename Tag：自动重命名 HTML 或 XML 标签的闭合标签。 7. IntelliSense for CSS class names：为 CSS 类名提供智能提示。 8. Debugger for Chrome：在 VS Code 中使用 Chrome 进行调试。 9. Path Intellisense：自动补全文件路径，避免手动输入错误路径。 10. Bracket Pair Colorizer：给代码中的括号配色，方便区分。 这只是一小部分常用的插件，你可以根据自己的需求在 VS Code 的插件市场中搜索并安装更多插件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值