《前端插件&工具》

maeryang0510

已于 2024-05-11 15:14:10 修改

阅读量2.4k

点赞数

分类专栏： # 前端技术文章标签：前端

于 2022-05-17 19:41:51 首次发布

原文链接：www.maeryang0510.com

版权

前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vscode插件

Chinese (Simplified)

中文显示

此中文（简体）语言包为 VS Code 提供本地化界面。

any-rule

正则表达式插件

你要的正则都在这！

Auto Close Tag

标签自动闭合

自动添加HTML/XML关闭标签，与Visual Studio IDE或Sublime Text相同

Auto Rename Tag

代码自动补齐

与Visual Studio IDE一样，自动重命名成对的HTML/XML标记。

Code Spell Checker

源代码拼写检查器

检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）

DotENV

管理项目的配置信息

dotenv是一个零依赖的模块，它的主要功能是从.env文件中加载环境变量。.env文件是一个简单的文本文件，其中包含了键值对，每一对键值对代表一个环境变量和它的值。dotenv会读取这个文件，然后将这些环境变量加载到process.env对象中，使得这些环境变量可以在整个应用中使用。

EditorConfig for VS Code

统一代码风格

EditorConfig 使用 .editorconfig 文件来定义代码风格规则，这些规则包括但不限于缩进风格（空格还是tab）、行尾是否需要换行、最大行宽等。当开发者在VSCode中打开一个项目时，如果该项目包含 .editorconfig 文件，该插件会自动读取并应用这些规则到当前的工作区。

Error Lens

语法格式提示

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

Excel Viewer

查看excel文件

Excel Viewer提供了查看excel文件的功能，而且除了简单的单元格编辑之外，还提供了筛选与排序的功能，仅从文档查看的角度出发，功能还是可以的。

Git Graph

可视化Git分支和提交历史工具

Git Graph 是服务于 Git 分支管理的一种可视化工具，帮助开发者直观地理解 Git 仓库的繁杂分支信息。

GitLens — Git supercharged

每行代码的末尾，都会公开最后一次提交的作者、时间、信息。鼠标悬停在这些注释上显示更多详细信息

可视化Git工具

i18n Ally

多语言切换

国际化多语言设置

Image preview

图片预览

在gutter 和 hover 中显示图像预览

JSON to TS

把 json 格式转成标准化的 ts 类型

将 JSON 对象转化成 TypeScript 接口

Live Server

启动一个具有静态和动态页面时时重新加载功能的开发本地服务器

Live Server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。

Office Viewer(Markdown Editor)

办公文档的查看一步到位；但这个插件有一个坑点，就是会更改markdown文件的格式，所以安装之后，可以取消对markdown文件的默认开启方式。方法很简单，只需右键单击一个markdown文件，选择打开方式，在命令栏中选择最下面的为*.md配置默认编辑器，最后点击文本编辑器就可以了。

这个插件支持超多格式的查看；此外，这个插件内嵌了一个主题，所以安装之后界面的颜色可能会发生变化，不必惊慌，重新选择一个主题就可以了。

open in browser

Alt + B 打开

这允许您在默认浏览器或应用程序中打开当前文件。

Path Intellisense

路径提示

自动完成文件名的Visual Studio代码插件

Prettier - Code formatter

自动格式化

漂亮的代码格式化器；如果需要格式化vue文件，建议配合ESLint、Vetur两个插件一起使用

px to rem & rpx & vw (cssrem)

单位转换

在Vscode中转换px和rem单位，并支持WXSS。

Sass (.sass only)

css插件

缩进Sass语法高亮，自动完成和格式化

StandardJS - JavaScript Standard Style

代码格式化

JavaScript标准风格与自动修复

Stylelint

没用过

样式规范

UnoCSS

没用过

UnoCSS 是一个即时、按需的原子级 CSS 引擎。它专注于提供轻量化、高性能的 CSS 解决方案。

Vetur

语法高亮、智能代码补全、代码片段、代码导航、代码格式化和语法检查等功能

Vue的Vetur插件是一个强大的开发工具，为Vue.js开发者提供了丰富的功能，以便更轻松地编写、调试和维护Vue.js应用程序。

vscode-pdf

在vscode中查看pdf文档

vscode-pdf是基于pdf.js开发的阅读插件

vscode-styled-components

在JS文件中写样式时，有智能提示

样式组件的语法高亮显示

Vue VSCode Snippets

自定义Vue3代码片段

虽然 Vue VSCode Snippets 可以帮助你快速生成代码，但过度依赖它可能会限制你的思考和创造力。建议在使用代码片段的同时，也尝试手动编写代码，以加深对 Vue 的理解和记忆。

vue-helper

你的提效专家

增强vue开发体验，支持 Element-UI、Element-Plus、Ant Design Vue。通过可视化、基础模板、丰富物料增强 vue 开发。

vue3-snippets-for-vscode

本插件可能不完全适用于 vue2

这是一个适配 Vue3 Api 的 snippets 插件

VueHelper

Vue、Vue-router and Vuex的代码片段

辅助Vue2开发中Mixins、组件库、Vue-router的智能补全、语义高亮、跳转支持、Hover提示等，提升Vue2开发体验。

ESLint

代码检查

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

Vue 3 Snippets

代码提示

这个插件包含了所有的 Vue.js 2 和·Vue.js 3 的 api 对应的代码片段。插件的代码片段可参考官网，你不需要记住什么Snippets，就像往常一样在 vscode 里写代码就好了。比如你可以键入 vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按Enter键，就输入Vue.config.optionMergeStrategies了。