前端vscode必备插件(强烈推荐)

这篇具有很好参考价值的文章主要介绍了前端vscode必备插件(强烈推荐)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端vscode必备插件(强烈推荐)

目录

一、前言

二、工具推荐

1.《Chinese (Simplified) (简体中文) Language》

2.《ESLint》

3.《Git History》

4.vscode-icons 

5.Path Intellisense

6.《Vetur》

7.《GitLens — Git supercharged》

8.《Image preview》

9.Debugger for Chrome

10.Prettier

11.AnyRule 

13.Vue Language Features (Volar)

14.Vite

15.Code Spell Checker

16.Error Lens

17.Angular Language Service。

18.Angular Files

19.《小霸王》


一、前言

VSCode 是我们前端开发的一个强大的IDE,因此选择趁手好用的插件能事半功倍,也能能更好地编码以及获得更丝滑的开发体验。然后剩下的时间用来摸鱼是很有必要滴。

前端vscode必备插件(强烈推荐)

二、工具推荐

1.《Chinese (Simplified) (简体中文) Language》

首先呢,我先推荐的就是最基础的语言包,没办法,英语水平太捞了哈哈哈,弄起来后就舒服多了,汉语yyds~。

前端vscode必备插件(强烈推荐)

2.《ESLint》

这个其实真的是又爱又恨,有时候一些写法自己觉得很舒服,他就给你提示不规范,看个人开发习惯吧哈哈哈。

前端vscode必备插件(强烈推荐)

3.《Git History》

查看git的分支管理、提交记录等。

前端vscode必备插件(强烈推荐)

4.vscode-icons 

该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标,让你更容易地识别文件。

前端vscode必备插件(强烈推荐)

效果图如下:

前端vscode必备插件(强烈推荐)

 5.Path Intellisense

该扩展可以自动补全代码中的路径和文件名。例如前端的静态文件引入路径填写修改。

 前端vscode必备插件(强烈推荐)

 效果图如下:

前端vscode必备插件(强烈推荐)

6.《Vetur》

这个vue开发者必备的扩展就不多做解释了,代码高亮,补齐等等。

前端vscode必备插件(强烈推荐)

7.《GitLens — Git supercharged》

git团队项目管理工具。

前端vscode必备插件(强烈推荐)

这个工具可以清楚的看见哪些bug是谁写的,还有很多功能,也是团队开发中必安的插件。

效果如下:

前端vscode必备插件(强烈推荐)

8.《Image preview》

图片是否正确引入的显示工具,在图片连接上按住ctrl,鼠标悬浮即可看见是否正确找到路径下的图片文件,非常有用!

前端vscode必备插件(强烈推荐)

效果如下:

前端vscode必备插件(强烈推荐)

9.Debugger for Chrome

映射vscode上的断点到chrome上,方便调试。

前端vscode必备插件(强烈推荐)

10.Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯。

前端vscode必备插件(强烈推荐)

11.AnyRule 

这是一个用来快速检索常用正则表达式的插件,希望能给大家在繁忙的开发过程中带来一丁点的效率提升。

前端vscode必备插件(强烈推荐) 

 效果图如下:

前端vscode必备插件(强烈推荐)

13.Vue Language Features (Volar)

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布,Vue 团队官方推荐 Volar 插件来代替 Vetur 插件,不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

前端vscode必备插件(强烈推荐)

14.Vite

Vite 插件可以让我们打开项目后,就能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

前端vscode必备插件(强烈推荐)

15.Code Spell Checker

Code Spell Checker 是在VSCode中的一款插件,能够帮助我们检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰拼写法)。

前端vscode必备插件(强烈推荐)

16.Error Lens

可以将代码中不符合规范或者逻辑不通顺的错误提示信息展示在代码行内 。

 前端vscode必备插件(强烈推荐)

 效果图如下:

前端vscode必备插件(强烈推荐)

17.Angular Language Service。

超好用的从模板 html F12一键定位变量定义位置.。

前端vscode必备插件(强烈推荐)

18.Angular Files

前端vscode必备插件(强烈推荐)

前端vscode必备插件(强烈推荐)

使用angular框架开发项目的同学,可以安装一键生成angular需要的文件。

19.《小霸王》

前端vscode必备插件(强烈推荐)

在线支持几十款游戏,实乃上班娱乐摸鱼的必备插件!!!!!

上有超级玛丽下有坦克大战 开箱即用 点开即玩 可放大放小 娱乐无穷!!!!

前端vscode必备插件(强烈推荐)

