webpack 配置react腳手架（三）：eslint 及優化

首先謹記 eslint的官網：  http://eslint.cn/

1 安裝eslint  npm i eslint -D 

2.在根目錄下新建文件 .eslintrc

{
    "extends":"standard"  //是一個json文件，整個項目的格式，標準格式
}

3.因爲是限制前端格式，因此在 client文件夾下新建文件 .eslintrc

{
    "parser":"babel-eslint",//默認用哪一種工具去解析 eslint代碼
    "env":{ //定義執行在哪些環境
        "browser":true,//告訴eslint 執行環境是包含 瀏覽器的，不然一些 window 等變量會報錯，認爲沒有定義過
        "es6":true,
        "node":true
    },
    "parserOptions":{
        "ecmaVersion":6, // 規定使用es6版本
        "sourceType":"module"//使用module方式
    },
    "extends":"airbnb",  //繼承哪一種格式，airbnb是react的一種很好的格式
    "rules":{    //自定義規則
        "semi":[0]， //不檢測 分號，若是爲false 則不容許寫
　　　　　"react/prefer-stateless-funciton":0
    }
}

4.每次在編譯代碼以前，都去檢查eslint：

//對於 js和jsx文件，使用eslint-loader進行編譯，而且要在 babel-loader前
//進行編譯 enforce:'pre',放在 webpack.config.client.js 和 webpack.config.server.js
{
    module:{
        rules:[
            {
                enforce: 'pre',
                test: /.(js|jsx)$/,
                loader: 'eslint-loader',
                exclude: [
                  path.resolve(__dirname, '../node_modules')
                ]
            }
        ]
    }
}

首先咱們要安裝下面的依賴 ： babel-eslint 、eslint-config-airbnb 、eslint-config-standard 、eslint-loader；

其中eslint-config-airbnb 在npm上能夠看到有不少其餘的依賴，此外 空格+/ 能夠換行：

npm i babel-eslint \
eslint-config-airbnb eslint-config-standard \
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-ally \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react \
eslint-plugin-standard -D

執行 npm run dev:cient 啓動本地服務，發現報警告：

wins下是 CRLF， mac和linux 下是 LF 行末

在根目錄新建文件 .editorconfig 文件：

root = true

[*]
charset = utf-8
indent_style = space //使用tab 表示空格
indent_size = 2   //
end_of_line = lf  //結尾使用lf
insert_final_newline = true //若是末尾麼有空行 自動加空行
trim_trailing_whitespace = true //一行結束了 末尾有空格 換行後 被刪除該空格

而後在編輯器中集成進去。

若是編譯後在控制檯報警了，可是又不想改動，能夠在出問題的代碼旁加註釋

import { AppContainer } from 'react-hot-loader'   //eslint-disable-line

2. 在git commit 的時候，檢測代碼是否符合 eslint：

安裝  npm i husky -D 

在 package.json 中：

{
    "scripts": {
        "lint": "eslint --ext .jsx --ext .js client/",
　　　　 "precommit":"npm run lint",   //則每次commit 代碼時 會執行這裏鉤子，若是正確纔會提交
    }
}

PS：網站左上角的小圖標設置：

安裝npm

npm i serve-favicon -D

server.js

const favicon = require('serve-favicon')
app.use(favicon(path.join(__dirname, '../favicon.ico')))

 4. 每次修改sever.js 以後都要 重啓服務： npm run dev:server

使用該插件，解決每次重啓問題： npm i nodemon -D 

//nodemon.json 文件

{
    "restartable":"rs",//使用了配置文件
    "ignore":[ //配置修改下面的代碼，不須要從新啓動服務
        ".git",
        "node_modules/**/node_modules",//mode_modules 包含該文件夾下包含的 node_modules
        ".eslintrc",
        "client",
        "build"
    ],
    "env":{
        "NODE_ENV":"development",
    },
    "verbose":true, //輸出的報錯信息要詳細
    "ext":"js" //配置包含哪些文件修改要重啓

}

對應的命令行：

{
    "script":{
        "dev:server":"nodemon server/server.js"
    }
}

上述 Eslint 方法太麻煩，推薦使用 vscode的 ESLint插件。會根據eslintrc配置文件作檢查;

或者cllient端，使用的 webpack-dev-server配置：

 1 安裝eslint。

 2 設置 eslintrc文件 

 3 新增eslint-loader 

{
    rules:[{
        test:/\.js$/,
        exclude:/node_modules/,
        use:['babel-loader','eslint-loader']//從右向左執行 先執行 eslint
    }]
}

 

 4 修改devServer 配置

devServer:{
  overlay:true  
}

 在瀏覽器中出現彈層