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 的錯誤提示更明顯呢？

哈哈，我也不知道答案