webpack---eslint-loader學習隨筆

第一步。在項目內安裝： npm i -D eslint eslint-loader 。

第二步。webpack的配置loader

 

 注意loader的順序，需先執行eslint-loader。

第三步。建立配置文件。 根目錄下建立.eslintrc文件，注意點不要漏了 

在react + babel + webpack 環境中使用 eslint。

首先 安裝： npm i -D eslint-plugin-react babel-eslint

eslint配置項：

 

 rules裏面能夠自定義規則。

一些報錯。

一、Parsing error: The keyword 'import' is reserved 。The keyword 'const' is reserved。。。

緣由：尚未在配置文件.eslintrc中配置parserOptions來指定語言版本爲和模塊類型。

指定ES版本ecmaVersion爲2017, 指定模塊類型sourceType爲module

對應爲：

"parserOptions": {

    "ecmaVersion": 2017,

    "sourceType": "module"

}

 

二、error Parsing error: Unexpected token = < .....

緣由： eslint還不能識別JSX語法

解決：安裝 npm i -D babel-eslint。.eslintrc添加："parser": "babel-eslint"。

 

三、 No ESLint configuration found in .......... 

意思找不到配置文件，建立.eslintrc文件。

 

學習時一些簡單的測試方法：

在項目的package.json的scripts。添加：

 運行：npm run test / npm run eslint。

第一個檢查錯誤，第二個修改錯誤。

全局安裝eslint能夠直接運行eslint + 文件。

 

使用別人已經寫好的代碼檢查規則，假如使用的是 Airbnb 公司的規則。配置：

 

 第一步安裝：npm i -D eslint-config-airbnb-base。

第二步查看庫的依賴。 npm info 'eslint-config-airbnb-base' Dependencies

第三步安裝依賴。