Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

IDE

Web前端刚入门的朋友,常常想选择一个快速、好用、流行(其实我也不知道为什么要流行,或许是在技术的路上,工程师希望自己走在主流的路上?)的IDE(Integrated Development Environment:集成开发环境)。IDE重要么?重要也不重要。不重要是因为:它只是一个工具,我们更应该关注的是需求、逻辑、算法、知识等。重要是因为:它是一个工具,工欲善其事必先利其器,工具选好了常常能够达到事半功倍的效果。

CesiumJS官方并没有特别推荐IDE,但在入门教程Cesium入门2 – Cesium环境搭建及第一个示例程序有这么一段话:

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

可以看到Cesium团队主要使用开源的Eclipse或者推荐使用Notepad++。

根据笔者自身的使用情况简单列了一些使用过的IDE:

  1. Notepad(Windows自带)或TextEdit(Mac自带)

    价格:免费

    下载地址:系统自带

    开启速度:极快

    操作系统:Windows/Mac

    Notepad即记事本,工程师(Note:以后笔者会将程序员称为工程师,尊重自己赢得尊重)的终极梦想摆脱IDE用纯文本编辑器编程是一种很酷的事,但是特别困难,如果单纯的阅读一些简单的HTML、JavaScript或CSS可以用记事本打开,但是非常不建议用来开发。

    如果读者系统的学习过计算机科学,那么对编译、链接、生成、测试等一定不陌生(虽然前端基本不会用到编译链接),一个好的IDE一定能够对项目有很好的组织。记事本做不到这一点。

  2. Notepad++(For Windows only)

    价格:免费

    下载地址:https://notepad-plus-plus.org/downloads/

    开启速度:极快

    操作系统:Windows

    非常优秀的超轻量级编辑器,除了能够阅读和编写HTML、JavaScript或CSS之后,支持打开文件夹,这在一定程度上对项目进行了一些组织。有大量插件可以使用。目前,就读者所了解到的,它仅支持Windows环境。

  3. Sublime Text (For Windows and Mac)

    价格:收费闭源

    下载地址:www.sublimetext.com/ (官网) | http://www.sublimetext.cn/ (国内社区)

    开启速度:快速

    操作系统:Windows

    非常优秀的轻量级编辑器。几乎涵盖Notepadd++的所有功能。同时支持Windows和Mac。海量插件。

    新特性包括:GOTO ANYTHING、GOTO DEFINITION、多重选择、命令面板、自定义、分割编辑、即时项目开关等。当然不付费,也能够使用unregistered版本。

  4. Eclipse/MyEclipse(For Windows and Mac)

    价格:免费/收费

    下载地址:https://www.eclipse.org/downloads/

    开启速递:中速/慢速

    操作系统:Windows/Mac

    MyEclipse实际上是Eclipse的一个付费版本,最开始是以插件的形式存在。Eclipse主要是作为一个Java的IDE,能够非常好的集成Java相关的插件。如果读者开发Cesium的过程中,后端选型是Java并且喜欢使用免费的IDE,没有那么关注前后端分离,那么Eclipse是一个非常好的选择。

  5. PHPStorm/IntelliJ IDEA/WebStorm(For Windows and Mac)

    价格:收费

    下载地址:http://www.jetbrains.com/phpstorm/ | http://www.jetbrains.com/idea/ | http://www.jetbrains.com/webstorm/

    开启速度:慢速

    操作系统:Windows/Mac

    从域名可以看出来,这三个IDE出自一家公司之手。它们是非常优秀的IDE,但是它们都价格不菲,并且是按年购买license。如果您有一定的资金,可以购买它们。它们真的非常优秀。其中,如果读者开发Cesium的过程中,后端选型是PHP,那么可以使用PHPStrom;如果后端选型是Java,那么可以使用IntelliJ IDEA;如果只是需要开发Web前端的代码,有一个比较好配置电脑,可以接受付费,那么可以使用WebStorm。有句老话叫:“便宜没好货,好货不便宜”,卖这么贵,是因为它们真的很好用。

  6. Visual Studio Code (VSCode)(For Windows and Mac)

    价格:免费

    下载地址:https://code.visualstudio.com/

    GitHub地址:https://github.com/Microsoft/vscode

    开启速度:快速

    操作系统:Windows/Mac

    便宜真的没好货么?并不是,向大家隆重介绍,宇宙最强IDE VSCode。在MSRA实习的时候,就一直在想Visual Studio可以做得那么优秀,那么有没有能在前端使用的类似于Visual Studio的优秀的IDE。有的,Microsoft的亲儿子,免费开源跨平台的Visual Studio Code来了。不得不说,Microsoft这几年在拥抱开源方面确实做了很多。

    Free. Built on open source. Runs everywhere.
    
    

    VScode 不仅可以用来开发前端,也可以用来开发Java、PHP、C++、Python…

    插件官网:https://marketplace.visualstudio.com

    VScode在各个方面并不比WebStorm逊色。VSCode拥有非常好的插件生态。具有一个优秀IDE应该有的各种功能特性:智能提示、前端支持、自动修复(插件)、Git/GitHub集成(GitLens)、历史记录(Local History)、代码检查(Code Spell Checker)、主题配色等。

