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、通過你的文件來配置
 
基礎配置
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 就好了

 

3、怎樣讓webstorm 的錯誤提示更明顯呢?
哈哈,我也不知道答案 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM