banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

2022 前端开发 vscode 常用插件及其他工具推荐

总结了下自己的 2022 的常用前端插件以及工具推荐,虽然 vscode 自带的插件同步功能已经很齐全了,但是还是自己总结了一篇以备不时之需。原飞书文档链接:‍2022 前端开发 vscode 常用插件及其他工具推荐

vscode 常用插件#

开发类#

GitLens — Git supercharged#

拓展了 vscode 本身集成的 Git 功能,提供了很多好东西

image

Auto Close Tag#

自动闭合 HTML、JSX 标签

image

Auto Rename Tag#

自动 rename 标签

image

change-case#

命名转换 Ctrl+Shift+P 输入 change case

image

image

Code Spell Checker#

代码中的拼写检查

image

image

ES7 React/Redux/GraphQL/React-Native snippets#

React 代码片段,如题如图

image

Commit Message Editor#

多人协作必备,git 提交信息的编辑

image

ESLint#

image

Prettier#

指定配置文件.prettierrc.js,方便在项目中通过自己项目的 prettier 配置文件进行格式化

Why Prettier? https://prettier.io/docs/en/why-prettier.html

imageimage

image

Tailwind CSS IntelliSense(使用 Tailwind 推荐)#

tailwind 的自动补全,智能提示

image

Error Lens#

改进对错误、警告和其他语言诊断的突出显示。

image

CSS Modules#

CSS module 模式必备

image

px to rem & rpx & vw (cssrem)#

顾名思义,方便的进行单位转换

image

Template String Converter#

在字符串中输入 ${后自动将其变为模板字符串

image

TabOut#

也是用习惯了就回不去的插件,按 Tab 跳出括号

image

vscode-styled-components(使用 styled-components 推荐)#

image

Highlight Matching Tag#

顾名思义,高亮标签插件

image

Live Server#

比较经典的插件了:https://juejin.cn/post/7006338919767736357

image

Dev Containers (docker 开发适用)#

打开 docker 容器内的文件,用 docker 开发的都说好

image

辅助类#

Code Runner#

这个想必不用多说,右上小三角运行代码

image

看图片资源贼好用,推荐一手

image

imageimage

Image preview#

图片链接预览 不必多说的好用

image

Project Manager#

vscode 的项目管理器,一键切换项目

image

image

Todo Tree#

顾名思义 展示项目中注释的 TODO 在哪,只需要 TODO 自动就会高亮

imageimage

Comment Translate#

注释翻译,如图

image

Live Share#

多人协同,共同编辑,共享终端:https://juejin.cn/post/6844903603182764039

image

实用工具类#

Bookmarks#

vscode 的书签

image

Typora#

用的是 Vditor 作为 vscode 的 markdown 编辑器相当好用,但有时候会与 git 冲突需要禁用。

image

image

:emojisense:#

方便的输入 emoj 表情

image

CodeTour#

阅读源码时适用

image

vscode-pdf#

vscode 中看 pdf 文件

image

Office Viewer(Markdown Editor)#

pdf 都能看了看 office 文件当然也有插件,这个跟 typora 插件一样集成 Vditor 可以写 md 文件

image

CodeSnap#

选中代码并生成漂亮的截图(适合秀代码)

image

Draw.io Integration#

后缀名为.drawio 的文件可以绘制流程图等,适合写技术文档,无需多言

image

外观改善类#

One Dark Pro#

Atom 的标志性 One Dark 主题,也是 VS Code 安装最多的 主题之一!

image

vscode-icons#

改进 vscode 的文件图标,终于看着舒服多了

image

imageimage

自动补全 / 智能提示类#

GitHub Copilot#

大名鼎鼎的自动补全

image

Tabnine AI#

虽不及 Copilot 但也有不错的自动补全,胜在免费不用申请?(

image

Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more#

自动分析代码生成注释,适合懒得写文档的

image

Parameter Hints#

函数参数智能提示,不过用多了就会觉得有点干扰。

image

刷题类#

Quokka.js#

实时打印 js 输出,适合刷题。

image

Competitive Programming Helper (cph)#

适合竞赛同学、acm(当然也适合刷面试算法题就是了,不过语言是 c++。

image

algorithm#

适合力扣刷题

image

工具推荐#

浏览器插件#

截图 & gif 工具#

实用工具#

待补充#

... 如有推荐的插件可以评论

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。