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

article/2025/11/8 5:02:24

目录

一、前言

二、工具推荐

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,因此选择趁手好用的插件能事半功倍,也能能更好地编码以及获得更丝滑的开发体验。然后剩下的时间用来摸鱼是很有必要滴。

二、工具推荐

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

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

2.《ESLint》

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

3.《Git History》

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

4.vscode-icons 

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

效果图如下:

 5.Path Intellisense

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

 

 效果图如下:

6.《Vetur》

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

7.《GitLens — Git supercharged》

git团队项目管理工具。

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

效果如下:

8.《Image preview》

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

效果如下:

9.Debugger for Chrome

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

10.Prettier

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

11.AnyRule 

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

 

 效果图如下:

13.Vue Language Features (Volar)

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

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

14.Vite

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

15.Code Spell Checker

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

16.Error Lens

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

 

 效果图如下:

17.Angular Language Service。

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

18.Angular Files

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

19.《小霸王》

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

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

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

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

来源于:程序员摸鱼导航


http://chatgpt.dhexx.cn/article/i0GaXQjI.shtml

相关文章

前端开发IDE---VSCode前端开发环境配置

所安装的插件如下: 1、open in browser(2.0.0版本)详细内容见VSCode插件搜索。 修改默认浏览器的步骤: File>preferences>settings>点击那三个点>选择open settings.json>找到plugin open-in-browser按照提示在右边的json文…

前端开发IDE WebStorm使用

一、安装WebStorm 前往官网下载WebStorm: The Smartest JavaScript IDE, by JetBrains 二、无限试用期工具 链接:百度网盘 请输入提取码 提取码:ide0 直接将压缩包拖入IDE窗口,将会自动刷新一次试用期时间。 也可以手动刷新&#xf…

Web前端:面向Web开发人员的顶级JavaScript开发工具和IDE

​  JavaScript是最流行的编程语言并且受到所有浏览器的支持,增强了用户与网页的交互。也就是说,许多JavaScript IDEs现在提供智能课程完成和实时消除错误。 这些有效的工具带有精确的语法检查器和显式调试器,用于快速创建各种JavaScript应…

前端开发者最常用的六款IDE

一、Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和…

5款超好用的在线IDE,媲美vscode,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习、demo、原型开发

以下5款在线IDE,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习,写demo: 1、https://codesandbox.io/ 【推荐】 个人免费,支持公开项目个性化的设置,跨平台使用,…

工欲善其事,必先利其器——Web开发的10大IDE

工欲善其事,必先利其器——Web开发的10大IDE 一、Visual Studio Code二、PhpStorm三、Atom四、Pycharm五、NetBeans六、WebStorm七、Sublime Text八、Brackets九、IntelliJ IDEA十、HBuilderX 集成开发环境 (IDE) 是编码时极其重要的工具。在当今的市场上&#xff0…

Web前端:一些用于Web开发的最佳精选IDE和代码编辑器

​  IDE,或集成开发环境,是一种特殊的软件解决方案,能够为软件开发人员和计算机程序员提供全面的设施。它们通常包含多种工具,可帮助程序员更轻松地完成工作,从而提高生产力。 IDE可以为软件开发完全定制一个平台&am…

【干货】前端开发者最常用的六款IDE

一、Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和…

2.Latex安装和TeXworks Editor基础

二.Latex安装和TeXworks Editor使用教程 上一章我们讲解了什么是Latex和为什么我们要学习Latex,从这一章开始我们就要正式开始学习Latex 就像前面所讲的,Latex包含编译器和编辑器,我们需要在编辑器中编写夹杂代码的文本,然后通过编译器编译来查看效果, 本章作为后面学习的基…

latex安装血泪史及错误解决

我的电脑安装出现很多问题,基本上是卸载重新安装解决。 一:学校电脑,用户名是英文,下载texlive和texstudio都是清华大学镜像网站,分别是 https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/ ​​​…

Latex安装问题

Latex安装报错解决 Latex安装Latex报错 Latex安装 参考博文:https://blog.csdn.net/Mikowoo007/article/details/87378235?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.control&spm1001.2101.3001.4242 La…

LaTeX 安装及环境配置

LaTeX 安装及环境配置 一、背景二、准备1、核心库 TeX Live2、编辑器 TeXstudio 三、安装1、TeX Live 20202、TeXstudio 四、测试 一、背景 LaTeX(/ˈlɑːtɛx/,常被读作/ˈlɑːtɛk/或/ˈleɪtɛk/)是一种基于TeX的排版系统,由…

LaTeX 安装

文章目录 LaTeX 安装环境下载——TeXLive编辑器下载——WinEdt LaTeX 安装 需要安装 LaTeX 运行环境编辑器 运行环境 TeXLive、MiKTex、proText、CTeX、MacTeX、MikTex等编辑器 TEXStudio、WinEdt 等 环境下载——TeXLive 免费替代品MiKTeX TexLive下载 编辑器下载——Win…

LaTex安装与配置保姆级教程

一直想把大学期间用到的软件的安装教程整理下来,也方便自己随时查阅,但是因为爱偷懒并未实操成功,那就从今天开始吧! 今天我们要安装的软件是Texlive2023,安装在Windows10系统下,下面是具体的安装步骤&…

【Latex安装】

安装LaTex记录 TexLive下载使用 iso 安装 TexLive环境配置更新包列表镜像源更改 Texstudio的下载 TexLive下载 LaTex的环境安装可以选择TexLive或者是MikTex。我自己安装的是TexLive。 使用 iso 安装 TexLive texlive国内清华大学开源镜像下载地址:https://mirro…

Latex安装流程(图文)

文章目录 一、Latex安装包的下载二、软件安装三、VScode环境配置 一、Latex安装包的下载 输入网址:https://www.tug.org/texlive/ 点击on DVD 点击downloading the TeX Live ISO image and burning your own DVD 点击download from a nearby CTAN mirror 现在相应的版本文件…

LaTex安装与更新

目录标题 安装更新测试overleaf详细教程注释引用文献(知网)表格公式(Mathpix Snip) 简介:https://www.zhihu.com/question/268569440 一些模板与教程https://download.csdn.net/download/qq_45539458/25358003 安装 …

Latex安装失败问题

问题一&#xff1a; open(>C:\Users\\x{00c2}o\x{00c6}\x{00ee}\AppData\Local\Temp\sj5U6hahZk\tnOx_DyThu/texlive.infra.win32.r57932.tar.xz) failed: No such file or directory at F://tlpkg/TeXLive/TLUtils.pm line 1220, <STDIN> line 96. 原因&#xff1a;…

LaTex安装介绍

写在前面 很多的会议、期刊要求投稿使用LaTex编辑&#xff0c;而不是Word&#xff0c;使用好LaTex后&#xff0c;论文的排版任务确实会变得轻松。 1、下载软件 LaTex有很多衍生版&#xff0c;常用的推荐是Tex live&#xff0c;安装方式选择使用ISO镜像&#xff0c;点击下载&…

最新Latex安装详细教程

看到有的博客推荐CTeX&#xff0c;但CTeX已经没有维护了&#xff0c;所以这里还是推荐官方的TeX Live 官网&#xff1a;TeX Live官网 1、下载TeX Live 这里我直接去国内的镜像站点下载了 中科大镜像 点击下图箭头所示下载iso文件 2、双击打开下载好的iso文件&#xff0c;在…