實例詳解Vue項目使用eslint + prettier規範代碼風格

團隊開發的項目，若是沒有對代碼風格做要求，有多少團隊成員，就固然會出現多少種不一樣的代碼風格。所以，咱們須要一種可以統一團隊代碼風格的工具，做爲強制性的規範，統一整個項目的代碼風格。

幸虧，咱們有 eslint 和 prettier 。

eslint VS prettier

應該大多數項目都已經採用eslint來對代碼進行質量檢查，可能少部分還會採用其進行必定程度上的統一風格。那爲何還須要prettier呢？咱們先來對它們做一個簡單的瞭解。

各類linters

整體來講，linters有兩種能力：

• 檢查代碼質量 ，好比是否有已定義但未使用的變量，或者使用函數式編程的函數是否產生反作用等。
• 檢查代碼風格 ，好比每行的最大長度，或者是否使用拖尾逗號等。

其中，eslint文檔中，帶扳手圖標的規則就是eslint可以自動修復的規則。而不帶該圖標的規則，eslint則只能給出錯誤或警告，隨後由開發者人工修復。

prettier

pretter沒有對代碼的質量進行檢查的能力，其只會對代碼風格按照指定的規範進行統一，避免一個項目中出現多種不一樣的代碼風格。

項目配置

此處使用vue項目做爲例子

1、首先配置eslint

若是你們的項目是使用vue cli生成的，而且選擇使用eslint的話，那麼默認在項目根目錄下就會生成.eslintrc.js。若是沒有，也能夠在項目根目錄下建立該文件以及.eslintignore文件

此處我使用eslint-plugin-vue，選擇的是vue/strongly-recommended規則。

npm install --save-dev eslint eslint-plugin-vue@next
 
// .eslintrc.js
 
extends: {
  'plugin:vue/strongly-recommended'
}//前端全棧交流學習：866109386
 //幫助1-3年前端人員，提高技術，思惟
// .eslintignore
 
/build/
/config/
/dist/
/*.js
/test/unit/coverage/

若是但願在從新編譯的時候eslint自動修復代碼，須要在webpack配置中加入eslint，而且設置 fix: true ，而且在devserver中開啓eslint。

// config/index.js
 
module.exports = {
 dev: {
  useEslint: true, 
 }//前端全棧交流學習圈：866109386
}//面向1-3年前端人員
 //幫助突破技術瓶頸，提高思惟能力
// webpack.base.conf.js
 
const createLintingRule = () => ({
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
  formatter: require('eslint-friendly-formatter'),
  emitWarning: !config.dev.showEslintErrorsInOverlay,
  fix: true,
 }
})

2、配置prettier

因爲使用eslint，並不能最大程度地統一代碼風格，所以咱們須要引入prettier。

npm install --save-dev prettier

按照實際須要配置prettier

//prettier.config.js

module.exports = { 
 "printWidth": 80, // 每行代碼長度（默認80）
 "tabWidth": 2, // 每一個tab至關於多少個空格（默認2）
 "useTabs": false, // 是否使用tab進行縮進（默認false）
 "singleQuote": true, // 使用單引號（默認false）
 "semi": true, // 聲明結尾使用分號(默認true)
 "trailingComma": "all", // 多行使用拖尾逗號（默認none）
 "bracketSpacing": true, // 對象字面量的大括號間使用空格（默認true）
 "jsxBracketSameLine": false, // 多行JSX中的>放置在最後一行的結尾，而不是另起一行（默認false）
 "arrowParens": "avoid" // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid）
};

須要在package.json裏面配置調用prettier進行格式化的命令

// package.json

"scripts": {
 "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
}

至此，能夠在命令行中輸入npm run format對代碼進行格式化了。

配置husky和lint-staged

因爲直接使用prettier進行代碼格式化仍存在一些弊端，例如：

一次性對全部文件進行格式化，若是是項目中途加入prettier，會對一些早已經編寫完成的代碼進行格式化，可能會形成衝突或者一些不可預知的問題，下降項目穩定性。 每次都要鍵入npm run format進行代碼格式化，多了額外的操做，開發體驗不良好。 故此，咱們能夠修改代碼格式化的時機，僅對本次提交的代碼進行格式化，而且在代碼提交以前進行格式化，確保存入倉庫的代碼都是格式化後的良好的代碼。

husky是一款能夠幫助咱們使用git hooks的第三方庫，能夠根據package.json文件裏定義的鉤子和鉤子執行的命令將要執行的操做寫對應的鉤子腳本里。

lint-staged，官方說明是一款能夠對git提交的代碼使用linter的第三方庫，其依賴於husky使用git hooks。此處咱們不只僅能夠利用其調用linters，還能夠調用prettier對代碼進行格式化。

npm install --save-dev lint-staged husky

// package.json

"scripts": {
  "precommit": "lint-staged" // precommit鉤子執行lint-staged
},
"lint-staged": {
  "src/**/*.{js,json,css,vue}": [
   "prettier --write", // 先執行prettier，再執行eslint，保證代碼質量
   "eslint --fix",
   "git add"
  ]
},

