思考,输出,沉淀。用浅显的言语陈述技能,让自己和别人都有所收获。
作者:毅航


1. Live Server

引荐13款常用的Vscode插件,进步前端日常开发功率

Live Server 插件是一个用于前端开发的扩展,它的首要效果是供给一个本地开发服务器,以便实时预览和调试网页运用程序。其最大特色在于热重载,即开发者可实时预览代码效果。 由于Live Server 答应开发者在浏览器中实时预览您正在编辑的网页。每逢保存HTML、CSS、JavaScript文件时,该插件会主动改写浏览器,以便开发者能够立即看到页面的更改效果。

引荐13款常用的Vscode插件,进步前端日常开发功率

2. TODO Highlights

引荐13款常用的Vscode插件,进步前端日常开发功率

TODO Highlights插件是一个用于帮助开发人员辨认和管理代码中的待办事项的工具。该插件的首要效果是供给代码中注释中包含的待办事项的可视化符号,以便开发者更简单定位、跟踪和处理这些使命。

当运用todofixme标签后,可按下快捷键f1,然后选择all 或者todo即可查看当前项目中声明的标签信息。

引荐13款常用的Vscode插件,进步前端日常开发功率

3. Markdown Preview Github Styling

引荐13款常用的Vscode插件,进步前端日常开发功率

Markdown Preview Github Styling 的效果是改进和优化Markdown预览功用,使得开发者能够在VsCode 中实时预览.md文件的终究效果。除此外,其还具有如下特色:

  1. 预览实时更新:插件答应您在 VSCode 中编写Markdown文档,并实时预览烘托效果。每逢您对文档进行更改并保存时,预览面板会主动更新,以便您能够立即查看您的编辑效果。
  2. 进步可读性:经过运用 GitHub 风格的款式,该插件能够使 Markdown 文档更易于阅览,特别是关于那些已经熟悉 GitHub 的用户。这关于编写技能文档、文档阐明、README 文件等十分有帮助。
  3. 可装备性:插件答应您依据需求进行一些自界说装备,以习惯不同的烘托需求。您能够依据自己的偏好设置不同的预览款式。

总归,Markdown Preview Github Styling 插件经过在VSCode中供给GitHub 风格的 Markdown 预览,进步了Markdown编辑和协作的功率。

4. VsCode Icon

引荐13款常用的Vscode插件,进步前端日常开发功率

VSCode Icons 插件是Visual Studio Code中的一个扩展,其首要效果是为文件和文件夹增加图标,以增强编辑器的可视化效果和可辨认性。其能够为不同的文件或文件件增加不同的图标,进而保证项目结构清晰,项目结构易于理解。详细效果如下:

引荐13款常用的Vscode插件,进步前端日常开发功率

5. Tabnine

Tabnine 是一款强壮的智能代码补全插件,可在 Visual Studio Code(VSCode)中运用。其首要效果是供给高效和智能的代码建议,以加快代码编写和进步代码质量。详细来看,Tabnine 首要有如下功用:

  1. 智能代码建议Tabnine 运用机器学习和自然言语处理技能,分析您的代码并为您供给高质量的代码建议。这不仅包含常见的变量、函数和类名,还包含上下文感知的建议,可大大加快编码进程。
  2. 多言语支撑Tabnine支撑多种编程言语,包含但不限于 JavaScript、Python、Java、C 、Go 等。这使得它适用于不同类型的项目和开发使命。
  3. 实时建议:插件在您键入代码时实时供给建议,让您不用在每次需求时手动查找文档或库。这有助于减少拼写错误和代码语法问题。

6. CodeSnap

CodeSnap Visual Studio Code(VSCode)中的一个插件,其答应开发者选择要捕捉的代码段,并将其转换为图像格式。这样, 开发者能够将代码示例共享给其别人,而不用以纯文本或代码文件的形式共享。

引荐13款常用的Vscode插件,进步前端日常开发功率

7. CSS Pee

引荐13款常用的Vscode插件,进步前端日常开发功率

CSS Peek Vs Code中的一个插件,它的首要效果是帮助开发人员更轻松地查找和导航CSS款式表中的类、ID、选择器和款式界说。

引荐13款常用的Vscode插件,进步前端日常开发功率

8. JavaScript Code Snippets

引荐13款常用的Vscode插件,进步前端日常开发功率

JavaScript Code Snippets代码片段是一个 VS Code 扩展,它供给了运用 ES6 语法进行 JavaScript 开发的代码片段调集。

此扩展包含循环、条件、函数等常见 JavaScript 概念的片段,以及箭头函数、模板文字和解构等 ES6 特定功用。运用这些片段能够为开发人员节省大量时刻,由于它无需手动为日常使命键入代码。

引荐13款常用的Vscode插件,进步前端日常开发功率

9. Prettier - Code formatter

引荐13款常用的Vscode插件,进步前端日常开发功率

Prettier VSCode中常用的代码格式化工具,Prettier 插件的首要效果在于 代码主动格式化Prettier 插件能够主动格式化您的代码,包含 JavaScript、TypeScript、JSON、CSS、HTML 等多种编程言语。无需手动调整缩进、换行和其他格式设置,Prettier 会主动为开发者处理。

10.Git Graph

引荐13款常用的Vscode插件,进步前端日常开发功率

Git Graph 插件用于可视化查看存储库的 Git操作,并从图形中轻松履行Git操作。类似于SOurceTree的可视化版本控制插件,能够更新、提交代码,查看提交记录,审视代码。

引荐13款常用的Vscode插件,进步前端日常开发功率

11. Vue Language Features (Volar)

引荐13款常用的Vscode插件,进步前端日常开发功率

该插件能够让Vue代码获得美丽的语法高亮显示、错误查看和代码格式化。并且它还会对许多 Vue 指令和事情处理程序,进行提示和建议。

引荐13款常用的Vscode插件,进步前端日常开发功率

12. Auto Close Tag

引荐13款常用的Vscode插件,进步前端日常开发功率

该插件帮助咱们输入标签的时分,主动完毕标签。通常想要运用一个特定的 HTML 元素时,需求手动输入开端标签和完毕标签。而当运用该插件后,只需求输入开端标签,它就会主动增加完毕标签。此外,关于 Vue 开发者来说,它还支撑自界说类型称号。当输入自界说组件的开端标签时,它会主动增加完毕标签。

13. Auto Rename Tag

该插件帮助咱们在重命名一个标签时,主动重命名 HTML 标签的开端和完毕标签。防止只修改了开端标签,而忘掉修改完毕标签。该扩展适用于 HTML、XML、PHP 和 JavaScript

引荐13款常用的Vscode插件,进步前端日常开发功率