從零配置 Eslint + Prettier + husky + lint-staged 構建前端代碼工做流

寫在前面

最近入職了新公司，領導讓我修復項目中出現的bug，當我修復了bug提交代碼的時候發現並無提交上去並且還給我報了一堆的錯誤，因而我就發現了原來是在代碼commit的時候用eslint去檢查了代碼，仔細看了看package.json發現gitHooks 在代碼pre-commit(代碼提交前的鉤子)時期執行了lint-staged因而就去百度了husky能夠在commit 或者 push 的時候去檢驗代碼是否規範阻擋一些不合法的提交避免了不規範的代碼提交到倉庫裏而lint-staged只針對git工做區的代碼作linters這樣就避免了檢查整個倉庫的代碼。爲了詳細瞭解其中的配置我也是查了好多資料看了不少文檔，可是總感受別的文章講的不是很全面，特別是eslint配置那塊對像我這樣的新手小白來講比較難以理解，因此就有了這篇從零配置前端項目工做流的文章。

連接

參考文章

• 在Typescript項目中，如何優雅的使用ESLint和Prettier
• 深刻淺出eslint——關於我學習eslint的心得
• Eslint中文官網

準備工做

初始化項目

yarn init一路回車後建立好了package.json文件，接着git init初始化git倉庫,後面咱們要作代碼提交的校驗因此這裏提早安裝好方便後面的開發。

配置 .editorconfig

EditorConfig用於在基本代碼庫中維持一致的編碼風格和設置，例如縮進樣式、選項卡寬度、行尾字符以及編碼等。這裏能夠根據具體項目用什麼框架開發具體設置。

在vscode中搜索安裝EditorConfig插件,根目錄下新建 .edittorconfig文件寫入一些配置代碼。

// .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = false
複製代碼

配置 Eslint

關於 eslint

ESLint屬於一種QA工具，是一個ECMAScript/JavaScript語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。對eslint還不瞭解的同窗這裏提供了幾個學習的網站。

深刻淺出eslint——關於我學習eslint的心得

Eslint中文官網

在項目中安裝 eslint

yarn add -D eslint

在項目中安裝了eslint還不夠咱們想要的是在編輯器中也可以提示eslint的規則

在 vscode 中安裝 eslint 插件

vscode 直接搜索eslint，安裝插件後須要在settings.json中開啓。

// settings.json 中的部分配置

{
    "editor.formatOnSave": false, // 每次保存自動格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",  
    "window.zoomLevel": 0, // 原始縮放比例
    "editor.codeActionsOnSave": { // 在保存時用eslint規則進行修復
    "source.fixAll.eslint": false
    },
    "eslint.enable": true,  //是否開啓vscode的eslint
    "eslint.options": {    //指定vscode的eslint所處理的文件的後綴
      "extensions": [
          ".js",
          ".vue",
          ".ts",
          ".tsx"
      ]
    }
}
複製代碼

配置eslint規則

在根目錄下新建.eslintrc.js文件並配置一條規則。

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "rules": {
      "semi": ["error", "never"], // 禁止使用分號
    }
};
複製代碼

須要注意的是vscode下須要裝eslint插件纔能有相應的語法提示。

這時候咱們寫點示例代碼到倉庫中。

// src/a.js

const a = 'hello'; //這裏我有意了一個分號讓代碼不符合eslint的規則
複製代碼

接下來vscode給咱們把不符合eslint規範的錯誤拋出來了,值得一提的是eslint不只明確了哪一行並且連官網的連接也給出了點擊直接能夠打開這條報錯的規則。

讓Eslint識別Typescript

咱們已經可以讓eslint識別出js代碼了,可是這還遠遠不夠要知道不少庫已經在用ts,flow重構了，最近剛更新的vue3.0就是用ts寫的。可是有沒有必要在項目上使用ts仍是依實際狀況而定這裏咱們讓eslint去識別Typescript的代碼。

首先安裝依賴:

yarn add typescript

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

• @typescript-eslint/parser 是一個eslint的解析器,該解析器利用TypeScript ESTree容許ESLint整理TypeScript源代碼。
• @typescript-eslint/eslint-plugin 是eslint識別TypeScript規則的插件 咱們把他放入 extends 這個數組裏。

// eslintrc.js
module.exports = {
    "parser":  '@typescript-eslint/parser', 
    "extends": ['plugin:@typescript-eslint/recommended'],
    "plugins": ['@typescript-eslint'],
    "env": {
        "browser": true,
        "es6": true
    },
    "rules": {
      "semi": ["error", "never"], // 禁止使用分號
    }
};

複製代碼

如今eslint能夠識別Typescript的代碼了咱們嘗試寫點不規範的代碼。

// src/b.ts

