點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)

回復(fù)加群，加入前端Q技術(shù)交流群

本篇文章講怎么在前端團(tuán)隊(duì)快速制定并落地代碼規(guī)范!!!
干貨，拿走這個(gè)倉(cāng)庫(kù)^[1]

一、背景

9月份換了一個(gè)新部門(mén)，部門(mén)成立時(shí)間不長(zhǎng)，當(dāng)時(shí)組內(nèi)還沒(méi)有統(tǒng)一的代碼規(guī)范（部分工程用了規(guī)范，部分沒(méi)有，沒(méi)有統(tǒng)一的收口）

小組的技術(shù)棧框架有Vue，React，Taro，Nuxt，用Typescript，算是比較雜了，結(jié)合到部門(mén)后續(xù)還可能擴(kuò)展其他技術(shù)棧，我們從0-1實(shí)現(xiàn)了一套通用的代碼規(guī)范

到現(xiàn)在小組內(nèi)也用起來(lái)幾個(gè)月了，整個(gè)過(guò)程還算是比較順利且快速，最近得空分享出來(lái)～

??本篇文章不會(huì)講基礎(chǔ)的具體的規(guī)范，而是從實(shí)踐經(jīng)驗(yàn)講怎么制定規(guī)范以及落地規(guī)范

二、為什么要代碼規(guī)范

就不說(shuō)了...大家懂的~

不是很了解的話(huà)，指路^[2]

三、確定規(guī)范范圍

首先，跟主管同步，團(tuán)隊(duì)需要一個(gè)統(tǒng)一的規(guī)范，相信主管也在等著人來(lái)做起來(lái)

第一步收集團(tuán)隊(duì)的技術(shù)棧情況，確定規(guī)范要包括的范圍

把規(guī)范梳理為三部分ESLint、StyleLint、CommitLint，結(jié)合團(tuán)隊(duì)實(shí)際情況分析如下

ESLint：團(tuán)隊(duì)統(tǒng)一用的TypeScript，框架用到了Vue、React、Taro、還有Nuxt
StyleLint：團(tuán)隊(duì)統(tǒng)一用的Less
CommitLint：git代碼提交規(guī)范

當(dāng)然，還需考慮團(tuán)隊(duì)后續(xù)可能會(huì)擴(kuò)展到的技術(shù)棧，以保證實(shí)現(xiàn)的時(shí)候確保可擴(kuò)展性

四、調(diào)研業(yè)內(nèi)實(shí)現(xiàn)方案

常見(jiàn)以下3種方案

團(tuán)隊(duì)制定文檔式代碼規(guī)范，成員都人為遵守這份規(guī)范來(lái)編寫(xiě)代碼
靠人來(lái)保證代碼規(guī)范存在不可靠，且需要人為review代碼不規(guī)范，效率低
直接使用業(yè)內(nèi)已有成熟規(guī)范，比如css使用StyleLint官方推薦規(guī)范stylelint-config-standard、stylelint-order，JavaScript使用ESLint推薦規(guī)范eslint:recommended等
a)?開(kāi)源規(guī)范往往不能滿(mǎn)足團(tuán)隊(duì)需求，可拓展性差; b)?業(yè)內(nèi)提供的規(guī)范都是獨(dú)立的（stylelint只提供css代碼規(guī)范，ESLint只提供JavaScript規(guī)范），是零散的，對(duì)于規(guī)范初始化或升級(jí)存在成本高、不可靠問(wèn)題（每個(gè)工程需要做人為操作多個(gè)步驟）
基于StyleLint、ESLint制定團(tuán)隊(duì)規(guī)范npm包，使用團(tuán)隊(duì)制定規(guī)范庫(kù)
a)?該方案解決可擴(kuò)展性差的問(wèn)題，但是第二點(diǎn)中的（b）問(wèn)題依舊存在

五、我們的技術(shù)方案

整體技術(shù)思路圖如下圖，提供三個(gè)基礎(chǔ)包@jd/stylelint-config-selling、@jd/eslint-config-selling、@jd/commitlint-config-selling分別滿(mǎn)足StyleLint、ESLint、CommitLint

@jd/stylelint-config-selling包括css、less、sass(團(tuán)隊(duì)暫未使用到)
@jd/eslint-config-selling包括Vue、React、Taro、Next、nuxt(團(tuán)隊(duì)暫未使用到)...，還包括后續(xù)可能會(huì)擴(kuò)展到需要自定義的ESLint插件或者解析器
@jd/commitlint-config-selling統(tǒng)一使用git

向上提供一個(gè)簡(jiǎn)單的命令行工具，交互式初始化init、或者更新update規(guī)范

幾個(gè)關(guān)鍵點(diǎn)

1、用lerna統(tǒng)一管理包

lerna^[3]是一個(gè)管理工具，用于管理包含多個(gè)軟件包（package）的 JavaScript項(xiàng)目，業(yè)內(nèi)已經(jīng)廣泛使用了，不了解的可以自己找資料看下
項(xiàng)目結(jié)構(gòu)如下圖

2、三個(gè)基礎(chǔ)包的依賴(lài)包都設(shè)置為生產(chǎn)依賴(lài)dependencies

如下圖，包@jd/eslint-config-selling的依賴(lài)包都寫(xiě)在了生產(chǎn)依賴(lài)，而不是開(kāi)發(fā)依賴(lài)
解釋下：開(kāi)發(fā)依賴(lài)&生產(chǎn)依賴(lài)

開(kāi)發(fā)依賴(lài)：業(yè)務(wù)工程用的時(shí)候不會(huì)下載開(kāi)發(fā)依賴(lài)中的包，業(yè)內(nèi)常見(jiàn)的規(guī)范如standard、airbnb都是寫(xiě)在開(kāi)發(fā)依賴(lài)

缺點(diǎn)：業(yè)務(wù)工程除了安裝@jd/eslint-config-selling外，需要自己去安裝前置依賴(lài)包，如eslint、根據(jù)自己選擇的框架安裝相關(guān)前置依賴(lài)包如使用的Vue需要安裝eslint-plugin-vue...使用成本、維護(hù)升級(jí)成本較高
優(yōu)點(diǎn)：按需安裝包，開(kāi)發(fā)時(shí)不會(huì)安裝多余的包（Lint相關(guān)的包在業(yè)務(wù)工程中都是開(kāi)發(fā)依賴(lài)，所以只會(huì)影響開(kāi)發(fā)時(shí)）

生產(chǎn)依賴(lài)：業(yè)務(wù)工程用的時(shí)候會(huì)下載這些包

優(yōu)點(diǎn)：安裝@jd/eslint-config-selling后，無(wú)需關(guān)注前置依賴(lài)包
缺點(diǎn)：開(kāi)發(fā)時(shí)會(huì)下載@jd/eslint-config-selling中所有寫(xiě)在生產(chǎn)依賴(lài)的包，即使有些用不到，比如你使用的是React，卻安裝了eslint-plugin-vue