首页天道酬勤vscode编写html插件(vscode前端必备插件)

vscode编写html插件(vscode前端必备插件)

admin 12-05 02:10 577次浏览

所谓想把事情做好的工人,首先要把工具磨快。对于前端开发人员来说,选择一款得心应手的开发工具,不仅可以提高开发效率,还能达到事半功倍的效果。目前市面上有很多前端开发工具,比如VS Code、Web Storm、Atom、Hbuilder、升华科技3,其中VS Code和Web Storm是其中两个个人体验比较好的。Web Storm是jetbrains拥有的一款JavaScript开发工具,即插即用,不需要太多配置。另外,Web Storm的智能提示堪称神级,值得使用。但是相比Web Strom,VS Code最大的优势是免费,VS Code占用内存少,插件多。您可以通过安装插件来创建合适的开发环境。VS代码实际上是一个披着编辑器外衣的IDE。因为Web Storm更像是一个制作工具,我个人推荐VS Code,可以增强学习阶段对前端语法和相关内容的记忆,增加前端开发的熟练度。用Visual Studio代码构建前端开发环境的步骤如下:

第一步是下载Visual Studio代码。在网站上搜索Visual Studio Code进入相应的下载页面或者直接打开https://code.visualstudio.com/Download/进入,然后选择相应的计算机操作系统版本进行下载。(注意:Windows有两个版本,一个是用户安装程序,一个是系统安装程序。前者安装在当前电脑登录账号目录,后者安装在非用户目录。个人建议选择后者,因为不会因为用其他账号登录系统而无法使用。)

Visual Studio代码下载页

第二步是安装Visual Studio代码。下载Mac版后,可以直接打开使用。将下载的文件拖到启动平台,然后在启动平台上会看到Visual Studio Code的图标。对于Windows版本,可以直接点击下一步,在其中可以根据需要选择相应的安装目录。

Windows版本选择相应的安装目录。

第三步:打开Visual Studio代码,安装相应的插件。安装完成后,您需要重新启动才能使插件生效。目前只用于前端开发。我个人建议你只需要安装Live Server,beautiful,vscode-icons,HTML Snippets,自动关闭标签,HTML中CSS类名的IntelliSense,以及Atuo Rename Tag。

直播服务器:具有实时加载功能的服务器。保存代码后,可以在网页中实时看到效果。

更漂亮:代码格式化;

Vscode-icons:文件显示图标;

html片段:自动填充HTML标签;

自动关闭标签:自动添加关闭/关闭标签;

Atuo Rename Tag:修改html标签,自动帮你完成尾闭包标签的同步修改;

html中CSS类名的Intellisense:根据输入类所在的外部文件或引入的链接元素找到对应的类名,并提示为HTML。

插件安装界面

第四步是配置VS Code,这里只修改对应的字体大小、界面主题和文件图标。

1.进入配置界面。

进入Visual Studio代码设置界面。

2.设置字体大小

设置字体大小

3.设置VS代码主题

设置Visual Studio代码界面主题

4.设置文件图标显示

设置Visual Studio代码文件图标样式

第五步:创建第一页,通过Live Server查看页面效果。

1.创建一个页面并打开它。

单击文件选择新文件,然后保存并命名为demo.html。在VS Code的编辑界面输入感叹号(英文输入方式),提示按Enter键生成完整的html页面代码。然后保存,点击鼠标右键选择用Live Server打开,浏览器就会打开看到页面效果(建议安装Chrome浏览器,打开时选择Chrome)。

用于Visual Studio代码自动完成的HTML代码

2.代码格式化,使用更漂亮的(快捷键:shift alt f)

在更漂亮的代码格式之前

在更漂亮的代码被格式化之后

前端小白,就把这个当做学习笔记分享吧。如果有需要改进或不合适的地方,请给我建议。

1 0.01=1.01

1-0.01=0.99

css如何实现给元素块加阴影的效果文件存储-创建文件系统 UFS为什么不捕获=“用户”将手机的摄像头更改为正面?javascript:void(O)如何解决雷士灯具管理系统
伊的家怎么样(伊的家都有什么产品) 写代码有什么用(教你如何敲代码)
相关内容