前端工程化(webpack-eslint)

前面講了，wepack一些相關的知識，這裏集成一下eslint的相關配置。
首先安裝對應模塊：

• 安裝eslint模塊
• 安裝eslint-loader模塊
• 初始化 .eslintrc.js文件配置

安裝完成後先初始化配置：
yarn eslint --init
而後回答一些問題：
1.咱們選擇檢查語法，發現問題，執行統一代碼風格
2.模塊化這裏咱們使用javascript modules（es6語法）
3.咱們目前假設說配置的是個react項目，選react
4.咱們這裏使用ts，選yes（使用ts的時候要先把ts安裝下來，否則後續操做會報錯）
5.最終我專門這個工程運行時瀏覽器Browser
6.咱們使用市面上主流風格 選擇了第一個 （使用了開源社區的規範Standard: https://github.com/standard/s...）
7.配置文件使用了js格式
8.最後自動安裝一些其餘的包
最後配置文件js

若是有一些全局要用的東西能夠添加,例如jQuery
globals:{

"jQuery":"readonly"

}

eslint配置註釋
http://eslint.cn/docs/user-gu...

webpack 中loader配置

而後就是eslint結合git hooks鉤子在提交以前檢測代碼
使用husky
首先進行安裝

npm install husky --save-dev

而後對應package.json配置

husky屬性配置 pre-commit 這個git鉤子階段，來進行咱們的npm run test來進行檢查
而後 npm scripts裏對應添加test命令,

test: "eslint --ext .js,.vue src/"

咱們檢測src目錄下的全部文件.

咱們能夠手動在添加一個修復命令用來手動執行

test:"eslint --fix --ext .js,.vue src/"

也能夠git commit時自動格式化而後再add回來：
首先安裝

npm install -D lint-staged

而後配置package.json,
經過procommit調起lint-staged

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": ["eslint --fix" , "git add"]
  },
  "husky":{
    "hooks":{
        "pre-commit":"npm run precommit"
    }
  }
}

這樣就能在commit以前，先用eslint修復在git add了。

若是想和Prettier配合起來一塊兒使用的話請參考以下：
Prettier介紹與基本用法