eslint在項目中的使用

2023-04-03 11:40:58

eslint在項目中的使用

eslint的優點：

* 靈活：任何規則都可以開啟閉合，以及有些規則有些額外配置

* 很容易拓展和有需要可用插件

* 容易了解産出

* 包含了在其他檢查器中不可用的規則，使得ESLint在錯誤檢查上更有用

* 支援ES6，唯一支援JSX的工具

* 本身不支援ES7，但可以使用babel-eslint

* 支援自定義報告

sublime text3中使用eslint

1、先安裝兩個nodejs插件

npm install eslint -g
npm install babel-eslint -g

2、在sublime裡安裝eslint插件

安裝 SublimeLinter
調出package control搜尋SublimeLinter進行安裝
安裝 SublimeLinter-contrib-eslint
調出package control搜尋eslint安裝即可，全名：SublimeLinter-contrib-eslint。注意：該插件隻支援Sublime text 3

3、在項目根目錄編寫配置檔案： .eslintrc

{
    "env": {
        "jquery": true,
        "node": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "ecmaFeatures": {
       "jsx": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "max-len": [1, 7, 2, {ignoreComments: true}],
        "semi": [2, "always"],
        "quotes": [2, "single"],
        "indent": ["error", "tab"],
        "comma-dangle": ["error", "never"],
        "no-console": ["error", { allow: ["log", "warn", "error"] }],
        "no-param-reassign": ["error", { "props": false }]
    }
}

* 參數說明：

(1) 環境(env)：設定你的腳本的目标運作環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變量

(2) 繼承(extends)：繼承基礎配置中的已啟用的規則

(3) 規則(rules)：設定的規則及該規則對應的報錯level

* 三個level：

* “off” or 0 - 關閉這個規則校驗

* “warn” or 1 - 開啟這個規則校驗，但隻是提醒，不會退出

* “error” or 2 - 開啟這個規則校驗，并退出

(4) 解析器(parser)：配置解析器(Specifying Parser)，需要本地npm子產品， Espree(預設) Esprima Babel-ESLint(支援ES7)

(5) 文法(ecmaFeatures)：指定你想要支援的 JavaScript 語言選項，預設支援ECMAScript 5，可以設定啟用對 ECMAScript 其它版本和 JSX 的支援

(6) 插件(plugins): 支援使用第三方插件，插件名稱可以省略 eslint-plugin- 字首

4、我們不想每次都指定這些規則，所幸已經有很多符合最佳實踐的規則。其中之一就是Airbnb Style Guide，此外Airbnb還開源了他們自己的ESlint配置。

已經有一部分依賴包安裝了，但還缺少一些：

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

rule 查詢位址 http://eslint.org/docs/rules/prefer-template
eslint-plugin-react 查詢位址：https://github.com/yannickcr/eslint-plugin-react

Webpack環境中使用ESLint

1、在webpack配置中使用eslint加載器了。

module: {
 loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }
  ]
},

也可以建立檔案.eslintrc 并引入 webpack.config.js

devServer:{ 
        contentBase: './dist', 
        hot: true, 
        historyApiFallback: true 
}, 
eslint:{ 
    configFile: './.eslintrc' 
},
plugins: [

使用webpack的preLoaders

module:{ 
    preLoaders:[ 
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: 'eslint-loader' 
        }, 
    ], 
    loaders:[ 
        { 
            test: /\.jsx?$/, 
            exclude: /node_modules/, 
            loader: 'react-hot!babel' 
        } 
    ] 
},

webpack3 的配置

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            enforce: 'pre',
            loader: 'eslint-loader'
        }
    ]
}

eslint在項目中的使用