2022 前端开发 vscode 常用插件及其他工具推荐
总结了下自己的 2022 的常用前端插件以及工具推荐,虽然 vscode 自带的插件同步功能已经很齐全了,但是还是自己总结了一篇以备不时之需。原飞书文档链接:2022 前端开发 vscode 常用插件及其他工具推荐
vscode 常用插件 开发类 GitLens — Git supercharged
拓展了vscode本身集成的Git功能,提供了很多好东西
Auto Close Tag
自动闭合HTML、JSX标签
Auto Rename Tag
自动 rename 标签
change-case
命名转换 Ctrl+Shift+P 输入change case
Code Spell Checker
代码中的拼写检查
ES7 React/Redux/GraphQL/React-Native snippets
React代码片段,如题如图
Commit Message Editor
多人协作必备,git提交信息的编辑
ESLint
Prettier
指定配置文件.prettierrc.js,方便在项目中通过自己项目的prettier配置文件进行格式化
Why Prettier? https://prettier.io/docs/en/why-prettier.html
Tailwind CSS IntelliSense(使用Tailwind推荐)
tailwind的自动补全,智能提示
Error Lens
改进对错误、警告和其他语言诊断的突出显示。
CSS Modules
CSS module模式必备
px to rem & rpx & vw (cssrem)
顾名思义,方便的进行单位转换
Template String Converter
在字符串中输入${后自动将其变为模板字符串
TabOut
也是用习惯了就回不去的插件,按Tab跳出括号
vscode-styled-components(使用styled-components推荐)
Highlight Matching Tag
顾名思义,高亮标签插件
Live Server
比较经典的插件了:https://juejin.cn/post/7006338919767736357
Dev Containers (docker开发适用)
打开docker容器内的文件,用docker开发的都说好
辅助类 Code Runner
这个想必不用多说,右上小三角运行代码
Image Gallery
看图片资源贼好用,推荐一手
Image preview
图片链接预览 不必多说的好用
Project Manager
vscode的项目管理器,一键切换项目
Todo Tree
顾名思义 展示项目中注释的TODO在哪,只需要TODO自动就会高亮
Comment Translate
注释翻译,如图
Live Share
多人协同,共同编辑,共享终端:https://juejin.cn/post/6844903603182764039
实用工具类 Bookmarks
vscode的书签
Typora
用的是 Vditor 作为vscode的markdown编辑器相当好用,但有时候会与git冲突需要禁用。
:emojisense:
方便的输入emoj表情
CodeTour
阅读源码时适用
vscode-pdf
vscode中看pdf文件
Office Viewer(Markdown Editor)
pdf都能看了看office文件当然也有插件,这个跟typora插件一样集成 Vditor 可以写md文件
CodeSnap
选中代码并生成漂亮的截图(适合秀代码)
Draw.io Integration
后缀名为.drawio 的文件可以绘制流程图等,适合写技术文档,无需多言
外观改善类 One Dark Pro
Atom 的标志性 One Dark 主题,也是VS Code安装最多的 主题之一!
vscode-icons
改进vscode的文件图标,终于看着舒服多了
自动补全/智能提示类 GitHub Copilot
大名鼎鼎的自动补全
Tabnine AI
虽不及 Copilot 但也有不错的自动补全,胜在免费不用申请?(
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more
自动分析代码生成注释,适合懒得写文档的
Parameter Hints
函数参数智能提示,不过用多了就会觉得有点干扰。
刷题类 Quokka.js
实时打印js输出,适合刷题。
Competitive Programming Helper (cph)
适合竞赛同学、acm(当然也适合刷面试算法题就是了,不过语言是c++。
algorithm
适合力扣刷题
工具推荐 截图&gif工具 Snipaste 截图工具,用过都说好:https://www.snipaste.com/ScreenToGif 顾名思义,录制 gif 的好东西 :https://www.screentogif.com/OBS 大名鼎鼎的视频录制和直播推流工具,dddd: https://obsproject.com/ 实用工具 Everything 快快快快速搜索文件,dddd https://www.voidtools.com/zh-cn/downloads/ 待补充
…如有推荐的插件可以评论