同時使用eslint和prettier的配置

因爲須要同時使用prettier和eslint，而prettier的一些規則和eslint的一些規則可能存在衝突，因此須要將eslint的一些可能與prettier發生衝突的代碼格式化規則關閉。這裏使用eslint-plugin-prettier和eslint-config-prettier。

eslint-plugin-prettier能夠將prettier的規則設置爲eslint的規則，對不符合規則的進行提示。（與eslint-plugin-vue相同）

eslint-config-prettier能夠關閉eslint可能與prettier發生衝突的代碼格式化規則。官方稱eslint-plugin-prettier須要與eslint-config-prettier搭配食用才能得到最佳效果。

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:prettier/recommended'
  ]
  rules: {
    "prettier/prettier": "error"
  }
}

通過上述配置，每次git commit的時候，都會先執行prettier以及eslint對代碼進行格式化和質量檢查，確保代碼沒有問題以後再提交

總體配置文件

npm install -D prettier husky lint-staged eslint-config-prettier eslint-plugin-prettier
 
// package.json
{
 "scripts": {
  "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
  "precommit": "lint-staged"
 },
 "lint-staged": {
  "src/**/*.{js,json,css,vue}": [
   "prettier --write",
   "eslint --fix",
   "git add"
  ]
 },
 "devDependencies": {
  "eslint": "^4.15.0",
  "eslint-config-prettier": "^2.9.0",
  "eslint-plugin-prettier": "^2.6.2",
  "eslint-plugin-vue": "^4.0.0",
  "husky": "^0.14.3",
  "lint-staged": "^7.2.0",
  "prettier": "^1.14.2",
 },
}
 
// eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
 extends: [
  'plugin:vue/strongly-recommended',
  'plugin:prettier/recommended'
 ],
 // add your custom rules here
 rules: {
  // ...other codes
  "prettier/prettier": "error"
 }
}
 
//prettier.config.js
module.exports = { 
 "printWidth": 80, // 每行代碼長度（默認80）
 "tabWidth": 2, // 每一個tab至關於多少個空格（默認2）
 "useTabs": false, // 是否使用tab進行縮進（默認false）
 "singleQuote": true, // 使用單引號（默認false）
 "semi": true, // 聲明結尾使用分號(默認true)
 "trailingComma": "all", // 多行使用拖尾逗號（默認none）
 "bracketSpacing": true, // 對象字面量的大括號間使用空格（默認true）
 "jsxBracketSameLine": false, // 多行JSX中的>放置在最後一行的結尾，而不是另起一行（默認false）
 "arrowParens": "avoid" // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid）
};

寫在最後

通常IDE集成了eslint或者prettier工具的話，會默認根據項目根目錄下相關配置文件進行代碼檢查。

若是使用vscode，vetur的默認代碼風格化使用的就是prettier，會自動檢索項目根目錄下的prettier配置文件進行格式化。eslint檢索工具推薦使用eslint插件，安裝後也會自動檢索eslint配置文件進行代碼檢查，很是方便。