const b = 'hello';
複製代碼

Eslint --fix

eslint不只能夠幫咱們提示代碼的錯誤還能夠自動幫咱們修復，在package.json中寫入eslint --ext .tsx,.ts,.js --fix ./src

"scripts": {
	"lint": "eslint --ext .tsx,.ts,.js --fix ./src"
}
複製代碼

運行 yarn lint 發現eslint自動幫咱們去掉了代碼塊結尾的分號，其實eslint只能fix掉部分規範具體看文檔的規則前面是否帶了一個小扳手，若是帶的話證實能夠修復。

Prettier 一個美化代碼風格神器

咱們已經可使用eslint去規範代碼，接下來咱們再使用prettier這個工具將代碼格式化爲統一的風格。

配置Prettier

根目錄下新建配置文件.prettierrc.js。

module.exports =  {
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "insertPragma": true,
  "tabWidth": 4,
  "useTabs": false  
};
複製代碼

安裝 Prettier 依賴

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier 用來關閉eslint和 prettier衝突的規則，咱們要將這個放置在extends的最後，這樣它就有機會覆蓋其餘配置。

• slint-plugin-prettier前面咱們關閉了eslint的規則，如今咱們開啓prettier的規則。

// eslintrc.js

module.exports = {
  "parser":  '@typescript-eslint/parser', //定義ESLint的解析器
  "extends": ['plugin:@typescript-eslint/recommended','plugin:prettier/recommended','prettier/@typescript-eslint'], //定義文件繼承的子規範
  "plugins": ['@typescript-eslint','prettier'], //定義了該eslint文件所依賴的插件
    "env": {
        "browser": true,
        "es6": true
    },
    "rules": {
      "prettier/prettier": 1, // eslint-plugin-prettier 使用prettier做爲eslint規則
      "semi": ["error", "never"] // 禁止使用分號
    }
};
複製代碼

最後新增一條prettier --write命令這是prettier cli格式化的語法。

// package.json

"scripts": {
	"lint": "eslint --ext .tsx,.ts,.js --fix ./src",
	 "fix": "prettier --write  ./src"
}
  
複製代碼

使用Prettier

運行 yarn fix 編輯器就能夠根據.prettierrc.js裏面的規範去美化代碼了。

目前咱們能夠經過 yarn fix 去美化代碼風格可是實際上每每會在提交前忘記yarn fix,有沒有什麼辦法能在git commit的時候去檢驗代碼而且修復不規範的代碼，若是沒法修復就阻止本次提交呢？顯然是有的。

husky + lint-staged 構建代碼工做流

husky 是一個 Git Hook 工具,它能夠在代碼提交前容許咱們作一些事情，從而防止一些很差的代碼被提交上去。 lint-staged 是針對工做區修改的文件,這對咱們只但願處理將要提交的文件將會很是有用。

安裝 husky lint-staged 依賴

yarn add -D husky lint-staged

注意 windows 用戶須要使用 npm 包管理器安裝否則 git hooks會失效

配置 husky & lint-staged

咱們須要在代碼提交前對代碼作一下格式化而且若是代碼不符合規範就不讓提交,簡單的作法就是在husky的pre-commit鉤子去運行 lint-staged,lintstaged主要就幹了三件事：

第一件就是調用eslint --fix 修復不合符eslint規範的代碼。

第二件prettier --write美化代碼格式。

最後若是都經過了就容許代碼commit。

// package.json 完整代碼

{
  "name": "lint4",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.29.0",
    "@typescript-eslint/parser": "^2.29.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^4.2.5",
    "lint-staged": "^10.1.7",
    "prettier": "^2.0.5"
  },
  "dependencies": {
    "typescript": "^3.8.3"
  },
  "scripts": {
    "lint": "eslint --ext .tsx,.ts,.js --fix ./src",
    "fix": "prettier --write  ./src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*{.ts,.js}":[
      "eslint --ext .tsx,.ts --fix ./src",
      "prettier --write",
      "git add"
    ]
  }
}
複製代碼

案例

寫點僞代碼.....

git add .
git commit -m 'test'
複製代碼

perfect！

總結

以上就是本次分享的所有內容，對於一箇中大型的項目來講規範代碼的質量尤其重要。

咱們已經學會了如何從零去配置一個項目的工做流，真實的場景多是須要在vue或者react以及其餘的框架中去配置husky、lint-staged、Typescripe等

簡單回顧下工做流比較重要的幾點：

• 經過Eslint去約束Javascript/Typescript
• Prettier 美化代碼，統一代碼風格
• 使用 husky + lint-staged 在commit前作檢查，避免存在不規範或者存在bug的代碼入倉庫

最後，感謝您閱讀這篇文章，有任何問題或反饋請給我留言。