Visual Studio Code 入门

1. 命令面板

可以通过F1或Ctrl(Cmd for MAC)+Shift+P打开

在框中输入:>Extensions: Show Installed Extensions 即可查看已安装的插件,也可以输入其它命令。

2. 如何安装插件

安装live server插件

点击左侧工具栏中的Extensions,在框中输入live server也可以是别的插件吗,然后可以看到第一个插件名为:

Live Server。点击Install,即安装该插件。

该插件的用处:内置一个Web服务器(Live Server),可以在开发代码的过程中,随时预览自己的修改是否正确,而无需过于关注Web服务器。

右击“Open With Live Server”即可在浏览器中打开对应Cesium页面: 

3. 常用插件列表

Settings Sync:同步VSCode配置

Debugger for Chrome:VS Code调试在Google Chrome中运行的JavaScript代码

beautify: 格式化代码

Auto Rename Tag: 自动完成头部和尾部闭合标签的同步修改

guides:代码对齐辅助线

filesize:显示当前文件大小、创建修改时间

Todo Tree:快速搜索TODO等注释标记

vetur/VueHelper: VUE插件

HTML Snippets:提示初级的h5代码片段,标签等

HTML CSS Support:让html标签写上class,智能提示当前项目所支持的样式。

vscode-icon:让vscode的文件夹目录添加上对应的图标。(如果不生效,在【文件-首选项-文件图标主题】重新选择设置)

path intellisense:文件路径自动补齐。

npm intellisense:require引用包的补齐

bracket pair colorizer:让括号有独立的颜色

tortoiseSvn:svn插件

auto close tag:自动添加html、xml关闭标签

change-case:修改文本的更多明明格式,驼峰命名,下划线分割命名等等

color info:在颜色上悬停光标,就可以预览色块中色彩模型的详细信息、

css peek:追踪至样式表中css类和id定义的地方。在html文件右键菜单,单击选择器时,选择“go to definition ”,会跳转到css样式代码段

eslint:检查js编程中的语法错误

html boilerplate:html模板插件,一键创建html文件

htmlHint:html代码格式检测

intelliSense for CSS class names in HTML:把项目中css文件里的名称,智能提示在html中

JavaScript (ES6) code snippets :es6代码片段提示

上述插件直接搜索安装即可。

4. 中文语言包

chinese(Simplified)Language Pack for Visual Studio,看不习惯英文的读者,可以下载安装这个,中文简体语言包。

安装完成之后,重启VSCode:

