说起编译工具，其实在刚开始做前端的时候，我还是稍微的对比了一下当今主流的几个编译软件的。webstorm、vscode、sublime、atom。最后我还是选择使用了webstorm，考虑到大家在刚学习前端的时候都会在编译器上面考虑很久，就像几个月之前的我一样，考虑来考虑去，时间过去了，技术却没有提高。鉴于我有这样的经历，我将从webstorm、sublime、atom三个主流的软件说起，分别介绍其安装方法、优劣势、以及我在写前端的时候一些小技巧与大家分享（其中的部分技巧是在别人的项目/文章中总结得来）。由于本文档是结合项目做的一些总结，如果存在疑虑，请在留言区域留下您宝贵的意见和建议。

一、 sublime

首先来说一下 sublime ，首先为什么要选择这个东西呢？是我大学室友重点推荐的，另外我的启蒙书籍强烈的推荐。外加上我自己也觉得操控这个软件会让人感觉自己很高端，当然最最重要的是没换电脑之前电脑的配置不太够，强行运行其他软件会让我那台老爷机喘不过气来😊。   不扯了，直接开始安装吧。 #####1.下载安装： 点击 sublime 官网

#####2. 安装Package Control：如图所示，点击ctrl+～，然后复制下面一串代码：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
复制代码

3. command(ctrl)+shift+p选择 install Package Control,最后根据需要挑选自己想要的插件，讲道理这里的插件还是挺全的。

#####3. 输入<html，就出现html模版了。

#####4. 注意如果你的电脑配置比较低，我还是建议你使用这个插件或者使用vscode，这两个对电脑的配置要求不高。并且里面的插件比较丰富，基本都能满足每一个前端开发人员的需求。

二、 atom

关于 atom 呢，这个得追溯到我当初学markdown得时候。当初在学markdown的时候，当时的老大给我推荐的就是这款编译器，这个编译器在外观，包括编译的感觉上面完全符合我这种颜值狗的首选。但是当时只是把这个编译器当作一个markdown的工具而已。直到去年很多前端的语言推荐这款产品，我才真正探究这款编译器。说实话，要不是我现在使用webstrom习惯了，这个编译器将会是我编译前端的首选。 #####1、 安装

#####2、安装插件：打开File(windows)->Settings->Install，然后在里面搜索vue，然后就会出现插件然后直接install就行了,另外我还自己安装了许多样式效果，能在开发之余带来一点乐趣

#####3、atom这款插件。功能强大，样式很好看、如果我不是提前就接触过idea类的产品的话。这个将会是我的首选。但是前面也说了，我现在正在同时开发Android和前端。为了减少编译器的耦合性，就还是选择了webstrom，但是我个人还是特别推荐这款编译器的。毕竟是github出品的。

三、 webstrom

最后谈一谈 webstrom ，为什么我要使用webstrom呢？看标题也知道，我以前是做Android的。而Android开发有一款工具叫Android studio。而webstrom正是和Android studio一个系列的。甚至我以前开发的一些习惯都可以直接搬到这个上面来。这也是我抛弃可以装逼的webstrom和颜值超高的atom的原因。外加上我现在同时在开发Android，前端项目。自己又没有能力达到一心两用，所以尽量减少编写代码的一些差异性，有利于自己快速的容易各个领域。 #####1、安装 打开 官网

然后打开文件之后按照自己的电脑配置一路next就可以安装了。 #####2、注册 在激活的时候选择 license server； 输入此地址激活： idea.imsxm.com #####3、选择es6语法：

四、 关于在开发前端的技巧

其实编译器只是你写代码的一个辅助工具罢了，不必为了选择而去选择，如果你对一个语言足够熟悉的话，甚至用vim、nodepad++等工具都能进行编译的。学习一门语言，基础是底蕴，技巧是捷径，今天我就从js的一些技巧讲起，结合自己的所见、所想，向大家总结我的一些写作心得。

• if ...else简写

  • 普通写法

    if (window.navigator.userAgent.indexOf('AlipayDefined') >=0) {
       type = '阿里支付'
    } else {
       type = '其他支付'
    }
    复制代码

  • 简写：

     type = window.navigator.userAgent.indexOf('AlipayDefined') >= 0 ? "阿里支付" : "其他支付"
    复制代码

• 条件过多：多个if...else...else if

  • 普通写法

    if (type === 1) {
      // 阿里支付
    } else if (type === 2) {
      // 微信支付
    } else if (type === 3) {
       // 百度支付
    }else {
      //其他支付
    复制代码

    }

  • 简写：

    switch (type) {
      case 1:
        // 阿里支付
        break;
      case 2:
        // 微信支付
        break;
      case 3:
        // 百度支付
        break;
      default:
        // 其他支付
        break;
    }
    复制代码

• #####缩短求值简写: 有时候在使用某些变量的时候，总是要考虑到该变量是否是空，是否未定义等等：

  • 普通写法

       let data = this.tabledata
       if (data !== null && data !== undefined && data !== "") {
         // dosomething
       }
    复制代码

  • 简写：

    const data = this.tabledata  || 'new';
    复制代码

• #####判断if里面为真：但是这里会有点坑

  • 普通写法

    if (data !== true) {
       // dosomething
    }
    复制代码

  • 简写：

    // 但是如果data的值是1的时候依然会运行里面的，这是我在开发的时候遇到的bug
    if (data) {
      // dosomething
    }
    if (!data) {
      // dosomething
    }
    复制代码

• #####变量的赋值：

  • 普通写法

    var x =0;
    var y=1;
    复制代码

  • 简写：

    var x=0,y=1;
    复制代码

• #####循环：

  • 普通写法

    for (var i = 0; i < datas.length; i++)
    复制代码

  • 简写：

    for (var index of datas)
    复制代码

• 缩短求值

  • 普通写法

    let host;
    if (process.env.DB_HOST) {
      host = process.env.DB_HOST;
    } else {
      host = '0.0.0.0';
    }
    复制代码

  • 简写

    const dbHost = process.env.DB_HOST || '0.0.0.0';
    复制代码

• 方法改成箭头函数

  • 普通写法

    setTimeout(function () {
      console.log("timeout===>>>")
    },1000)
    list.forEach(function (item) {
      console.log(item);
    })
    // vue
    test: function () {
    }
    function calcCircumference(diameter) {
      return Math.PI * diameter
    }
    复制代码

  • 简写

    setTimeout(() => {
      console.log("time out=>>")
    }, 1000)
    list.forEach( item => {
      console.log(item)
    })
    // vue
    test () {
    }
    calcCircumference = diameter => (
        Math.PI * diameter;
    }
    复制代码

• find方法

  • 普通写法

    const peoples = [
      { type:"student", name: "xiaohong"},
      { type:"teacher", name: "laojiang"},
      { type: "assitant", name: "xiaozhang"}
    ]
    function findStu(name) {
      for(let i=0;i<peoples.length;i++) {
        if (peoples[i].type === "student" && peoples[i].name === name) {
          return peoples[i];
        }
      }
    }
    复制代码

  • 简写

    let people = peoples.find(people=>people.type === "student" && people.name === name)
    复制代码