就先介绍这几款常用的插件,让大家更好地编码和获得更丝滑的开发体验。也欢迎各位朋友补充推荐哈。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

来源于:程序员摸鱼导航

往期回顾

 前端vscode格式化配置

 前端vscode必备插件(强烈推荐)文章来源地址https://www.toymoban.com/news/detail-460152.html

到了这里,关于前端vscode必备插件(强烈推荐)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端vscode必备插件

    1、Auto Rename Tag⭐ 修改标签会同步修改 2、Auto Import - ES6, TS, JSX, TSX 自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于 JavaScript (ES6) 和 TypeScript (TS) 3、Code Runner⭐ 快速运行 调试js 4、CSS Peek 跳转对应 css 5、DotENV 高亮ENV文件 6、Error Lens 显示错误 7、ESLint 8、GitL

    2024年02月03日
    浏览(30)
  • 前端必备的开发工具推荐——VScode代码编辑器

            VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也

    2024年02月02日
    浏览(53)
  • VSCode前端必备插件2022版(持续更新)

    VSCode作为我们前端主流的开发工具,优势自然在于它的扩展插件,可以有效地提高开发效率和团队协作,本文提高的都是UP主亲测,最底下贴入我的vscode设置,如果有发现不错的插件,小伙伴们也可以私信UP主,觉得UP主推荐的不错的小伙伴们,请多多支持!话不多说直接上。

    2023年04月26日
    浏览(35)
  • IDEA强烈推荐的TOP14插件

    最近家里组装了一台台式机,各种开发环境必不可少,在安装IDEA之后,就开始盘点之前MacBook上安装的各个好用的插件。 1. Background Image Plus 设置IDEA的背景图片,View -- set Background Image,选择背景图片 效果图: 2. Grep Console 可以根据表达式,对控制台的打印日志设置不同的背景

    2024年02月08日
    浏览(32)
  • idea热部署插件JRebel激活(强烈推荐,试试就离不开了)

    JRebel可以实现在idea中热部署项目,修改后不用重启项目,让开发更丝滑。 JRebel需要激活才可以正常使用。 博主最近在找工作,Java前后端全站工程师一枚,有合适的请帮博主推荐一下 有项目的也可以联系我,感谢感谢 博主在北京 2023-07-04 发 V:y393016244 FileSettingsPlugins 搜索

    2024年02月13日
    浏览(37)
  • 强烈推荐 十多款2023年必备国内外王炸级AI工具 (免费 精品 好用) 让你秒变神一样的装逼佬、感受10倍生产力

    🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注 前言 ❤️ 现在 AI人工智能 一直是一个热门话题,尤其是最近各种充斥着 AI 领域

    2024年02月06日
    浏览(89)
  • 【强烈推荐】 十多款2023年必备国内外王炸级AI工具 (免费 精品 好用) 让你秒变神一样的装逼佬感受10倍生产力 (3) AI绘画 我的天,淘汰原画师的神器来了,赶紧闪!

    🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注 AI 绘画 AI人工智能 不仅可以处理图片和声音,在绘画和绘图方面的应用也有很大

    2024年02月12日
    浏览(57)
  • VSCode必备插件!快看过来!

    同学同学,你是不是也很头疼VSCode不知道安装什么插件啊?尤其是萌新小白,更是一头雾水,那就快来一起看看吧~ 1.Chinese:中文(简体中文) 语言包中文插件,必备的 2.Error Lens:主要用于代码编辑时错误及警告的提示和展示 3.Code Spell Checker:源代码拼写检查器,提示代码中单词

    2024年02月08日
    浏览(39)
  • 程序员推荐!JetBrains IDEs使用技巧与必备插件

    JetBrains是耳熟能详的软件开发工具提供商,旗下的IDE集成开发环境被广泛应用于不同的开发领域。本文将向新手介绍JetBrains IDEs的基本知识和常用功能。 什么是JetBrains IDEs? JetBrains IDEs是一套面向软件开发的集成开发环境,可以为Java、Python、PHP、C#、Ruby等多种编程语言提供全

    2024年02月11日
    浏览(36)
  • 实用工具推荐,浏览器必备宝藏插件:Wetab新标签页

    打开浏览器,你的起始页是否充满了广告和各种乱七八糟的信息呢?或者过于单调,而失去了某些你想要的功能? 这里给大家推荐一个在Chrome浏览器和edge浏览器上都能愉快使用的浏览器插件——Wetab新标签页。没有广告、页面干净美观且具备各种实用功能。   下面就给大家

    2024年02月08日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包