前端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-407814.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日
    浏览(36)
  • 【VScode】前端必备插件(全)

    Chinese (Simplified) 适用于 VS Code 的中文(简体)语言包 Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag 自动重命名配对的HTML/XML标记 ,完成另一侧标签的同步修改 Path Intellisense 自动提示文件路径,支持各种快速引入文件,支持自动补全 Bracket Pair Colorizer 给括号加上不同的颜色,便

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

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

    2023年04月26日
    浏览(42)
  • 实用工具推荐,浏览器必备宝藏插件:Wetab新标签页

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

    2024年02月08日
    浏览(45)
  • 自动驾驶工具链(1): Vscode中推荐的Git插件

    前言: Vscode 作为轻量化的调试工具深受广大开发者的青睐,虽然大家都用它来看新闻逛论坛炒股,但是用它开发算法确实方便;Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理,Apollo代码的版本就算使用Git进行管理。 本文将介绍

    2024年02月08日
    浏览(46)
  • 【工具】Github统计代码行数工具推荐(VScode插件、兼容任何平台、不用下载安装包)

    需求: 1)被要求统计代码行数; 2)不想打开Linux,懒得下载Windows版本GitStats; 3)打开了Linux但也不记得find命令行怎么用; 4)打开了Linux,装好了Gitstats但自己没有图形化界面所以无法打开其输出结果; 5)习惯用VScode编程。 其他工具: 1)Linux愿意使用Gitstats的请直接转到

    2024年02月05日
    浏览(51)
  • 【工具】Vscode翻译插件推荐(不用谷歌翻译api、支持短句英汉互译、支持查词、支持自动补全、不需要浏览器)

    需求: 1)偶尔需要查英文生词; 2)有时候想不起来中文对应的英文; 3)不想回到浏览器打开一堆网页; 4)谷歌翻译挂了。 偶尔需要的需求: 1)短句翻译。 因为谷歌翻译挂了,首先,排除最热门的翻译插件Vscode Google Translate,以及一系列衍生产品。 由于搜索“translate”

    2023年04月08日
    浏览(43)
  • VSCode必备插件!快看过来!

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

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

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

    2024年02月11日
    浏览(43)
  • 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日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包