我的博客地址

正式地址
測試地址
前端源碼
后端源碼

文章目錄

1. 項(xiàng)目及其技術(shù)棧介紹
2. 前端: 項(xiàng)目初始化
3. 前端: 使用Sass和Antd
4. 前端: 開發(fā)體驗(yàn)優(yōu)化
5. 前端: 搭建路由和狀態(tài)管理
6. 前端: 支持Axios
7. 前端: 打包與環(huán)境變量設(shè)置
8. 前端: 團(tuán)隊(duì)代碼規(guī)范
9. 后端: 項(xiàng)目初始化和使用Koa相關(guān)
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端項(xiàng)目
12. 部署: 后端部署
13. 部署: 使用jenkins自動(dòng)化部署

前言

在前面多篇文章中，我們介紹了前端部分react + typescript項(xiàng)目模板的搭建，但是在現(xiàn)實(shí)的工作場景中，通常都是多人參與到一個(gè)項(xiàng)目的開發(fā)，這時(shí)候就需要對團(tuán)隊(duì)的代碼及其格式和提交信息等做出一定的限制，本章將會介紹多個(gè)限制團(tuán)隊(duì)代碼的工具及其配置。

1. eslint結(jié)合prettier規(guī)范代碼并格式化
2. stylelint規(guī)范sass文件
3. 使用husky做pre-commit
4. commitlint規(guī)范git提交信息

eslint結(jié)合prettier規(guī)范代碼并格式化

• eslint
  eslint是常見的代碼格式規(guī)范工具，擁有諸多的限制項(xiàng)，包含是否允許使用var等，對于TypeScript兼容性也非常好，由于之前tslint已經(jīng)不再維護(hù)，所以我們選擇eslint作為代碼格式規(guī)范工具

• prettier
  prettier是一款用于格式化代碼的工具，可以和eslint結(jié)合的非常好，做到保存文件時(shí)自動(dòng)格式化代碼

• 支持eslint和prettier

  1. 首先需要在編輯器中安裝eslint和prettier插件，我使用的是vscode，已經(jīng)安裝了這兩個(gè)插件:

     
     
     image.png

  2. 然后在項(xiàng)目中安裝相關(guān)包，包的內(nèi)容包含eslint、prettier、esling-typescript插件以及eslint-prettier插件等，另外我們使用被人已經(jīng)寫好的react、typescript和prettier配置即可，嫌麻煩的同學(xué)可以直接復(fù)制下面的安裝代碼:
     npm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

  3. 在根目錄下新建.eslintrc.js文件，并在內(nèi)部導(dǎo)出相關(guān)配置，以下是我的配置:
     

     image.png
     
     另外我也把配置代碼放在下面方便大家直接復(fù)制去用，當(dāng)然有另外的需要可以自行在rules中配置:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        'prefer-const': 2,
        'no-var': 2,
        'no-multiple-empty-lines': 2,
        'react/prop-types': 0,
        'react/display-name': 0,
        'lines-between-class-members': ['error', 'always'],
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/interface-name-prefix': 'off',
        '@typescript-eslint/explicit-member-accessibility': 'off',
        '@typescript-eslint/no-empty-interface': 'off'
    },
    settings: {
        react: {
            version: 'detect',
        },
    },
    env: {
        'browser': true
    }
}

4. 之后我們繼續(xù)在根目錄添加.prettierrc.js文件，用作該項(xiàng)目的prettierrc格式化配置，下面是我的配置，無非也就一些是否需要分號，tab幾個(gè)空格等的配置:
   

   image.png

5. 注意在這里可能會產(chǎn)生一個(gè)問題，上面的.prettier.js和.eslintrc.js配置中，module出現(xiàn)了一個(gè)警告:
   

   image.png
   
   造成這個(gè)價(jià)警告的原因未知，不過我們可以在在根目錄新建.eslintignore，在該文件里面把eslintrc.js和.prettierrc.js文件添加為檢測對象即可，另外還需要記得把src文件夾中的.d.ts文件設(shè)為忽略項(xiàng)，否則css-modules-typescript-loader生成的index.scss.d.ts將會報(bào)一大堆錯(cuò)誤，而這些文件無需進(jìn)行檢測:
   
   image.png

6. 測試結(jié)果
   我們隨便一個(gè)文件中，使用var聲明一個(gè)變量，可以看到是eslint報(bào)的錯(cuò)誤，說明eslint配置成功了:
   

   image.png
   
   然后我們保存文件后如果var自動(dòng)變成了const，則表明prettier配置成功，并且和eslint配合的很好:
   
   image.png

stylelint規(guī)范sass文件

