VSCode中值得推荐的常用的13个高效前端插件「约束篇」

最新推荐文章于 2024-08-26 09:59:37 发布

这个前端有点冷

最新推荐文章于 2024-08-26 09:59:37 发布

阅读量4.6k

点赞数 2

分类专栏： vscode 插件文章标签： vscode 前端编辑器

本文链接：https://blog.csdn.net/xiadaocc/article/details/125583953

版权

vscode 同时被 2 个专栏收录

6 篇文章 2 订阅

订阅专栏

插件

6 篇文章 1 订阅

订阅专栏

VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。

约束篇（13）

Prettier - Code formatter

Prettier - Code formatter : Visual Studio Code 中的更漂亮的格式化程序。Prettier是一个固执己见的代码格式化程序。它通过解析您的代码并使用自己的规则重新打印它来执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。

插件名：Prettier - Code formatter
官方地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Better Align

Better Align : 更好地对齐你的代码。

插件名：Better Align
官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
特征：

- 用冒号（）、:赋值（、、、、、）和箭头（）对齐你的代码
- 它对逗号优先的编码样式和尾随注释有额外的支持：=+=-=*=/==>
- 它不需要您选择要对齐的内容，扩展程序会自行解决

用法：将光标放在您希望代码对齐的位置，然后通过命令面板或自定义快捷方式调用对齐命令。然后代码将自动对齐。
截图

- 逗号优先的样式：

- 尾随评论：

- 在选择范围内对齐：

ESLint

ESLint : 查找并修复 JavaScript 代码中问题。

插件名：ESLint
官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Stylelint

Stylelint : 查找并修复样式代码中问题。

插件名：Stylelint
官方地址：https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Better Comments

Better Comments : Better Comments 扩展将帮助您在代码中创建更人性化的注释。

插件名：Better Comments
官方地址：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
特征：使用此扩展程序，您将能够将注释分类为：
- 警报（Alerts）
- 查询（Queries）
- 待办事项（TODOs）
- 强调（Highlights）
- 注释掉的代码也可以设置样式以明确代码不应该存在
- 您可以在设置中指定您想要的任何其他评论样式

koroFileHeader

koroFileHeader : 用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

插件名：koroFileHeader
官方地址：https://marketplace.visualstudio.com/items?itemName=OBKoro1.korofileheader
用法：
- 头部注释和注释图案
- 函数注释：自动提取函数参数
- - 支持主流语言自动提取函数参数

- 多行函数参数支持自动提取

Mintlify Doc Write

Mintlify : 适用于 JavaScript、Python、Java、Typescript 和所有其他语言的人工智能文档编写器。

插件名：Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more
官方地址：https://marketplace.visualstudio.com/items?itemName=mintlify.document
用法：
- 突出显示代码或将光标放在要记录的行上
- 单击Write Docs按钮（或按 ⌘ + 。）

Document This

Document This : “Document This”是一个 Visual Studio Code 扩展，可以自动为 TypeScript 和 JavaScript 文件生成详细的 JSDoc 注释。

插件名：Document This
官方地址：Document This - Visual Studio Marketplace

rong-notes

rong-notes : 这个扩展可以帮助我们创建一个笔记模板。

插件名：rong-notes
官方地址：rong-notes - Visual Studio Marketplace
特征：我们可以使用/+tab来创建注释（单行注释）。还有其他选项的列表：

- rw/+tab创建文件注释。（文件注释）
- ra/+tab创建一个 ABtest-note。（AB测试注释）
- rf/+tab创建功能注释。（函数注释）
- cmd+3用一串日期插入/替换选定的单词。格式为yyyy-mm-dd hh-mm-ss. (插件当前时间)
- cmd+4通过所选单词添加功能注释（功能声明）。（根据函数声明生成函数注释）
- 用于tab交换光标位置或确认您的输入。(切换键入位置)