VSCode 前端插件推荐

已于 2023-04-06 16:10:04 修改
阅读量2.4k 收藏 14
点赞数 4
分类专栏： 开发工具 文章标签： 前端 vscode ide
于 2022-07-18 14:37:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43114209/article/details/125847920
版权

开发综合推荐

别名路径跳转

插件名：别名路径跳转
使用说明: 别名路径跳转插件，支持任何项目，
使用场景: 当你在开发页面时, 想点击别名路径导入的组件时（演示如下）
配置说明

  • 下载后只需自定义配置一些自己常用的别名路径即可
// 文件名别名跳转
  "alias-skip.mappings": {
    "~@/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"
  },
  • 右击插件–》扩展设置–》路径映射在settinas.json中编辑
    使用效果
    在这里插入图片描述

路径别名智能提示
插件名：path-alias
场景: 在导入组件的时候，使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突）
安装效果和功能
在这里插入图片描述
在这里插入图片描述
indent-rainbow
插件名: indent-rainbow
功能：彩虹缩进
在这里插入图片描述
Bracket Pair Colorizer 2
插件名: Bracket Pair Colorizer 2
功能：给匹配的括号() 或者 对象{}… 添加对应的颜色用于区分
在这里插入图片描述
Auto Rename Tag
插件名: Auto Rename Tag
功能：自动重命名标签
在这里插入图片描述
Code Spell Checker
插件名：Code Spell Checker
功能：检查单词拼写是否错误（支持英语）
在这里插入图片描述
Code Runner
插件名：Code Runner
功能：一键执行各种语言代码（常用于测试）
在这里插入图片描述
Debugger for Chrome
插件名：Debugger for Chrome
功能：在VSCode端，调试代码
在这里插入图片描述
Live ServerPP
插件名：Live ServerPP
功能：在服务器端打开你的文件，实时显示你修改的代码
支持websocket 消息服务，可以用于调试websocket 客户端
支持可编程虚拟文件，可用于模拟服务端API接口
在这里插入图片描述
Svg Preview
插件名：Svg Preview
功能：可以显示你的SVG图片，还可以编辑
在这里插入图片描述
Tabnine
插件名：Tabnine
功能：智能提示代码，可以预测你将要写的代码进行提示
在这里插入图片描述
Template String Converter
插件名：Template String Converter
功能：在字符串中输入$触发，将字符串转换为模板字符串在这里插入图片描述
vscode-pigments
插件名：vscode-pigments
功能：实时预览设置的颜色
在这里插入图片描述
Parameter Hints
插件名：Parameter Hints
功能：提示函数的参数类型及消息
在这里插入图片描述
Quokka.js
插件名：Quokka.js
使用：安装插件后，ctrl+shift+p输入Quokka new JavaScr…即可使用
功能：实时显示打印输出，更多功能自行探索（常用于测试）
在这里插入图片描述
Highlight Matching Tag
插件名：Highlight Matching Tag
功能：当光标停留在标签时，高亮匹配的标签
在这里插入图片描述

大众类插件

基本都有安装就不详细介绍了
插件

Bookmarks
功能：常用于读源码进行标记行，跳转（代码标记快速跳转）
ESLint
功能：代码规范检查
Prettier - Code formatter
功能：代码美化，自动格式化成规范格式
Project Manager
功能：项目管理插件，当开发多个项目时，可以快速跳转
Path Intellisense
功能：路径智能提示
Image preview
功能：当引入路径为图片时，可以预览当前图片
GitLens
功能：增强了git功能，支持在VSCode查看作者、修改时间等等
open in browser
功能：在浏览器打开当前文件

Vue 开发推荐

vue-component

插件名：vue-component
功能：输入组件名称自动导入找到的组件，自动导入路径和组件
选中后自动输入组件名（包含必填属性）、import语句、components属性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Vetur
插件名：Vetur
开发 Vue 必备
Vue 3 Snippets
插件名：Vue 3 Snippets
基本必备：很多Vue的代码段，很方便开发

React 开发推荐

React Style Helper

  • 插件名：React Style Helper

    功能：在React中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能

     自动补全
 跳转至样式和变量定义位置
 创建 JSX/TSX 的行内样式
 预览样式及变量内容
 行内样式自动补全，同时支持 SASS 变量的跳转及预览。

