eslint在项目中的使用

eslint在项目中的使用

eslint的优点：
* 灵活：任何规则都可以开启闭合，以及有些规则有些额外配置
* 很容易拓展和有需要可用插件
* 容易理解产出
* 包含了在其他检查器中不可用的规则，使得ESLint在错误检查上更有用
* 支持ES6，唯一支持JSX的工具
* 本身不支持ES7，但可以使用babel-eslint
* 支持自定义报告

sublime text3中使用eslint

1、先安装两个nodejs插件

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

2、在sublime里安装eslint插件

• 安装 SublimeLinter

• 调出package control搜索SublimeLinter进行安装

• 安装 SublimeLinter-contrib-eslint

• 调出package control搜索eslint安装即可，全名：SublimeLinter-contrib-eslint。注意：该插件只支持Sublime text 3

3、在项目根目录编写配置文件： .eslintrc

{
    "env": {
        "jquery": true,
        "node": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "ecmaFeatures": {
       "jsx": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "max-len": [1, 7, 2, {ignoreComments: true}],
        "semi": [2, "always"],
        "quotes": [2, "single"],
        "indent": ["error", "tab"],
        "comma-dangle": ["error", "never"],
        "no-console": ["error", { allow: ["log", "warn", "error"] }],
        "no-param-reassign": ["error", { "props": false }]
    }
}

* 参数说明：

(1) 环境(env)：设置你的脚本的目标运行环境，如browser，amd，es6，commonjs等，每种环境有预设的全局变量
(2) 继承(extends)：继承基础配置中的已启用的规则
(3) 规则(rules)：设定的规则及该规则对应的报错level
* 三个level：
* “off” or 0 - 关闭这个规则校验
* “warn” or 1 - 开启这个规则校验，但只是提醒，不会退出
* “error” or 2 - 开启这个规则校验，并退出

(4) 解析器(parser)：配置解析器(Specifying Parser)，需要本地npm模块， Espree(默认) Esprima Babel-ESLint(支持ES7)
(5) 语法(ecmaFeatures)：指定你想要支持的 JavaScript 语言选项，默认支持ECMAScript 5，可以设置启用对 ECMAScript 其它版本和 JSX 的支持
(6) 插件(plugins): 支持使用第三方插件，插件名称可以省略 eslint-plugin- 前缀

4、我们不想每次都指定这些规则，所幸已经有很多符合最佳实践的规则。其中之一就是Airbnb Style Guide，此外Airbnb还开源了他们自己的ESlint配置。
已经有一部分依赖包安装了，但还缺少一些：

 npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

• rule 查询地址 http://eslint.org/docs/rules/prefer-template
• eslint-plugin-react 查询地址：https://github.com/yannickcr/eslint-plugin-react

Webpack环境中使用ESLint

1、在webpack配置中使用eslint加载器了。

module: {
 loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }
  ]
},

也可以创建文件.eslintrc 并引入 webpack.config.js

devServer:{ 
        contentBase: './dist', 
        hot: true, 
        historyApiFallback: true 
}, 
eslint:{ 
    configFile: './.eslintrc' 
},
plugins: [

使用webpack的preLoaders

 module:{ 
    preLoaders:[ 
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: 'eslint-loader' 
        }, 
    ], 
    loaders:[ 
        { 
            test: /\.jsx?$/, 
            exclude: /node_modules/, 
            loader: 'react-hot!babel' 
        } 
    ] 
},

webpack3 的配置

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            enforce: 'pre',
            loader: 'eslint-loader'
        }
    ]
}