前端开发IDE VSCode + live preview
live preview
为方便web开发者,编写网页静态代码,不用频繁切换到浏览器去查看的贴心功能。
可以在编辑器中,就实现编辑预览功能, 边编写代码,边查看预览效果。
与vscode相对应的其他两款编辑器具有相同功能, 这两款编辑器是专门为web开发设计。
vscode覆盖范围更广, 其它多种类型语言都支持。
所以熟悉的vscode更具有优势。
Brackets
http://brackets.io/
Adobe出品。
A modern, open source text editor that understands web design.
Live Preview
Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it. It's the power of a code editor with the convenience of in-browser dev tools.
Atom
github出品
https://www.sitepoint.com/7-atom-add-ons-for-running-code-and-previewing-changes/
Atom HTML Preview
Atom HTML Preview shows a live, as-you-type preview for HTML documents, with support for CSS and JavaScript. This is somewhat basic for today’s web development, but it’ll do the work just fine for many of us. It’s a simple, lightweight package that does exactly what’s expected.
VSCode
https://code.visualstudio.com/
Code editing. Redefined.
Meet IntelliSense.
Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.‘’
Print statement debugging is a thing of the past.
Debug code right from the editor. Launch or attach to your running apps and debug with break points, call stacks, and an interactive console.
VSCode Live Preview
在插件搜索栏中搜索 Preview, 选择 Preview on Web Server 安装。
然后打开一个HTML文件, 在编辑区点击鼠标右键, 选择 Preview on Side Panel
显示HTML运行结果:
这样边编写代码,就可以在右边查看执行结果。
当然也可以选择在浏览器中查看。
前端开发IDE VSCode + live preview的更多相关文章
- 前端开发工具-VsCode插件【个人开发常用】
前端开发工具-VsCode插件[个人开发常用] Atom One Dark Theme-主题 Chinese (Simplified) Language Pack for Visual Studio ...
- Brackets前端开发IDE工具
Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...
- 前端开发神器 VSCode 使用总结
VSCode 是微软出品的,基于 Electron 和 TypeScript 的,集成了 git 版本管理和命令行终端,而且开源稳定,插件丰富,再搭配一款 Chrome 浏览器,可以说是前端开发神器了 ...
- 前端开发利器VSCode
最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS ...
- 【前端必会】前端开发利器VSCode
介绍 工欲善其事必先利其器,开发工具方面选择一个自己用的顺手的,这里就用VSCode 安装参考 https://www.runoob.com/w3cnote/vscode-tutorial.html ...
- web前端开发教程系列-1 - 前端开发编辑器介绍
目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...
- Visual Studio 2015和ASP.NET 5中可用的前端开发工具集
最近微软发布了一本白皮书,谈到了一些可以和Visual Studio 2015和ASP.NET 5配合使用的JS/前端Web开发工具(比如:函数库.任务执行器.框架等). 由于现在前端开发的生态系统在 ...
- 工具-VS2015前端开发工具简介
每个涉及的工具库都给出了入门介绍.基本概念,以及在VS和ASP.NET中的用法.这个白皮书完全就是一个非常难得的前端开发入门手册. 具体涉及到的工具库有: 流行的JS任务执行器:Grunt和Gulp. ...
- 前端开发利器-Brackets IDE
是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...
随机推荐
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- DES加密算法应用:分组加密模式
通常,大多数的分组加密算法都是把数据按照64位分组的方式进行加密和解密.但是几乎所有的加密工作所涉及的数据量都远远大于64位,因此就需要不断地重复加密过程,直到处理完所有的分组.这种分组加密中所涉及的 ...
- 如何自己制作CHM电子书?
软件介绍: EasyCHM 非常适合个人和单位制作高压缩比的有目录.索引,同时具有全文检索及高亮显示搜索结果的网页集锦.CHM格式的帮助文件.专业的产品说明书.公司介绍.文章集锦.CHM电子书等等. ...
- k8s部署dashboard:v1.5.1
1.准备dashboard.yaml文件 apiVersion: extensions/v1beta1 kind: Deployment metadata: # Keep the name in sy ...
- Ubuntu 16.04 安装垃圾清理工具 BleachBit
BleachBit 可以清理系统缓存文件, 清理磁盘垃圾. 首先下载最新版 deb安装包,默认下载到Downloads 中, 下载链接: https://www.bleachbit.org/downl ...
- 5G来了,中国移动能力开放平台的NFV,支持面向5G的演进,已经具备初期商用条件!
近日互联网招聘平台发布的<2019春招旺季人才趋势报告>显示,“新新职业”人才受到企业追捧: 5G相关人才需求大幅增长,5G工程师平均招聘月薪达1.39万元,同比增长12.2%.其中,光传 ...
- js斐波拉切
如下: //1 1 2 3 5 8 13 21...//斐波拉切 function fei(n){ if(n==1 || n==2){ return 1 }else{ return fei(n-1)+ ...
- 015_python原生在线调试工具
一.pdb https://docs.python.org/3/library/pdb.html
- Day9 轨道角动量
转自中山大学电子与信息工程 http://seit.sysu.edu.cn/node/1004 能量.动量(角动量和线动量)光子的基本属性,其中光子角动量包括自旋角动量和轨道角动量(Orbital a ...
- Python之shutil模块(复制移动文件)
用python实现将某代码文件复制/移动到指定路径下.场景例如:mv ./xxx/git/project1/test.sh ./xxx/tmp/tmp/1/test.sh (相对路径./xxx/tmp ...