ES7 Reactsnippets

  • 插件名：ES7 React/Redux/React-Native/JS snippets
  • 功能：很多React的代码段，很方便开发

vscode-styled-components

  • 插件名：vscode-styled-components
  • 功能：在JS文件中写样式时，有智能提示
    在这里插入图片描述

主题类

Dracula Official
插件名：vscode-styled-components
在这里插入图片描述

One Dark Pro
插件名：One Dark Pro
在这里插入图片描述

vscode-icons
插件名：vscode-icons
VSCode文件夹&文件图标
在这里插入图片描述

其他推荐

CSS Initial Value

  • 插件名：vscode-icons
  • 功能：显示每个CSS属性的初始值，当光标停留在css属性时
    在这里插入图片描述
    画板作图
  • 插件名：Draw.io Integration
  • 功能：在VSCode中画图，支持多人协作编辑图表…
    在这里插入图片描述
    Echars 智能提示插件
  • 插件名：echarts-vscode-extension
  • 使用：安装插件后，ctrl+shift+p输入active
  • Echars即可开启智能提示
  • 功能：提示各种Echar中Option 的属性，挺强大的
    翻译插件
  • 插件名：A-super-translate
  • 使用方法：选中行，Ctrl+Shift+p 输入
  • 翻译 键入 ctrl+`再按下 ctrl+1为翻译直接替换选中区域
  • 功能：翻译识别代码中注释部分，不干扰阅读。支持不同语言，单行、多行注释、 支持用户字符串与变量翻译,支持驼峰拆分
    在这里插入图片描述
    在这里插入图片描述

总结（附全部插件图片）

根据需求，大家安装对应插件即可（安装太多插件，VSCode会很卡）
当然电脑配置足够强大，当我没说🤔
在这里插入图片描述

Hello.Reader
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts-vscode-extension:适用于Apache ECharts的VSCode扩展
05-02
echarts-vscode-扩展 这是非官方vscode扩展 安装 ext install vscode-echarts-extension 市场 指令 该扩展提供了2个命令 echarts.activate ：扩展提供匹配情况发生时的完成 echarts.deactivate ：扩展名永远不会显示完成 PS：从0.1.2开始，扩展名最初不会提供完成，因为JS文件可能不会导入echarts 。 用户需要在命令面板上执行echarts.activate 。 例子 问题 所有选项信息均由ajax接收，在没有Internet的情况下毫无用处。 缓存响应数据（更新：本地存储json文件） 由于Apache服务器响应速度快，有时连接超时。 （尝试使用Netlify，但是JSON文件太大，并且可能存在其他已知问题）（更新：json文件存储在本地） 使用最近的节点确定有时不正确的Complet
VSCode中值得推荐的常用的33个高效前端插件「效率篇」
专注于dreamweaver网页设计制作
08-09 1819
VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。
2024年VSCode插件最新推荐（54款）
wfq741985885的博客
05-24 3381
Alignment 是一个非常实用的 VSCode 插件，它可以帮助你快速对齐代码中的各种元素，使用 Alignment 非常简单，只需要在 VSCode 中按下 Ctrl + Shift + P，然后输入“Alignment”即可查看插件的所有命令和快捷键。该插件用于帮助我们统计项目代码的行数，安装插件后，先选中需要进行代码统计的代码文件夹，然后鼠标右键点击唤出菜单，选择“Count lines in directory”，该扩展就是自动生产一个 .VSCodeCounter 的文件夹。
前端vscode必备插件(AI帮你写代码)
富朝阳的博客
09-23 1万+
VSCode 是我们前端开发的一个强大的IDE，因此选择趁手好用的插件能事半功倍，也能能更好地编码以及获得更丝滑的开发体验。然后剩下的时间用来摸鱼是很有必要滴。
Echart使用
实践求真知
01-17 1123
一 五分钟入门ECharts 1 简介 ECahrs是百度的一个项目，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 官方网站： https://echarts.apache.org/zh/index.html 2 基本使用 入门参考：官网->文档->教程->5分钟上手
VScode如何在vue 的项目中使用echarts?（教你从安装vue、echarts到demo的实现）
Chen__FY的博客
03-25 2796
（7）引入echarts,并在export default删掉components: { HelloWorld }（2）选择默认的第一个选项：Default([Vue 3] babel,eslint)（4）在安装好后加上 --save 便能在package.json里看见它。（3）返回当前的03-demo的目录，并安装echarts。打开package.json可查看echarts的版本。启动完成后可在终端看见你所创建的原始vue项目。1.在终端先安装vue-cli。（5）把vue启动起来。
vscode中Echarts的直接使用---Windows系统
weixin_51659315的博客
07-03 3291
JDK(Java Development Kit) 是 Java 语言的(SDK)。SE(JavaSE)，standard edition，标准版，是我们通常用的一个版本，从JDK 5.0开始，改名为Java SE。：命令提示符--->输入：java -version如果是如下图所示，则没有安装，需要安装。
vscode前端开发工具
最新发布
07-11
vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具...
前端vscode相关插件安装
07-09
前端vscode相关插件安装
vscode常用插件压缩包
07-13
这个"vscode常用插件压缩包"很可能是包含了多个为提升VSCode功能和效率而设计的扩展插件。接下来，我们将深入探讨VSCode插件系统以及一些常见的插件及其用途。 1. **代码高亮与美化**： - `Prettier`：这是一个...
vscode常用插件整理汇总
10-15
本文给大家整理汇总了17个常用的vscode装B插件,都是作者费心整理出来的,希望大家能够喜欢
VsCode常用插件(前端开发)
07-13
VsCode常用插件(前端开发)，上传备用，免费下载。
2024前端vscode必备插件(持续更新)
weixin_60053942的博客
04-05 1万+
2024前端vscode必备插件，包含 vue、html、css、ai、调试等等，提高你的开发效率
前端vscode必备插件推荐（墙裂推荐）
热门推荐
weixin_51220466的博客
04-27 2万+
前言：vscode是一款强大的前端编辑软件，有些人说ws（webstorm）更好用，但是vs重在轻量级啊！！！而且根据自己的开发习惯安装适合自己的插件后，用起来简直不要太舒服了好嘛！！！ 首先呢，我先推荐的就是最基础的语言包，没办法，英语水平太捞了哈哈哈，弄起来后就舒服多了，汉语yyds~ 《Chinese (Simplified) (简体中文) Language》 注释工具 《Colorful Comments》 不同的注释符能带来很多高亮的显示 快速找到css定义位置并小窗口展示
【开发必备】推荐几个非常好用的前端VsCode插件，快来看看你都用过哪些？
2301_76364917的博客
05-11 6516
VSCode是前端开发的武器，下面给大家推荐几个必备的、非常好用的前端VsCode插件。
ecahrs 柱状图+饼图+点击事件
一念执着
01-29 857
饼图可根据个人需求来删减，以下是根据官网案例修改，仅供参考~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>混合图型双饼图,且自定义是否显示柱状图legend,带点击事件</title> </head> <body> <div id="echarsID" style="height: 400px;">&lt
常用vscode配置和插件
廊坊吴彦祖
07-10 1504
VSCode 是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。它内置了对 JavaScript，TypeScript 和 Node.js 的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。VSCode 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT 命令 等特性，支持插件扩展......
VsCode提高生产力的插件推荐-持续更新中
JackieDYH的博客
01-22 1523
Importcost可以在代码中显示导入的估计大小。编写项目时，很重要的一点就是不要导入过大的软件包，以免损害用户体验。避免导入过大软件包的方法之一就是随时跟踪软件包的大小。功能：增强了git功能，支持在VSCode查看作者、修改时间等等。功能：常用于读源码进行标记行，跳转（代码标记快速跳转）功能：项目管理插件，当开发多个项目时，可以快速跳转。功能：当引入路径为图片时，可以预览当前图片。功能：代码美化，自动格式化成规范格式。功能：在浏览器打开当前文件。
关于echarts图Y轴刻度部分不显示
weixin_71658381的博客
12-20 838
在axislabel里设置interval，而不是外层。
vscode前端插件推荐
06-06
好的，针对你的问题，以下是我为你推荐的一些 VS Code 前端插件： 1. Prettier - 代码格式化工具，支持多种语言，可以自动格式化你的代码，让代码看起来更加整洁。 2. ESLint - 代码检查工具，支持 JavaScript 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello.Reader

请我喝杯咖啡吧😊

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值