vscode编写html插件(vscode前端必备插件)
所谓想把事情做好的工人,首先要把工具磨快。对于前端开发人员来说,选择一款得心应手的开发工具,不仅可以提高开发效率,还能达到事半功倍的效果。目前市面上有很多前端开发工具,比如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