安装和配置—Webstorm入门指南 - 推酷
安装和配置—Webstorm入门指南
WebStrom档案
用途：功能强大的前端专用IDE，拥有即时编辑（chrome）、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性，推荐前端工程师使用。
Idea、 PhpStorm、Webstorm三者是一脉相承的IDE，界面和操作基本相同，Webstorm速度最快，Idea功能最强大。明河主要讲解Webstorm，可以套用到PhpStorm和Idea上。
Webstorm目前无中文版，很多同学刚上手时摸不着头脑，这也是明河写这个系列教程的原因，如果你愿意看完这个系列教程，就会体验到Webstorm的省心和强大。
Webstorm的安装
（还会更新）
先下载Webstorm，然后从明河的分享链接中找到注册机下载到本地。
安装过程很简单，一直下一步即可，运行Webstorm后，会出现需要注册的页面，打开注册机程序：
将注册机的信息复制进去即可。
Webstorm的默认字体和配色相当糟糕（这点不如sublime_text），你可以直接手动改进Webstorm的配置（颇有成就感哦O(∩_∩)O），当然也可以直接导入明河的配置（从分享链接中找到明河的配置包，下载到本地），如下图：
（当然，你也可以点击“Export settings”导出你自己的配置。）
手动配置Webstorm
配置项极其丰富，建议善用搜索，比如配置字体大小：
导入后可能会出现一个“git配置失败”的提示，如果你没有用git可以无视，有用git，可以点击“
找到你本机的git目录：
有使用github，还需要配置下github的账号和密码：
进入Webstorm的配置界面，搜索github
推荐使用字体
推荐使用DroidFamily或SourceCodePro_FontsOnly字体，这二款字体都很美观，代码看上去很舒服，在明河的分享链接上有个“字体”文件夹里面有，自行下载安装，安装完后重启Webstorm，进入“settings”，找到font配置。
下一篇将讲解Webstorm的初步使用和主要界面模块。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示webstorm有免费版本吗?
类似Pycharm那种免费版本
按投票排序
有学生/教育工作者、创业公司、开源项目都可以申请免费License
专业版的也可以破解，下面附上最新版的下载地址：
怎么申请？我们是创业公司WebStorm 如何实现代码块左移？
WebStorm 如何实现代码块左移，按 Tab 可以实现代码块右移，那怎么实现左移呢，搜了好久只有上下移动的
按投票排序
可以试试 Shift + Tab
左移指调整缩进？ 可以安装插件 IdeaVim。shift + v 然后按 j 或者 k 上下移动选择代码块，再按向左的尖括号，按向右的尖括号则是右移。（竟然打不出尖括号。。。。热门排序 |
自问自答，多图杀猫。&br&先说缺点吧：&br&&blockquote&&ol&&li&常驻内存300M左右，如果你的内存只有1G，请用Sublime/VIM。如果你内存有4G，我觉得你真不用在意这点内存，Chrome 占的内存比这多多了，你还不是用的很嗨？&br&&/li&&li&启动一个项目所需的时间与项目大小相关。不愿意等的请用Sublime。某人说 IDE 的正确打开方式是上班启动之，下班关闭之。更有甚者说是入职启动之，辞职关闭之。你们感受一下。&br&&/li&&li&英语太差的就不要用 WS 了，喜欢花时间调教 VIM 各种插件的也没必要用 WS 了。&/li&&/ol&&/blockquote&所以我觉得，如果你机器的内存有 4G 以上，你每天花在写代码上的时间又很长，而且没有时间精力折腾 VIM 各种蛋疼的插件的话，一定要试试 WebStorm！&br&WebStorm 为前端而生，专门为 JS 开发做了很多优化，有许多令前端工程师眼前一亮的地方，我十分喜欢这款 IDE。下面讲下我觉得非常有用的几个功能（绝大部分是官方发行版本自带的功能）。&br&---&br&UPDATE: WebStorm 8 已经对我说的部分功能做了用户体验上的优化，所以具体细节可能和我说的有出入。&br&---&br&&b&1. 图片宽高提示。&/b&&br&&img src=&/c83a71eac733_b.jpg& data-rawwidth=&635& data-rawheight=&141& class=&origin_image zh-lightbox-thumb& width=&635& data-original=&/c83a71eac733_r.jpg&&平时你在写 HTML 时，遇到 img 标签时，是不是要费好大劲去知道图片的宽高？WS 直接展示给你了。&br&&b&2. 标签重构、文件重命名、 CSS 重构以及 JS 重构&/b&&br&2.1 标签重构&br&如果你想把&br&&div class=&highlight&&&pre&&code class=&language-text&&&div&此处省略200行&/div&
&/code&&/pre&&/div&改为&br&&div class=&highlight&&&pre&&code class=&language-text&&&p&此处省略200行&/p&
&/code&&/pre&&/div&要怎么办？在 WS 里，你只需将光标移到 &div& 或者 &/div&，让后按重构的快捷键就可以轻松地把它变为 p 标签。&br&&br&2.2 文件重命名&br&你想把 style1.css 重命名为 style2.css，但是 style1.css 被很多 html 文件引用了，怎么办？&br&使用 WS 的文件重命名功能，大胆地重命名吧，它会自动帮你更新所有引用。（前提是你的引用是正确且符合常规的） &br&&br&2.3 CSS 重构&br&另外，如果你想把内联的 style 移到外部 CSS 文件里，也是可是通过重构功能实现的。虽然在生产环境下你不会在 HTML 里写内联 style 的，但我们调试时为了方便，会经常这么做。等你调试完了，自然会用到这个功能。&br&&img src=&/91bf4b5cdd923f_b.jpg& data-rawwidth=&427& data-rawheight=&366& class=&origin_image zh-lightbox-thumb& width=&427& data-original=&/91bf4b5cdd923f_r.jpg&&（WS 8.0 以更新此功能，详见评论）&br&JS 重构也很好用。包括变量重命名、声明提升等等等等。WS 是我用过的对 JS 重构支持最好的 IDE。你可以告诉我还有什么 IDE 对 JS 重构支持不错，我去比较下。&br&&br&&br&&b&3. 对业界最新技术的支持&/b&&br&你安装 WS 后，你会发现它内置了对 SASS、NodeJS、CoffeeScript、Jade 的支持。&br&连 Emmet 都内置了，而且快捷键还是 Tab，太方便了。没有这个功能我都不想写 HTML 了。&br&如果它发现你的文件后缀是 .less/.scss/.sass 或者 .coffee，就会问你，是否需要把它们自动编译为 css 或 js。&br&如果它发现你有 NPM，会自动列出你安装过的 package，方便管理和升级。（这个貌似需要装 NodeJS 支持插件，我记不清是不是自带功能了。）&br&&br&&br&&b&4. 可自定义代码格式化规则&/b&&br&虽然很多 IDE 都有格式化功能，但能自定义到 WS 这种程度的还没见过。&br&&ul&&li&是否保留单行的 { }。&br&&/li&&li&是否保留单行的function。&br&&/li&&li&属性是否要对其。&br&&/li&&li&冒号前后是否加空格。&br&&/li&&li&……&br&&/li&&/ul&&img src=&/6d1f1bfa75bbad345ed5f87d_b.jpg& data-rawwidth=&1247& data-rawheight=&811& class=&origin_image zh-lightbox-thumb& width=&1247& data-original=&/6d1f1bfa75bbad345ed5f87d_r.jpg&&&br&&b&5. 设置项是可搜索的（英文）&/b&&br&「这个 IDE 有这么多设置项，我要折腾好久啊！」&br&WS 考虑到了这一点，所以他的所有设置都是可搜索的，不会让你漫无目的地摸索，你想设置什么就搜什么。&br&想设置外观，就搜 appearance；&br&想设置快捷键，就搜 keymap；&br&想设置插件就搜 plugin。&br&当你进入 keymap，你还可以进行二级搜索，比如你想知道 format 功能的快捷键，就直接搜 format。&br&你甚至可以反过来，搜 Ctrl + L 这个快捷键对应的功能是什么。&br&P.S. WS 的快捷键是支持二次按键的。比如我把 Git add 的快捷键设置为 Alt+G & Alt + A，把 Git commit 设置为 Alt+G & Alt+C。这样的好处是不会让你无快捷键可设。&br&&br&6. 再说说其他 IDE 也有的功能吧&br&6.1. 本地版本控制。你在 WS 里所有的编辑都被存在本地了，你随时可以还原到历史版本。&br&&img src=&/679f2c4dcbed3eb73871_b.jpg& data-rawwidth=&207& data-rawheight=&348& class=&content_image& width=&207&&不过要注意这些历史有可能被清除。&br&6.2. 能与番茄工作法结合。有个插件叫
Pomodoro-tm，应该有不少程序员喜欢。&br&6.3. 能与 Redmine / Trello / Jira 等集成。&br&&img src=&/f9c8c66f406a7b5ccaac906_b.jpg& data-rawwidth=&121& data-rawheight=&361& class=&content_image& width=&121&&6.4 文件结构分析。直接看图。&br&JS 文件结构&br&&img src=&/a952ce5e933cc_b.jpg& data-rawwidth=&292& data-rawheight=&298& class=&content_image& width=&292&&HTML 文件结构&br&&img src=&/f49156d43dce9b0a42cad7627622abdc_b.jpg& data-rawwidth=&290& data-rawheight=&333& class=&content_image& width=&290&&这个功能对于大文件特别有用。&br&&br&&br&好功能太多，有机会以后再介绍了。&br&&br&---------------------------------------------&br&回复评论：&br&&br&VIM / ST 党可能会说，你这些功能 VIM / ST 也能做到啊。嘿嘿，做不做得到先不谈，WS上面这些功能可都是内置的哦，无需任何配置，改改快捷键就能很称手了哟。现在如果要我用回 VIM / ST，我想得第一件事就是“把 VIM 改造成一个类似于 WebStorm 的 IDE 需要花多久时间呢？”&br&&br&1. 编辑器和 IDE 是不同的事物，如果你还认为 VIM / ST 比 IDE 好的话，你为什么不来比较一下吸尘器和自行车孰好孰劣呢？&br&&br&2. 我说 WS 好的时候，绝对没有说 VIM / ST 不好的意思。 VIM 和 ST 我都用过超过半年以上，都是不错的“编辑器”，比 WS 快多了。WS 能比它们快才是奇了怪了。&br&&br&3. 至于 Notepad++，也很不错，我大学时用过至少一年，不过在我习惯了 VIM 之后就把它抛弃了。所有不支持 VIM 模式的编辑器或 IDE 我应该都不会再喜欢了。这里有我回答的一个关于 Notepad++ 的一个问题： &a href=&/question/& class=&internal&&Notepad++ 有哪些适用于前端开发的插件？&/a&&br&&br&4. 我的路线大概是 Notepad++ =& ST2 =& VIM =& WebStorm、ST3、VIM 共存&br&&br&END
自问自答，多图杀猫。先说缺点吧：常驻内存300M左右，如果你的内存只有1G，请用Sublime/VIM。如果你内存有4G，我觉得你真不用在意这点内存，Chrome 占的内存比这多多了，你还不是用的很嗨？启动一个项目所需的时间与项目大小相关。不愿意等的请用Sublime。…
jetbrains出品，必是精品，建议搭配8G内存+SSD。缺点就是正版的好贵...
jetbrains出品，必是精品，建议搭配8G内存+SSD。缺点就是正版的好贵...
&ul&&li&自带的版本控制，这功能挽救了我好多次了。&br&&/li&&li&优秀的代码定位能力，能轻松将光标定位到变量/属性/方法的定义处，对阅读代码非常有用。&/li&&li&聪明的代码联想、格式化功能。&/li&&li&可定制的code template， 加强版的zen coding，而且不仅限于html和css。&br&&/li&&li&svn、git 等版本工具的支持，内置的 gist 非常方便。&/li&&li&nodejs 最好的开发工具，没有之一。只要你会用 chrome 调试浏览器器端的 js，那么你就会用 webstorm 调试 nodejs。&/li&&li&预处理语言的支持，使less、sass、cofeescript 等等语言的自动编译变得很简单。&/li&&li&最爽的一点，remote host和live edit的组合使用，让你直接编辑远程文件并实时刷新，一下省去了你这么多步骤：保存本地文件， 上传本地文件到远程服务器， 刷新浏览器。&br&&/li&&/ul&&br&功能太多了，只要慢慢调教，webstorm真的爽，我还写了几篇blog:巧：&br&&a href=&///?target=http%3A//annn.me/webstorm/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebStorm：令人眼前一亮的一款前端开发IDE&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//annn.me/webstorm-function-operating-guide/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebStorm功能特点以及使用指南&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//annn.me/webstorm8/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebStorm 8 新功能一览&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//annn.me/webstorm-phpstorm-remote-host/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&使用WebStorm/Phpstorm实现remote host远程开发&i class=&icon-external&&&/i&&/a&&br&&br&ps，blog 迁移到 github 以后，我现在已经直接用 webstorm 写 blog 了，写完md一个快捷键 push 到 github，好愉快……
自带的版本控制，这功能挽救了我好多次了。优秀的代码定位能力，能轻松将光标定位到变量/属性/方法的定义处，对阅读代码非常有用。聪明的代码联想、格式化功能。可定制的code template， 加强版的zen coding，而且不仅限于html和css。svn、git 等版本工具的…
其实webstorm本身已经集成很多前端相关的工具，用到插件的时候真心不多，不过也不乏好用的，下面是我用到得一些：&br&&br&Markdown——支持md，点击下面的Text/Previev可以切换代码/预览视图&br&&img src=&/30b1dddf2b6095fbcb6f81a1_b.jpg& data-rawwidth=&588& data-rawheight=&355& class=&origin_image zh-lightbox-thumb& width=&588& data-original=&/30b1dddf2b6095fbcb6f81a1_r.jpg&&&br&AngularJS——支持AngularJS的标签提示&br&&img src=&/aadd93fae6_b.jpg& data-rawwidth=&491& data-rawheight=&257& class=&origin_image zh-lightbox-thumb& width=&491& data-original=&/aadd93fae6_r.jpg&&&br&AceJump——快速定位光标位置，有了它你可以丢弃鼠标了&br&&img src=&/f6c07b30d9bcfbfc6b1e45c4ee0835ac_b.jpg& data-rawwidth=&585& data-rawheight=&463& class=&origin_image zh-lightbox-thumb& width=&585& data-original=&/f6c07b30d9bcfbfc6b1e45c4ee0835ac_r.jpg&&
其实webstorm本身已经集成很多前端相关的工具，用到插件的时候真心不多，不过也不乏好用的，下面是我用到得一些：Markdown——支持md，点击下面的Text/Previev可以切换代码/预览视图AngularJS——支持AngularJS的标签提示AceJump——快速定位光标位置，有了…
安装了markdown插件后，如何在新建文件的时候可以选择md
安装了markdown插件后，如何在新建文件的时候可以选择md