2022,VSCode 前端插件推荐
前端Q
共 3350字,需浏览 7分钟
· 2022-05-17
点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
前言
推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来 mo鱼,岂不美哉
开发综合推荐
别名路径跳转
插件名:别名路径跳转
使用说明: 别名路径跳转插件,支持任何项目,
使用场景: 当你在开发页面时, 想点击别名路径导入的组件时(演示如下)
配置说明
下载后只需自定义配置一些自己常用的别名路径即可
// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
},右击插件--》扩展设置--》路径映射在 settinas.json
中编辑
效果展示
![test01](https://filescdn.proginn.com/a0e9f082d7c40ad90709c3f8bb6926b0/1e55474e88fff3bcdbc1bde05812da44.webp)
路径别名智能提示
插件名: path-alias
场景: 在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)
indent-rainbow
插件名: indent-rainbow
功能:彩虹缩进
![image-20211001221922170](https://filescdn.proginn.com/45107efe38b59b984941be35c5e02f3f/f0d2a60392b4516cb6227a0f74d61ee3.webp)
Bracket Pair Colorizer 2
插件名: Bracket Pair Colorizer 2
功能:给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分
![Screenshot](https://filescdn.proginn.com/fd73e809cc0d46ae5d1a3009df296a94/80729ad6233258ab1f3ff3102e9d84d8.webp)
Auto Rename Tag
插件名: Auto Rename Tag
功能:自动重命名标签
![test02](https://filescdn.proginn.com/aae6475e7d408a6021c387f154794420/699a6fc640aa35f75d81e63d83ccc58f.webp)
Code Spell Checker
插件名: Code Spell Checker
功能:检查单词拼写是否错误(支持英语)
![image-20211001222515014](https://filescdn.proginn.com/48885c66ac5e61f50135f4c62d627f55/e765d527b50813d7e870994ba4712797.webp)
Code Runner
插件名: Code Runner
功能:一键执行各种语言代码(常用于测试)
![test03.gif](https://filescdn.proginn.com/b24b41377b2464aeb02c318a96278534/6ec61b830f6551d9da6eafe8c3a71877.webp)
Debugger for Chrome
插件名: Debugger for Chrome
功能:在VSCode端,调试代码
![image-20211001223256342](https://filescdn.proginn.com/86ea25c4f32ed5f0ec845d2515af549a/6d1edb919b89f1a26400a7d53339830e.webp)
Live ServerPP
插件名:
Live ServerPP
功能:在服务器端打开你的文件,实时显示你修改的代码
支持websocket 消息服务,可以用于调试websocket 客户端 支持可编程虚拟文件,可用于模拟服务端API接口
![Live Server Demo VSCode](https://filescdn.proginn.com/20247693c72c35c37b175b29bc17e136/c462a97af7e3a8e2ead52de0cebee03b.webp)
Svg Preview
插件名: Svg Preview
功能:可以显示你的SVG图片,还可以编辑
![demo](https://filescdn.proginn.com/b723946dd310e5ccd40323de8b143793/b86caba3e4284e5eb69977e564936efe.webp)
Tabnine
插件名: Tabnine
功能:智能提示代码,可以预测你将要写的代码进行提示
![test04.gif](https://filescdn.proginn.com/830fde70838416a7cacbc5142a345ea1/9c8f885daed9bc9ab27c7af01b22df13.webp)
Template String Converter
插件名: Template String Converter
功能:在字符串中输入$触发,将字符串转换为模板字符串
![typing a dollar sign then open curly brace within a string converts the quotes to backticks](https://filescdn.proginn.com/224eaac6ce7dfb48aabfc8e550921af9/c01d47de80425b9164b70c99d324735e.webp)
vscode-pigments
插件名: vscode-pigments
功能:实时预览设置的颜色
![预览](https://filescdn.proginn.com/1ee16dc216d69c45a806198a2a563775/1b518805052feec6055b3dd241964931.webp)
Parameter Hints
插件名: Parameter Hints
功能:提示函数的参数类型及消息
![image-20211001225347827](https://filescdn.proginn.com/0f50cac924cd427a05d9b2d504a00750/bec8363814ef338ede9a2f54677786af.webp)
Quokka.js
插件名: Quokka.js
使用:安装插件后, ctrl+shift+p
输入Quokka new JavaScr..
即可使用功能:实时显示打印输出,更多功能自行探索(常用于测试)
![test05.gif](https://filescdn.proginn.com/38658902ae9f3a986fb16865f5f03ca5/4743848ab41418e21247ad201a00d8a2.webp)
Highlight Matching Tag
插件名: Highlight Matching Tag
功能:当光标停留在标签时,高亮匹配的标签
![image-20211002094809502](https://filescdn.proginn.com/ce70210260bbc616fa69260353f6ecad/47d224886276967d8f53b1a8e1b93b34.webp)
大众类插件
基本都有安装就不详细介绍了
插件
Bookmarks
功能:常用于读源码进行标记行,跳转(代码标记快速跳转) ESLint
功能:代码规范检查 Prettier - Code formatter
功能:代码美化,自动格式化成规范格式 Project Manager
功能:项目管理插件,当开发多个项目时,可以快速跳转 Path Intellisense
功能:路径智能提示 Image preview
功能:当引入路径为图片时,可以预览当前图片 GitLens
功能:增强了 git
功能,支持在VSCode查看作者、修改时间等等open in browser
功能:在浏览器打开当前文件
Vue 开发推荐
vue-component
插件名:
vue-component
功能:输入组件名称自动导入找到的组件,自动导入路径和组件
选中后自动输入组件名(包含必填属性)、import语句、components属性
![img](https://filescdn.proginn.com/c01149c89cf2e9500f4aa1f3b89f96bd/21f4644ad78a6792b8ac6870dae9e59b.webp)
![img](https://filescdn.proginn.com/c01149c89cf2e9500f4aa1f3b89f96bd/21f4644ad78a6792b8ac6870dae9e59b.webp)
![img](https://filescdn.proginn.com/c01149c89cf2e9500f4aa1f3b89f96bd/21f4644ad78a6792b8ac6870dae9e59b.webp)
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
文件中写样式时,有智能提示
![image-20211002093516003](https://filescdn.proginn.com/7ec318ab3110e299e5c36092814fda62/47e6e87697121fdfef0eade04b4d616b.webp)
主题类
Dracula Official
插件名: vscode-styled-components
![image-20211002093806553](https://filescdn.proginn.com/5c52ebec440f3354a8fa97bb1d920985/e53711de49906d11012431924759ee19.webp)
One Dark Pro
插件名: One Dark Pro
![image-20211002093922498](https://filescdn.proginn.com/465c4a2a408e3227c4a0574357a1a6c8/ebea2aa781f9db0d0e686c593b9a7072.webp)
vscode-icons
插件名: vscode-icons
VSCode
文件夹&文件图标
![image-20211002094123650](https://filescdn.proginn.com/1a8374aa95a3dd506fab84b1655363cd/2521fa387936077baaab8c69162bb4cb.webp)
其他推荐
以下插件,可能不常用,大家感兴趣可以试试😉
CSS Initial Value
插件名: vscode-icons
功能:显示每个CSS属性的初始值,当光标停留在 css
属性时
![image-20211002095626877](https://filescdn.proginn.com/658344dbe5dea5c00e6619176e6a31cc/c0752e7883343276229c955810b0f57b.webp)
画板作图
插件名: Draw.io Integration
功能:在 VSCode
中画图,支持多人协作编辑图表..
![img](https://filescdn.proginn.com/393ee39ee8c14f402cdd7f6cf4c00543/3e5f83f282b502fb0c7e4b0bbbd946d8.webp)
Echars 智能提示插件
插件名: echarts-vscode-extension
使用:安装插件后, ctrl+shift+p
输入active Echars
即可开启智能提示功能:提示各种 Echar中Option
的属性,挺强大的
翻译插件
插件名:
A-super-translate
使用方法:选中行,Ctrl+Shift+p 输入 翻译
键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域 功能:翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、
支持用户字符串与变量翻译,支持驼峰拆分
![Introduction](https://filescdn.proginn.com/8383304e1cd44193ce9afeefc87d50d2/8cfda3695e320d2c2ef809bf35281549.webp)
![Introduction](https://filescdn.proginn.com/8138331facb57845b105d306f52de96a/ff65692e830ff8dfff50a3cd56fd313e.webp)
总结(附全部插件图片)
根据需求,大家安装对应插件即可(安装太多插件,VSCode会很卡) 当然电脑配置足够强大,当我没说🤔
![image-20211002103141474](https://filescdn.proginn.com/15c394a0490a2805ed1147a3996f6e29/f6c59ccf16ab59166304a7344a805322.webp)
作者:风不识途 https://segmentfault.com/a/1190000040766151
![](https://filescdn.proginn.com/1f7ff7479df4b344ca44131aa7dc318d/455ae2f86f55b5a52d3f18897cab5138.webp)
往期推荐
![](https://filescdn.proginn.com/e93b834ac832534128fd6b43765f023a/24481d39b4a08c966567f6b25f043eba.webp)
![](https://filescdn.proginn.com/ddeb02f585b684a3b2ef6f69a557dab3/ecc50b0d343a67f48c2ae99c013a47a5.webp)
![](https://filescdn.proginn.com/ddeb02f585b684a3b2ef6f69a557dab3/ecc50b0d343a67f48c2ae99c013a47a5.webp)
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
![](https://filescdn.proginn.com/f8def446a7dd778797d746d39441e9ff/b906c0b0337d2f2af4c5b13d3cde8953.webp)
![](https://filescdn.proginn.com/151f7dbaa42cf4c84a2e5fb9a10b2aa0/f8a870a8a1c798f41e21e5b8c44c9be4.webp)
评论