webpack入門學習筆記08 —— 使用ESLint檢查項目代碼

1. 寫在前面

JavaScript做爲一門動態語言，靈活性是它的一個優勢，同時又是一個缺點。有的時候由於語法太過於靈活，致使一些隱藏的Bug被咱們忽略，代碼質量得不到保證。

爲了提到項目代碼的質量，大多數架構師在初始化項目的時候，都會使用一個檢查工具來幫助實現代碼的規範性和正確性，同時也能夠提升項目代碼後期的可維護性。在基於webpack的項目中，常常被使用到的代碼檢查工具是 ESLint 。

它就像是一個測試人員同樣，告訴你哪裏寫得不對（errors），哪裏寫得很差（warnings）。那麼在本篇博客中，就講解如何在本身的項目中，配置使用 ESLint 這一檢查工具。主要內容有：

• 安裝並配置 ESLint-loader
• 根據實際狀況，編寫ESLint的配置文件

2. 安裝並配置 ESLint-loader

ESLint 這一代碼檢查工具在項目中的使用體現是一個 loader ，既然是loader，那麼使用步驟和以前博客中講述的幾個loader同樣，首先是安裝，而後在webpack配置文件中，使用這些loader。

使用如下安裝命令，安裝 eslint 和 eslint-loader ：

yarn add eslint eslint-loader -D
複製代碼

安裝完成以後，在 webpack.config.js 文件中，配置使用該loader的規則，配置很是簡單，代碼以下：

module: {
    rules: [
        /** 其餘的配置規則，節省篇幅，故省略 **/ 
        {
            test: /\.js$/, 
            use: {
                loader: 'eslint-loader', 
                options: {
                    enforce: 'pre' 
                }
            },
            exclude: /node_modules/
        }
    ]
}
複製代碼

這裏將其餘的配置規則省略了，若是你想看其餘的配置規則，能夠查看個人 GitHub倉庫 - webpack-learning ,或者經過本文末尾的連接，跳轉到我以前的博客中進行查看。

這裏解釋一下上面代碼中標有註釋的兩個屬性： enforce 和 exclude ：

• enforce: 該屬性表示loader的種類，loader有四種：前置loader、後置loader、普通loader、內聯loader 。該屬性默認是 normal(即默認loader) 。能夠根據須要設置成 pre(前置loader) 或者 post(後置loader) 。

  屬性的而不一樣致使loader的一些行爲不一樣，前面博客中講過：在webpack.config.js配置文件中，loader的執行順序是 從右到左，從下到上 。可是：

  若是是前置loader，那麼webpack會 優先 使用該loader處理文件；

  若是是後置loader，那麼webpack會在普通loader 以後 處理文件；

  若是是內聯loader，能夠在 .js 文件中使用，而 不僅是 在webpack.config.js配置文件中使用。-

• exclude ：排除正則表達式匹配的文件或者文件夾，好比上述規則中，不使用eslint-loader對 node_modules 文件夾中的代碼進行校驗。

好了，如今配置完成以後，你是否是想立刻體驗一下ESLint的強大功能？若是這個時候你進行打包編譯項目，那麼會獲得一下錯誤信息：

錯誤提示易懂，是由於咱們沒有配置ESlint的處理規則，這也是咱們下面要講述的知識點。

3. 編寫ESLint的配置文件

若是你對ESLint很是熟悉，那麼徹底能夠本身動手編寫該配置文件，可是大多數人可能對ESLint的配置不是那麼熟悉，這裏推薦你們到 官網的Demo配置頁面 ,根據本身的需求，來獲取ESLint配置文件：

在該頁面，根據實際狀況選擇你的項目須要，而後點擊頁面底部的 Download .eslintrc.json file 便可下載獲得一份ESLint配置文件。

將這個文件重命名（在文件名以前加一個 點）獲得 .eslintrc.json 文件，而後將這個文件放到你的項目根目錄下，和 webpack.config.js 文件同級。

如此一來，便配置好了ESLint。這個時候再來打包編譯項目或者開啓本地開發服務器，就能夠看到ESLint發揮的做用了。好比，一個不規範的代碼可能會獲得如下錯誤提示：

4. 寫在後面

以上即是這篇博客的所有內容，若是想學習更多ESLInt的知識，推薦訪問ESLint的官網：cn.eslint.org/ 。

上一篇: webpack入門學習筆記07 —— 關於babel的一些補充

下一篇: webpack入門學習筆記09 —— 在項目中引入全局變量