sublime中配置使用eslint

之前一直使用jshint，只从用上了async、wait这些语法糖之后，发现jshint无法识别了，于是准备换eslint。

安装

npm install eslint -g
npm install babel-eslint -g

sublime插件安装

• 安装 SublimeLinter
• 安装 SublimeLinter-contrib-eslint

配置

在项目目录下新建.eslintrc文件

{
    "env": {        "browser": true,        "node": true,        "es6": true    },
        "browser": true,
        "node": true,
        "es6": true    }
    
    "parser": "babel-eslint",
    "ecmaFeatures": {       "jsx": true    },
       "jsx": true    }
    
    "rules": {        "semi": [2, "always"],        "quotes": [2, "single"]    }}
        "semi": [2, "always"],
        "quotes": [2, "single"]    }
    

你也可以执行eslint --init自行配置。

执行

代码执行的时候，因为这些语法糖目前都还未被支持，所以需要使用babel进行降级。

新建文件.babelrc写入以下内容

{
  "presets": ["es2015"],
  "plugins": ["syntax-async-functions","transform-regenerator", "transform-runtime"]}

新建文件package.json写入以下内容

{
    "babel-plugin-syntax-async-functions": "^6.1.4",
    "babel-plugin-transform-regenerator": "^6.1.4",
    "babel-plugin-transform-runtime": "^6.1.4",
    "babel-polyfill": "^6.1.4",
    "babel-preset-es2015": "^6.1.4",
    "request": "^2.65.0"}

执行npm i

测试

将下面代码存于项目中的一个文本文件中，暂且命名为test.es7

'use strict';

const async = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => resolve('end'), 2000);
	});
};

const test = async function() {
	let ret = await async();
	console.log(ret);
};

test();

执行babel-node test.es7。会在2秒后看到end的输出。正常的项目开发中，我们还需要借助gulp等工具作为开发和发布工具。这里只做eslint示例就不再介绍。

async与generator的区别在于，generator没有自动执行的功能，需要依赖co库才能执行，async有自动执行的功能，因此可以像普通函数一样执行。