Home >Web Front-end >H5 Tutorial >Web 前端 IDE 用的都是什么啊?

Web 前端 IDE 用的都是什么啊?

WBOY
WBOYOriginal
2016-06-07 08:41:582194browse

写node ,angular什么的你们都用什么,用webstorm还说sublime啊

回复内容:

强烈推荐IDEA,前后端均是大杀器。

作为Jetbrain所有ide的爸爸,当然也是webstorm的爸爸,加之超丰富的插件支持,MEAN全栈,Java全家桶,php,python写起来都非常爽。前端支持的框架也是非常之多。

集成各种服务器,各种数据库,各种自动化工具,习惯了以后再也不会想用其它ide 用brackets的悄悄路过 Chrome DevTool,所见即所得。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(1)修改本地文件
Web 前端 IDE 用的都是什么啊?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(2)在线编辑JS和CSS,刷新后仍保持修改。Chrome插件,Flip the Script
Web 前端 IDE 用的都是什么啊? 过去我用 Visual Studio + Sublime Text 轻重搭配.
现在只用 VSCode 了.

对我来说, VSCode 的集成度不多不少, 正好合适. 最近随着 TypeScript Salsa 的不断更新, JavaScript 开发体验也越来越好, 比如已经能认识多数 JSDoc 中标注的类型, 不需要再单独写 .d.ts. (为获得最佳体验, 建议同步更新到 TypeScript 最新 nightly build.)

很重要的是, VSCode 免费, 开源, 跨平台. ESLint, JSHint 等都有好用的插件, 最新版也加入了默认 EOL, 自动去除尾部空白等, 非常适合作为团队首选编辑器. ;) 纠正一下,sublime 算不上是 IDE,就是个编辑器,与 webstorm 没什么可比性。

另:vscode 感觉在 IDE 和编辑器这两者之间,也就是说,既有 IDE 的集成感,又有编辑器的轻量与速度感。

我自己:IDE 和编辑器各来一款,不冲突。(自己目前是 vscode 和 sublime 的组合) 最近在用国产的hbuilder,还不错。 严肃滴写代码的时候,必须用 Jetbrain 家的 IDE。 更新:刚刚升级到了 WS 2016,发现它也支持 JavaScript 使用 .d.ts 智能提示了,虽然在 async fetch 的例子上还有点问题,提示的体验也比 VS Code 差一点。但是总体来说,WebStorm 在功能上是全面超越 VS Code 的。除了三个不足:
1. 收费,但是作为生产力工具并不贵。
2. 比较吃配置,在系统资源吃紧的情况下会卡。
3. 界面可能有些土。

我更推荐轻量而且开源的 VS Code,结合 .d.ts 开发 JavaScript,智能提示非常棒。
截几张图:
Web 前端 IDE 用的都是什么啊? Web 前端 IDE 用的都是什么啊?VS Code 知道这个 data 是 Buffer 哦。
Web 前端 IDE 用的都是什么啊?await 返回的值类型也知道。

VS Code 智能提示的背后是 TypeScript 和 .d.ts 定义文件,相比分析 JS 代码得到的智能提示,.d.ts 方案速度相当快,而且提示很精确,部分弥补了 JS 作为一门动态类型语言的不足。

也许你不会喜欢 TypeScript,但是 VS Code 和 .d.ts 绝对值得一试。
另外,VS Code 开发 CSS 和 HTML 也不错,内置 emmet、css 补全和 less 语法,可以满足一般需求。

写了一个简单的例子,配好了 config 和 dts, clone 到本地用 VS Code 打开就可以试用了 - GitHub - meowtec/vscode-is-smarter IDE不怕重,有机器帮你提高效率,难道非要浪费时间?
编码是个体力活儿,能让机器干的一定要让机器干。
码农的精力应该投入到更有创造性的工作中去。
所以,WebStorm更佳。 原文看这里 simplyy.space/article/5

图片知乎都给弄没了 orz

atom tips(0):介绍

github 官方介绍:The hackable text editor

atom 的用户越来越多,尤其是 web 前端开发者,几乎能和 sublime 分庭抗礼,而且要知道的是 sublime 是 个人开发者并且收费闭源(蛇神说更新慢的一比,bug万年不修),而 atom 则是整个社区驱动,插件一年发布上千个(一堆 amazing 的插件),而且在 web 前端开发方面现在几乎拥有 sublime 的所有功能(并且更多,关键是还可以 hackable 啊)。

总之,我觉得它非常的简单易用、外形好看、功能强大、hackable、amazing、强大的社区驱动(github 就是它的生态 orz),前端开发者的福音。


外形

atom 的界面 ui 非常的现代化,并且有很多 theme 可以选择

我的 theme


性能

我知道大家都黑它启动慢,但是讲真,它越来越快了,我这里第三方插件装了56个,只要 1.5s 启动。

同时 Atom编辑器1.0版本以来性能得到了很大的提升,主要是两个方面,一方面是js层的各种渲染优化,控件优化,延迟绘制,延迟加载,只绘制当前需要的东西等,另外一方面是将一些核心数据结构移动到 Electron 的 C++层,如今1.54版本性能较去年版本已经有了本质区别,运行时加载是慢些(但也比eclipse快很多),实际使用并没觉得不如别的编辑器,况且,js层的优化和C层的优化未来还有很大的空间可以进步。 作者:韦易笑 链接:如何评价 GitHub 发布的文本编辑器 Atom? - 韦易笑的回答 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


安装插件

有着 ui 界面的插件页面,安装、管理插件会非常方便


丰富的快捷键操作

cmd 在 win 下对应为 ctrl

它是基于 electron(Electron 的底层基于Chromium 和node.js),并且你会发现它非常像 chrome dev tools(cmd + p,cmd + shift + f 等等快捷键完全一样,一套快捷键俩地方使用,简直不能再棒)。

更多在这 SimplyY 的博客文章: 《atom tips(1):常用操作》 链接为:simplyy.space/article/5


强大的模糊命令

cmd + shift + p 启动,通过命令输入框可以使用任何插件(自带插件和第三方插件)的功能。特别是对于懒得记太多快捷键的童鞋的福音(说的就是我。。)


丰富而且 amazing 的插件

SimplyY 的博客文章: 《atom tips(2):web 开发常用插件》 链接为:simplyy.space/article/5

强大的 snippets 系统

自己定制自己的代码补全功能,是那么的简单。动态语言补全的福音。而且非常的 hackable。

我自己写了一个 web 开发者常用的, GitHub - SimplyY/simplyy-snippets: atom package for code complete

详情见这里 Atom飞行手册翻译: 2.6 代码段


和 git、github 深度配合

你可以直接从当前文件定位到 github 的文件,和 git 的深度配合

详情见这里 Atom飞行手册翻译: 2.11 Atom中的版本控制

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn