ESLint 的正式使用感觉

 

介绍ESLint

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

1. 全部东西都是能够插拔的。你能够调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
2. 任意的rule 都是独立的
3. 没有特定的coding style，你能够本身配置

 

安装

全局安装，适合你所有项目都须要eslint

$ npm install -g eslint

接下去安装配置文件

$ eslint --init

这个步骤会让你选择本身的风格

一、向你询问你的style

二、使用一些流行的style

三、经过你的文件来配置

 

基础配置

详细的配置查看 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

常见问题

一、在sublime text 中jsx 不能使用linter。

     view->syntax->open all current extension as … -> javascript

二、在webstorm 提示

 

提示

Cannot find module 'babel-eslint'

Error: Cannot find module 'babel-eslint'

我猜想是有些rule的包 在全局变量中没有安装。因此报的错误

用当前项目的eslint 就行了

 

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

哈哈，我也不知道答案