Fork me on GitHub

es6+eslint配置

项目初始化。

1
2
3
$ mkdir test
$ cd test
$ npm init 自动创建一个项目,生成package.json文件。

babel

新建配置文件.babelrc,

1
2
3
4
5
6
7
8
9
{
"presets": [
"es2015-loose",
"stage-1"
],
"plugins": [
"transform-runtime"
]
}

安装所需模块

1
$ npm install --save-dev babel-preset-es2015-loose
1
2
3
4
5
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

安装babel-register,就可以改写require命令,新建babel.js,写入:

1
2
require('babel-register');
module.exports = require('./server.js');

安装所需模块

1
$ npm install --save-dev babel-register

这样后面的文件就可以用import 代替require,import的优点在于可以引入所需方法或者变量,而不需要加载整个模块,提高了性能。

transform-runtime可以启用相应的es6语法插件。

1
npm install babel-plugin-transform-runtime

启动app使用命令:

1
$ node babel

全局安装babel-cli,可以使用命令编译某个文件:

1
2
$ npm install -g babel-cli
$ babel-node xx/xx.js

eslint

不得不说,eslint+atom简直是开发利器,command+s保存就可以检查代码并自动改正部分不规范代码。提高了开发效率。
根目录下新建一个.eslintrc配置文件,写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"env": {
"node": true,
"es6": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"semi": 2,
"max-len": [1, 150, 2],
"arrow-body-style": [1, "as-needed"],
"comma-dangle": [2, "never"],
"object-curly-spacing": 0,
"no-console": 1,
"no-param-reassign": [1, { "props": false }],
"consistent-return": 1
},
"extends": "airbnb/base"
}

安装eslint插件用于静态检查代码的语法和风格,

1
$ npm install --save-dev eslint babel-eslint

更具编辑器提示自行安装报错信息提示的一些缺失模块。

注:

指定解析器parser是babel-eslint。
rules写的是自定义eslint规则,具体参考官方文档。
另外还需要指定环境,这里的环境env是node和es6,指定为true。
.eslintrc格式可以有多种,分别为javascript格式:.eslintrc.js
YAML格式:.eslintrc.yml(建议)
JSON格式:.eslintrc.json(建议)
.eslintrc,可以使json也可以是yaml
也可以在package.json里面用eslintConfig配置。
还可以添加扩展extends,比如添加自己喜爱的airbnb/base代码规范,这样rules里面的配置将覆盖扩展里面的父规则。
创建.eslintignore可以忽略指定文件的代码检查。
我们在使用 Git 进行版本控制的时候,有些文件是无需纳入 Git 管理的,通常都是些自动 生成的文件,像日志或者编译过程中创建的文件。我们可以创建一个名为 .gitignore 的文件,列出要忽略的文件来解决这个问题。

至此,一个简单的es6+eslint的环境就搭出来了。

-------------本文结束感谢您的阅读-------------
如果您觉得受益了,欢迎打赏鼓励。