服务器购买网站vuter,vscode中安装开发html5中需要的插件
vscode中安装开发html5中需要的插件
vscode中安装开发html5中需要的插件
最近在学习H5,也开始尝试着用vscode来写h5的代码。vscode是一个很不错的剪辑器,已经用它来写过php,python,还有vue的代码了。最近使用它写H5的代码,推荐一些H5有关的插件。
1.Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中Emmet使用缩写语法快速编写HTML、CSS以及实现其他的功能,极大的提高了前端开发效率。
a.安装完之后,创建一个html的文件敲入!,然后按一下tab就会出现h5的基本框架。
b.可以直接用缩写敲入div,按tab,就会出现
c. .page会被转译成
d. ul>li*5会被转译成
可以去查一下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中需要的插件
最近在学习H5,也开始尝试着用vscode来写h5的代码.vscode是一个很不错的剪辑器,已经用它来写过php,python,还有vue的代码了.最近使用它写H5的代码,推荐一些H5有关的插件. 1 ...
- 在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博客专家,从事软 ...
- pycharm中安装可以贴图片的Markdown插件
方法一:(测试成功) 先安装官方推荐的Markdown support插件,再安装Paste images into MarkDown 如果Paste images into MarkDown插件在线 ...
- 在html中超链接_4.html5中超链接
html中超链接都是通过标签实现的,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的广泛采用允许我们抛弃那些刚性限制的基于表单的网站;然 ...
- oracle em中查看jiob,HTML5 中的 b/strong、i/em 详解
这篇文章主要聊一聊 HTML5 中的 和 ,以及 和 . 从页面显示效果来看,被 和 包围的文字将会被加粗,而被 和 包围的文字将以斜体的形式呈现.那大家可能就会疑惑了,既然效果一样,那为什么还要重复 ...
最新文章
- 十一月第三周学习进度条
- MIB in SNMP
- centos7 系统备份
- libnet apply method
- Android Studio开发配置NDK环境
- python一维平滑滤波_高斯滤波器的原理及其实现过程(附模板代码)
- python旋转matplotlib绘制的三维图
- 汇编语言:程序如下,编写code段中的代码,将a段和b段中的数据一次相加,结果放到c段中
- openstack ha 部署
- 【Linux开发】如何查看Linux kernel的内置模块驱动列表和进程ID
- EverWeb for Mac(网页设计软件)v3.5.1中文版
- python perl 正则_为什么说perl的正则表达式功能比Python强大
- python爬虫基础教程115_python爬虫分析:115网盘的模拟登录
- 编辑器——sublime
- 201621123068 Week03-面向对象入门
- Supervisor管理springboot应用
- C#中导出数据时控制Excel 2007生成2003兼容模式的文件
- java毕业设计旅拍平台源码+lw文档+mybatis+系统+mysql数据库+调试
- API接口名称(item_get - 根据ID取商品详情)[item_search,item_get,item_search_shop等]
- 合泰HT32 淘晶驰TJC--T0串口屏学习笔记