关于我们 | 联系我们

亚博APP - 安全有保障

当前位置:主页 > 产品展示 > 产品四类 >

VSCode前端必备插件 有可能你装了却不知道如何使用?

本文摘要:Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和富厚的功效,它很快就受到了大家的喜爱。就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包罗了数以千计质量差别的插件。下面我列出一些VSCode前端必备插件,并配有图文先容,快来看看你是否都市使用呢? VS Code 安装和汉化 下载地址:VS Code官网链接 选择合适的版本,安装即可 安装完成后如图。

亚博app

Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和富厚的功效,它很快就受到了大家的喜爱。就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包罗了数以千计质量差别的插件。下面我列出一些VSCode前端必备插件,并配有图文先容,快来看看你是否都市使用呢? VS Code 安装和汉化 下载地址:VS Code官网链接 选择合适的版本,安装即可 安装完成后如图。

我自己是一名从事了多年开发的web前端老法式员,现在告退在做自己的web前端私人定制课程,去年我花了一个月整理了一份最适合2019年学习的web前端学习干货,种种框架都有整理,送给每一位前端小同伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。如果需要汉化,ctrl + shift + x,打开插件商店,输入 chinese,然后选择第一个,点击 ‘install’安装完成后重启软件,显示如下,则汉化完成插件 1.Open-In-Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器检察文件选项,以及在客户端(Firefox,Chrome,IE)中打开下令面板选项。2.Quokka Quokka 是一个调试工具插件,能够凭据你正在编写的代码提供实时反馈。

它易于设置,并能够预览变量的函数和盘算值效果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。3.Faker 使用盛行的 JavaScript 库 – Faker,能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码,或者经典的乱数假文段落,而且每个种别还包罗了种种子种别,你可以凭据自身的需求来使用这些数据。

4.CSS Peek 使用此插件,你可以追踪至样式表中 CSS 类和 ids 界说的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。5.HTML Boilerplate 通过使用 HTML模版插件,你就挣脱了为 HTML 新文件重新编写头部和正文标签的苦恼。

你只需在空文件中输入 html,并按 Tab 键,即可生成洁净的文档结构。6.Prettier Prettier 是现在 Web 开发中最受接待的代码花样化法式。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速花样化为统一的代码样式。

如果你还想使用 ESLint,那么另有个 Prettier – Eslint 插件,你可不要错过咯!7.Color Info 这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

亚博app安全有保障

8.SVG Viewer 此插件在 Visual Studio 代码中添加了许多实用的 SVG 法式,你无需脱离编辑器,便可以打开 SVG 文件并检察它们。同时,它还包罗了用于转换为 PNG 花样和生成数据 URI 模式的选项。9.TODO Highlight 这个插件能够在你的代码中标志出所有的 TODO 注释,以便更容易追踪任何未完成的业务。

在默认的情况下,它会查找 TODO 和 FIXME 关键字。固然,你也可以添加自界说表达式。10.Icon Fonts 这是一个能够在项目中添加图标字体的插件。

该插件支持凌驾 20 个热门的图标集,包罗了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。11.Minify 这是一款用于压缩合并 JavaScript 和 CSS 文件的应用法式。它提供了大量自界说的设置,以及自动压缩生存并导出为.min文件的选项。

它能够划分通过 uglify-js、clean-css 和 html-minifier,与 JavaScript、CSS 和 HTML 协同事情。12.Change Case 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能举行文本巨细写的转换。

而此插件则添加了用于修改文本的更多命名花样,包罗驼峰命名、下划线分开命名,snake_case 命名以及 CONST_CAS 命名等。13.Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项。14.Language and Framework Packs VSCode 默认支持大量的主流编程语言,但如果你所使用的编程语言不包罗在内,也可以通过下载扩展包来自动添加。

同时,你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。15.Themes 固然,在众多的实用插件中,岂能少了漂亮的主题呢?你天天都市与你的 VSCode 编辑器举行“亲密的接触”,为何不把它妆扮得更漂亮些呢?这里有一些资助你更改侧边栏的配色方案,以及图标的相关主题,与大家分享:16.vscode-icons 种种漂亮的图标17.filesize 左下角显示文件巨细的插件18.GitLens 能显示每一行代码的作者以及提交时间。

19.Git history。


本文关键词:亚博app安全有保障,VSCode,前端,必备,插件,有可能,你装,了却,Visual

本文来源:亚博app-www.sdhhmy66.com

Copyright © 2004-2021 www.sdhhmy66.com. 亚博app科技 版权所有 备案号:ICP备84433998号-2