vscode中安装开发html5中需要的插件

最近在学习H5，也开始尝试着用vscode来写h5的代码。vscode是一个很不错的剪辑器，已经用它来写过php，python，还有vue的代码了。最近使用它写H5的代码，推荐一些H5有关的插件。

1.Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中Emmet使用缩写语法快速编写HTML、CSS以及实现其他的功能，极大的提高了前端开发效率。

（PS:我发现在vue中，tab不起作用，那么需要再settings.json中加入）

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {"vue-html": "html","vue": "html"
}

a.安装完之后，创建一个html的文件敲入！，然后按一下tab就会出现h5的基本框架。

b.可以直接用缩写敲入div，按tab，就会出现<div></div>

c. .page会被转译成<div class="page"></div>

d. ul>li*5会被转译成

<ul>

</ul>

可以去查一下emmet的文档，这样可以加快自己的开发效率

2.格式化插件 vuter，eslint，setting中加入以下设置

  //autoFixedOnSave 设置已废弃，采用如下新的设置"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,//autoFix默认开启，只需输入字符串数组即可"eslint.validate": ["javascript","vue","html"],"editor.quickSuggestions": {//开启自动显示建议"other": true,"comments": true,"strings": true},// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化 "editor.formatOnSave": true,// #每次保存的时候将代码按eslint格式进行修复//  #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true,//  #去掉代码结尾的分号 "prettier.semi": false,//  #使用带引号替代双引号 "prettier.singleQuote": true,//  #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"// #vue组件中html代码格式化样式}},// 格式化stylus, 需安装Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false,"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"window.zoomLevel": 0, // 两个选择器中是否换行/** Easy Sass 插件 **/"easysass.formats": [{"format": "expanded", // 没有缩进的、扩展的css代码"extension": ".css"}],"easysass.targetDir": "./css/" // 自定义css输出文件路径

3.open in brower,安装之后就可以用游览器打开html文件

4. Live Server VSCode前端文件（html文件）以服务器模式打开

在局域网内可以设置成本地ip，然后让同一局域网内的手机或者其他设备打开。

先分享着4个，如果以后发现其他好用的插件再继续分享。

vscode中安装开发html5中需要的插件相关推荐

服务器购买网站vuter,vscode中安装开发html5中需要的插件
vscode中安装开发html5中需要的插件 vscode中安装开发html5中需要的插件最近在学习H5,也开始尝试着用vscode来写h5的代码.vscode是一个很不错的剪辑器,已经用它来写过p ...
在vim中安装php的xdebug和 vdebug插件, 在vim中进行调试php代码
在vim中安装php的xdebug和 vdebug插件, 在vim中进行调试php代码参考: http://www.cnblogs.com/qiantuwuliang/archive/2011/0 ...
IDEA中安装并使用JRebel热部署插件
文章目录作者简介引言导航热门专栏推荐概述安装JRebel 注册JRebel 配置JRebel 最后小结导航热门专栏推荐作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软 ...
在html中超链接_4.html5中超链接
html中超链接都是通过标签实现的,html5也不例外,这里就来探讨一下标签. 元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性,全局属性是的问题我们以后再来探 ...
oracle em中查看jiob,HTML5 中的 b/strong、i/em 详解
这篇文章主要聊一聊 HTML5 中的和 ,以及和 . 从页面显示效果来看,被和包围的文字将会被加粗,而被和包围的文字将以斜体的形式呈现.那大家可能就会疑惑了,既然效果一样,那为什么还要重复 ...
html5是播放什么中新,关于html5中标签video播放的新解析-
这篇文章主要介绍了关于html5中标签video播放的新解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下前端同学要使用 HTML5 播放器视频,必然会使用 video 标签,不过大 ...
html5调用手机中的application,HTML5中的Application Cache概念
HTML5中的Application Cache概念我们知道缓存技术对于提高我们的应用程序性能有着非常重要的作用,主流的编程语言基本上都有相应的缓存技术比如 Applic览或讲琐了过自系一读页围这就 ...
媒体查询在html中怎么写,HTML5中的媒体查询
HTML5中的媒体查询时间:2014-6-6 在我看来,在网站设计领域,媒体查询一直是多年最大的促变因素-大概是因为CSS本身已成为主流,CSS的广泛采用允许我们抛弃那些刚性限制的基于表单的网站;然 ...
pycharm中安装可以贴图片的Markdown插件
方法一:(测试成功) 先安装官方推荐的Markdown support插件,再安装Paste images into MarkDown 如果Paste images into MarkDown插件在线 ...

vscode中安装开发html5中需要的插件

vscode中安装开发html5中需要的插件相关推荐

最新文章

热门文章