ESLint

ESLint 是一个代码规范和错误检查工具,有以下几个特性
  1. 所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
  2. 任意的rule 都是独立的
  3. 没有特定的coding style,你可以自己配置

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下,ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置,以启用对 ECMAScript 其它版本和 JSX 的支持。

请注意,对 JSX 语法的支持不用于对 React 的支持。React 使用了一些特定的 ESLint 无法识别的 JSX 语法。如果你正在使用 React 并且想要 React 语义支持,推荐你使用 eslint-plugin-react

同样的,支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型(比如 Set 等新类型)。使用 { "parserOptions": { "ecmaVersion": 6 } } 来启用 ES6 语法支持;要额外支持新的 ES6 全局变量,使用 { "env":{ "es6": true } }(这个设置会同时自动启用 ES6 语法支持)。详情可查看:http://eslint.cn/docs/user-guide/configuring

安装
全局安装,适合你全部项目都需要eslint
$ npm install -g eslint
接下去安装配置文件
$ eslint --init
这个步骤会让你选择自己的风格
1、向你询问你的style
2、使用一些流行的style

3、通过你的文件来配置

基础配置
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended”,//可以选择一些流行的style 比如google
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "ecmaVersion": 7, 你的javascript 版本
        "sourceType": "module"
    },
    "plugins": [
        “react” //插件,支持react
    ],
    "rules": {
        "indent": [ //缩进
            "error”, //可选项为 off warn error 对应的数字 0 1 2
            "space"
        ],
        "linebreak-style": [//换行的style
            "error",
            "unix"
        ],
        "quotes": [//引号 是单的还是双的
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};
IDE的 插件
Sublime Text3
通过Package Control -> install Package -> SublimeLinter-eslint
WebStorm 

常见问题
1、在sublime text 中jsx 不能使用linter。
     view->syntax->open all current extension as … -> javascript
2、在webstorm 提示

提示
Cannot find module 'babel-eslint'
Error: Cannot find module 'babel-eslint'
我猜测是有些rule的包 在全局变量中没有安装。所以报的错误
用当前项目的eslint 就好了

原文地址:https://www.cnblogs.com/gwf93/p/10295126.html