團(tuán)隊(duì)開(kāi)發(fā)的項(xiàng)目，如果沒(méi)有對(duì)代碼風(fēng)格作要求，有多少團(tuán)隊(duì)成員，就當(dāng)然會(huì)出現(xiàn)多少種不同的代碼風(fēng)格。因此，我們需要一種能夠統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格的工具，作為強(qiáng)制性的規(guī)范，統(tǒng)一整個(gè)項(xiàng)目的代碼風(fēng)格。

幸好，我們有 eslint 和 prettier 。

eslint VS prettier

應(yīng)該大多數(shù)項(xiàng)目都已經(jīng)采用eslint來(lái)對(duì)代碼進(jìn)行質(zhì)量檢查，可能少部分還會(huì)采用其進(jìn)行一定程度上的統(tǒng)一風(fēng)格。那為什么還需要prettier呢？我們先來(lái)對(duì)它們作一個(gè)簡(jiǎn)單的了解。

各種linters

總體來(lái)說(shuō)，linters有兩種能力：

1. 檢查代碼質(zhì)量 ，比如是否有已定義但未使用的變量，或者使用函數(shù)式編程的函數(shù)是否產(chǎn)生副作用等。
2. 檢查代碼風(fēng)格 ，比如每行的最大長(zhǎng)度，或者是否使用拖尾逗號(hào)等。

其中，eslint文檔中，帶扳手圖標(biāo)的規(guī)則就是eslint能夠自動(dòng)修復(fù)的規(guī)則。而不帶該圖標(biāo)的規(guī)則，eslint則只能給出錯(cuò)誤或警告，隨后由開(kāi)發(fā)者人工修復(fù)。

prettier

pretter沒(méi)有對(duì)代碼的質(zhì)量進(jìn)行檢查的能力，其只會(huì)對(duì)代碼風(fēng)格按照指定的規(guī)范進(jìn)行統(tǒng)一，避免一個(gè)項(xiàng)目中出現(xiàn)多種不同的代碼風(fēng)格。

項(xiàng)目配置

此處使用vue項(xiàng)目作為例子

一、首先配置eslint

如果大家的項(xiàng)目是使用vue cli生成的，并且選擇使用eslint的話，那么默認(rèn)在項(xiàng)目根目錄下就會(huì)生成.eslintrc.js。如果沒(méi)有，也可以在項(xiàng)目根目錄下創(chuàng)建該文件以及.eslintignore文件

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

npm install --save-dev eslint eslint-plugin-vue@next

// .eslintrc.js

extends: {
  'plugin:vue/strongly-recommended'
}

// .eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

如果希望在重新編譯的時(shí)候eslint自動(dòng)修復(fù)代碼，需要在webpack配置中加入eslint，并且設(shè)置 fix: true ，并且在devserver中開(kāi)啟eslint。

// config/index.js

module.exports = {
 dev: {
  useEslint: true, 
 }
}

// 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,
 }
})

二、配置prettier

由于使用eslint，并不能最大程度地統(tǒng)一代碼風(fēng)格，因此我們需要引入prettier。

npm install --save-dev prettier

按照實(shí)際需要配置prettier

//prettier.config.js

module.exports = { 
 "printWidth": 80, // 每行代碼長(zhǎng)度（默認(rèn)80）
 "tabWidth": 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格（默認(rèn)2）
 "useTabs": false, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
 "singleQuote": true, // 使用單引號(hào)（默認(rèn)false）
 "semi": true, // 聲明結(jié)尾使用分號(hào)(默認(rèn)true)
 "trailingComma": "all", // 多行使用拖尾逗號(hào)（默認(rèn)none）
 "bracketSpacing": true, // 對(duì)象字面量的大括號(hào)間使用空格（默認(rèn)true）
 "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認(rèn)false）
 "arrowParens": "avoid" // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號(hào)（默認(rèn)avoid）
};

需要在package.json里面配置調(diào)用prettier進(jìn)行格式化的命令

// package.json

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

至此，可以在命令行中輸入npm run format對(duì)代碼進(jìn)行格式化了。

配置husky和lint-staged

由于直接使用prettier進(jìn)行代碼格式化仍存在一些弊端，例如：

