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

哈哈，我也不知道答案