stylelint作為一款限制樣式文件編寫規(guī)范的工具，無疑是非常出色的，它不止支持sass，也同時(shí)支持less和stylus這些文件的代碼格式檢測，在本例中，我們就使用stylelint對sass代碼格式進(jìn)行檢測。要使用stylelint需要在vscode中安裝同名插件:

image.png

• 安裝stylelint
  由于我個(gè)人不愛寫這些lint工具的檢測規(guī)則，所以使用的是推薦配置stylelint-config-standard，另外如果要支持sass樣式代碼檢測，需要安裝stylelint-scss，所以安裝命令如下:
  npm i -D stylelint stylelint-config-standard stylelint-scss

• 支持針對sass代碼的檢測
  接著我們?nèi)サ礁夸浿?，新?code>.stylelintrc.js文件，并寫入自己的配置，以下是我的配置:
  

  image.png
  
  如果module報(bào)警告，別忘記去.eslintignore將這個(gè)文件添加進(jìn)去:
  
  image.png

• 結(jié)果檢測:
  在我的配置中，縮進(jìn)被限制為4個(gè)空格，我們?nèi)サ揭粋€(gè).scss文件中，寫一個(gè)兩個(gè)空格縮進(jìn)的樣式看看:
  

  image.png
  
  可以發(fā)現(xiàn)是stylelint報(bào)的錯(cuò)誤:
  
  image.png
  
  另外stylelint也支持和prettier相結(jié)合的，所以我們直接保存代碼，就能格式化為符合stylelint規(guī)范的代碼了:
  
  image.png

使用husky做pre-commit

雖然我們做了react組件和sass樣式代碼的檢測，但是人的自覺性總是很差的，所以我們需要進(jìn)行一些限制，在代碼commit之前如果沒有修改到符合各種lint規(guī)范的情況下，就不讓他commit代碼，這樣就能保證提交上來的代碼總是符合規(guī)范的。

• 這一步我們先添加一個(gè)命令到package.json中去，用作代碼格式檢測(eslint和stylelint都支持命令行對文件進(jìn)行檢測，具體請查看文檔):
  

  image.png
  
  之后測試一下這條命令是否生效:
  
  image.png
  
  可見這條命令已經(jīng)生效，并且他會列出出錯(cuò)文件的路徑和出錯(cuò)類型。接下來需要做的就是在開發(fā)人員commit之后首先執(zhí)行這條命令，如果有報(bào)錯(cuò)就不讓他commit代碼，這一步叫做pre-comimt。

• 添加pre-commit
  我們使用husky這個(gè)庫來為我們添加pre-commit功能，首先安裝它，注意安裝這個(gè)庫之前，項(xiàng)目必須被git初始化過，否則安裝會失敗:
  npm i -D husky

然后我們?nèi)サ?code>package.json中，按照官方文檔所說的進(jìn)行添加命令即可:

image.png

之后測試一下:

image.png

可以看到因?yàn)橹暗腻e(cuò)誤我沒有修改，所以commit的時(shí)候檢測出來了，并且commit進(jìn)程被結(jié)束，無法進(jìn)行commit，當(dāng)我們把錯(cuò)誤都修改完成后，再來測試一次:

image.png

使用commitlint規(guī)范git提交信息

話說在使用commitlint之前，筆者我很喜歡提交代碼的時(shí)候不管是什么修改都只用up作為提交信息，結(jié)果被leader噴過好多次都沒有改過這毛病，后來覺得這樣不行，就把commitlint集成進(jìn)了項(xiàng)目中，強(qiáng)制自己按照規(guī)范來寫代碼commit信息，這樣才算是改了過來。

• 使用commitlint之前我們需要安裝它
  npm i -D @commitlint/cli
  另外，我們采用的常規(guī)commit校驗(yàn)方式，所以安裝@commitlint/config-conventional，commilint常規(guī)校驗(yàn)方式采用的是airbnb公司的校驗(yàn)方式
  npm i -D @commitlint/config-conventional

• 然后可以在根目錄新建一個(gè)commitlint.config.js文件，用作自定義一些commit提交規(guī)則，當(dāng)然這一步也可以不做，直接使用常規(guī)校驗(yàn)也行
  

  image.png
  
  下面的是我自己的規(guī)則：
  
  image.png
  
  然后我們在之前的husky配置中，把commitlint的校驗(yàn)命令添加進(jìn)去:
  
  image.png
  
  這時(shí)候提交代碼就需要根據(jù)本次修改來寫好格式，比如下面這個(gè):
  
  image.png
  
  否則會提交失敗:
  
  image.png

后記

到此為止，前端部分的項(xiàng)目模板搭建就結(jié)束了，下一部分將開始后端部分的項(xiàng)目模板搭建。