webStorm的使用即常用快捷键

我也是最近做的一个有关node的项目，才开始接触到webstorm，因为他自带了开发环境，所以开发起来非常方便，简单；

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE，虽然他本身就有很多优势，但是想开发的更快，必须的掌握一些常用的快捷键；  现在分享一些关于我在新项目中使用的一些快捷键；

一.关于写代码的

1. 打开文件: Ctrl + Shift + N
2. 复制整行: Ctrl + D
3. 折叠当前块: Ctrl + “-”，折叠当前块以及子块: Ctrl + Alt + “-”，折叠全部块: Ctrl + Shift + “-”  //但是注意最好是不要使用折叠全部块: Ctrl + Shift + “-”，原因自己去实践体会
4. 打开文件: Ctrl + Shift + N
5. 打开类: Ctrl + N
6. 移动文件: F6, 并修改文件的引用位置, 包括 html 和 js文件
7. 抽取函数: Ctrl + Alt + M，整块代码抽取成函数，会自动根据就填写的函数名把代码转换成函数并调用 如下代码：

   $('.header-btn').click(function () {
           var that = this;
           $('.modle-login').show();
           $(".nav-tab").find("a").each(function (i) {
               $(this).removeClass('active-tab');
               if ($(this).data("type") == $(that).data("type")) {
                   $(this).addClass('active-tab');
               }
           });
           $(".login-modle").find('.form-type').each(function () {
               $(this).removeClass('active-wrap');
               if ($(this).data("type") == $(that).data("type")) {
                   $(this).addClass('active-wrap');
               }
           });
       });

   转变成

   function clickFunction() {
       $('.header-btn').click(function () {
           var that = this;
           $('.modle-login').show();
           $(".nav-tab").find("a").each(function (i) {
               $(this).removeClass('active-tab');
               if ($(this).data("type") == $(that).data("type")) {
                   $(this).addClass('active-tab');
               }
           });
           $(".login-modle").find('.form-type').each(function () {
               $(this).removeClass('active-wrap');
               if ($(this).data("type") == $(that).data("type")) {
                   $(this).addClass('active-wrap');
               }
           });
       });
   }
   clickFunction();

8. .抽取变量: Ctrl + Alt + V，当前选中抽取为变两  例如  $(".html_totalPage").text()  转变成  var allPage=$(".html_totalPage").text();
9. 移动整块代码: Ctrl + Shift + ↑↓
10. 包裹: Ctrl + Alt + T，外层包裹，比如 if、try catch等

二、关于设置

1. View -> Tool Windows -> npm，可以打开 npm 快捷窗口

   这里可以直接右键 update

   可以双击执行 npm 命令

2. ctrl+alt+s打开Settings界面，Editor > Colors&Fonts > Font。