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

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交换光标位置或确认您的输入。(切换键入位置)

vscode-fileheader

vscode-fileheader : 文件头添加注释，支持自动更新文件修改时间。

• 插件名：vscode-fileheader
• 官方地址：vscode-fileheader - Visual Studio Marketplace

Add jsdoc comments

vscode-fileheader : 为选定函数签名的参数添加简单的 jsdoc 注释。

• 插件名：Add jsdoc comments
• 官方地址：Add jsdoc comments - Visual Studio Marketplace
• 用法：

• • 在 typescript 或 javascript 文件中，选择一个函数签名，最好是包含一个或多个参数的函数签名。选择整个函数签名，然后调用 Add Doc Comments 扩展（打开命令面板（Windows 上的 F1）并查找命令“Add doc comments”。按 Enter。）

• • • 

JavaScript Booster

JavaScript Booster : 在 JavaScript（或 TypeScript/Flow）中编辑代码时，此 VS Code 扩展提供了各种代码操作（快速修复）。只需注意左侧的灯泡并按下它即可了解如何转换光标下的代码。

• 插件名：JavaScript Booster
• 官方地址：JavaScript Booster - Visual Studio Marketplace

Code Spell Checker

Code Spell Checker : 一个基本的拼写检查器，适用于 camelCase 代码。这个拼写检查器的目标是帮助捕捉常见的拼写错误，同时保持低误报的数量。

• 插件名：Code Spell Checker
• 官方地址：Code Spell Checker - Visual Studio Marketplace
• 特性：

• • 例子

• • • 

• • 建议

• • • 

后续如有发现更多更好的插件将继续分享。安装太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，可能影响开发效率，最终适得其反，所以建议只安装自己喜欢的、常用的即可。