网络上有非常多的博主详细的介绍了如何使用Visual Studio Code工具。大家可以打开搜索引擎进行搜索。也可以在Cesium中文网(http://cesium.coinidea.com/)上留言。

Cesium中文网交流QQ群:807482793

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

[一]Cesium利其器——Visual Studio Code的更多相关文章

  1. ionic2——开发利器之Visual Studio Code 常用插件整理

    1.VsCode官方插件地址: http://code.visualstudio.com/docs 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的“”扩展“”中搜索需要的插件 添加方法使 ...

  2. Visual Studio Code——Angular2 Hello World 之 2.0

    最近看到一篇用Visual Studio Code开发Angular2的文章,也是一篇入门教程,地址为:使用Visual Studio Code開發Angular 2專案.这里按部就班的做了一遍,感觉 ...

  3. docker4dotnet #3 在macOS上使用Visual Studio Code和Docker开发asp.net core和mysql应用

    .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对岸的苹果园越来越茂盛,实在不想再去做一只宅猿了.于是,.net猿决定搭上小鲸鱼的渡轮到苹果园去看 ...

  4. 打造TypeScript的Visual Studio Code开发环境

    打造TypeScript的Visual Studio Code开发环境 本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...

  5. Visual Studio Code预览版Ver 0.3.0试用体验

    当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...

  6. ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序

    原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith ...

  7. Visual Studio Code升级到0.5,提供对ES6的更好支持

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:题目即题记. 自从Visual Studio Code发布之后(最初是0.1),微软就 ...

  8. 微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器

    微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览 ...

  9. 在 Visual Studio Code 中使用 PoweShell - CodeShell

    一直希望在 Visual Studio Code 中使用 PowerShell,插件 CodeShell 提供了对于 PowerShell 的支持. 安装 首先按 F1,打开命令窗口,输入安装插件的命 ...

随机推荐

  1. mysql表死锁查询

    1.查询是否锁表show open tables where in_use>0; 2.查询进程show processlist查询到相对应的进程,然后 kill id 3.查看正在锁的事务sel ...

  2. 解决Tomcat9打印台乱码问题

    问题描述: Tomcat打印台.打印出来的字体全是乱码后的显示.影响视觉体验,不利于bug查找和错误排查.故寻找方法去修改. 解决方法: 1.找到目录 2.对日志参数进行修改 3.改动编码 4.修改成 ...

  3. CountDownLatch源码阅读

    简介 CountDownLatch是JUC提供的一个线程同步工具,主要功能就是协调多个线程之间的同步,或者说实现线程之间的通信 CountDown,数数字,只能往下数.Latch,门闩.光看名字就能明 ...

  4. 【LeetCode】1161. Maximum Level Sum of a Binary Tree 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetcod ...

  5. 菜鸟物流的运输网络(计蒜客复赛F)

    菜鸟物流有自己的运输网络,网络中包含 nn 个城市物流集散中心,和 mm 对城市之间的运输线路(线路是双向的).菜鸟物流允许淘宝卖家自行确定包裹的运输路径,但只有一条限制规则:不允许经过重复的城市.淘 ...

  6. 利用shiro反序列化注入冰蝎内存马

    利用shiro反序列化注入冰蝎内存马 文章首发先知社区:https://xz.aliyun.com/t/10696 一.shiro反序列化注入内存马 1)tomcat filter内存马 先来看一个普 ...

  7. HDU 6608:Fansblog(威尔逊定理)

    Fansblog Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Subm ...

  8. 'real'词频分析

    写下来想法来自于无聊时写的代码.https://cryptopals.com/sets/1/challenges/3 The hex encoded string: 1b37373331363f781 ...

  9. 『动善时』JMeter基础 — 59、进行JMeter分布式测试遇到的坑

    目录 1.控制机端 (1)执行机没有关闭防火墙 (2)内存溢出 2.执行机端 (1)启动jmeter-server服务情况一 (2)启动jmeter-server服务情况二 (3)启动jmeter-s ...

  10. Reflection 基础知识(二)

    Proxy 定义 Proxy用于修改对象的某些行为,获取值,设置值等 let p = new Proxy(target, handler); target 用Proxy包装的目标对象(可以是任何类型的 ...