ESLint 的正式使用感受

介绍ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性

1. 所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
2. 任意的rule 都是独立的
3. 没有特定的coding style，你可以自己配置

 

安装

全局安装，适合你全部项目都需要eslint

$ npm install -g eslint

接下去安装配置文件

$ eslint --init

这个步骤会让你选择自己的风格

1、向你询问你的style

2、使用一些流行的style

3、通过你的文件来配置

 

基础配置

详细的配置查看http://eslint.org/docs/user-guide/configuring

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

https://github.com/roadhump/SublimeLinter-eslint

通过Package Control -> install Package -> SublimeLinter-eslint

WebStorm 

更多查看http://eslint.org/docs/user-guide/integrations

常见问题

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 就好了

3、怎样让webstorm 的错误提示更明显呢？

哈哈，我也不知道答案