一次性對(duì)所有文件進(jìn)行格式化，如果是項(xiàng)目中途加入prettier，會(huì)對(duì)一些早已經(jīng)編寫(xiě)完成的代碼進(jìn)行格式化，可能會(huì)造成沖突或者一些不可預(yù)知的問(wèn)題，降低項(xiàng)目穩(wěn)定性。

每次都要鍵入npm run format進(jìn)行代碼格式化，多了額外的操作，開(kāi)發(fā)體驗(yàn)不良好。

故此，我們可以修改代碼格式化的時(shí)機(jī)，僅對(duì)本次提交的代碼進(jìn)行格式化，并且在代碼提交之前進(jìn)行格式化，確保存入倉(cāng)庫(kù)的代碼都是格式化后的良好的代碼。

husky是一款可以幫助我們使用git hooks的第三方庫(kù)，可以根據(jù)package.json文件里定義的鉤子和鉤子執(zhí)行的命令將要執(zhí)行的操作寫(xiě)對(duì)應(yīng)的鉤子腳本里。

lint-staged，官方說(shuō)明是一款可以對(duì)git提交的代碼使用linter的第三方庫(kù)，其依賴(lài)于husky使用git hooks。此處我們不僅僅可以利用其調(diào)用linters，還可以調(diào)用prettier對(duì)代碼進(jìn)行格式化。

npm install --save-dev lint-staged husky

// package.json

"scripts": {
  "precommit": "lint-staged" // precommit鉤子執(zhí)行l(wèi)int-staged
},
"lint-staged": {
  "src/**/*.{js,json,css,vue}": [
   "prettier --write", // 先執(zhí)行prettier，再執(zhí)行eslint，保證代碼質(zhì)量
   "eslint --fix",
   "git add"
  ]
},

同時(shí)使用eslint和prettier的配置

由于需要同時(shí)使用prettier和eslint，而prettier的一些規(guī)則和eslint的一些規(guī)則可能存在沖突，所以需要將eslint的一些可能與prettier發(fā)生沖突的代碼格式化規(guī)則關(guān)閉。這里使用eslint-plugin-prettier和eslint-config-prettier。

eslint-plugin-prettier可以將prettier的規(guī)則設(shè)置為eslint的規(guī)則，對(duì)不符合規(guī)則的進(jìn)行提示。（與eslint-plugin-vue相同）

eslint-config-prettier可以關(guān)閉eslint可能與prettier發(fā)生沖突的代碼格式化規(guī)則。官方稱(chēng)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"
  }
}

經(jīng)過(guò)上述配置，每次git commit的時(shí)候，都會(huì)先執(zhí)行prettier以及eslint對(duì)代碼進(jìn)行格式化和質(zhì)量檢查，確保代碼沒(méi)有問(wèn)題之后再提交

整體配置文件

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, // 每行代碼長(zhǎng)度（默認(rèn)80）
 "tabWidth": 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格（默認(rèn)2）
 "useTabs": false, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
 "singleQuote": true, // 使用單引號(hào)（默認(rèn)false）
 "semi": true, // 聲明結(jié)尾使用分號(hào)(默認(rèn)true)
 "trailingComma": "all", // 多行使用拖尾逗號(hào)（默認(rèn)none）
 "bracketSpacing": true, // 對(duì)象字面量的大括號(hào)間使用空格（默認(rèn)true）
 "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認(rèn)false）
 "arrowParens": "avoid" // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號(hào)（默認(rèn)avoid）
};

寫(xiě)在最后

一般IDE集成了eslint或者prettier工具的話，會(huì)默認(rèn)根據(jù)項(xiàng)目根目錄下相關(guān)配置文件進(jìn)行代碼檢查。

如果使用vscode，vetur的默認(rèn)代碼風(fēng)格化使用的就是prettier，會(huì)自動(dòng)檢索項(xiàng)目根目錄下的prettier配置文件進(jìn)行格式化。eslint檢索工具推薦使用eslint插件，安裝后也會(huì)自動(dòng)檢索eslint配置文件進(jìn)行代碼檢查，非常方便。

總結(jié)

以上所述是小編給大家介紹的Vue項(xiàng)目使用eslint + prettier規(guī)范代碼風(fēng)格，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論