這一篇主要介紹代碼規(guī)范相關的內(nèi)容。

eslint

我們通常使用lint工具來檢查代碼不規(guī)范的地方，以下是將 eslint、typescript 和 webpack 結合使用的例子。

首先安裝依賴：

$ npm i -D eslint babel-eslint eslint-loader eslint-plugin-jsx-control-statements
$ npm i -D eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin 

然后在根目錄新建eslint配置文件.eslintrc.js：

module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    // "jquery": true
    "jest": true,
    "jsx-control-statements/jsx-control-statements": true // 能夠在jsx中使用if，需要配合另外的babel插件使用
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": 'module',
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "globals": {
    // "wx": "readonly",
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-control-statements/recommended", // 需要另外配合babel插件使用
  ],
  "settings": {
    "react": {
      "version": "detect" // 自動讀取已安裝的react版本
    }
  },
  "plugins": ["@typescript-eslint", "react", "jsx-control-statements"],
  "rules": {
    "no-extra-semi": 0, // 禁止不必要的分號
    "quotes": ['error', 'single'], // 強制使用單引號
    "no-unused-vars": 0 // 不允許未定義的變量
    // ...你自己的配置
  }
};

我們可能希望檢查或不檢查某些特定的文件，可以在根目錄新建.eslintignore，以下配置不檢查src目錄以外的js文件：

**/*.js
!src/**/*.js

還需要配置webpack，才能在開發(fā)時啟用eslint：

// webpack.base.js
module: {
  rules: [
    // 把這個配置放在所有l(wèi)oader之前
    {
      enforce: 'pre',
      test: /\.tsx?$/,
      exclude: /node_modules/,
      include: [APP_PATH],
      loader: 'eslint-loader',
      options: {
        emitWarning: true, // 這個配置需要打開，才能在控制臺輸出warning信息
        emitError: true, // 這個配置需要打開，才能在控制臺輸出error信息
        fix: true // 是否自動修復，如果是，每次保存時會自動修復可以修復的部分
      }
    }
  ]
}

prettier

除了約束開發(fā)時的編碼規(guī)范外，我們一般還希望在提交代碼時自動格式化代碼，但我們只希望處理當前提交的代碼，而不是整個代碼庫，否則會把提交記錄搞得亂七八糟，prettier和lint-staged可以完成這項任務。

先安裝工具：

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier
$ npm i -D lint-staged

在根目錄增加prettier配置.prettierrc.js，同樣的也可以增加忽略配置.prettierignore（建議配置為與lint忽略規(guī)則一致）：

// 這個配置需要與eslint一致，否則在啟用 eslint auto fix 的情況下會造成沖突
module.exports = {
  "printWidth": 120, //一行的字符數(shù)，如果超過會進行換行，默認為80
  "tabWidth": 2,
  "useTabs": false, // 注意：makefile文件必須使用tab，視具體情況忽略
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none", //是否使用尾逗號，有三個可選值"<none|es5|all>"
  "bracketSpacing": true, //對象大括號直接是否有空格，默認為true，效果：{ foo: bar }
};

修改eslint配置.eslintrc.js：

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-control-statements/recommended", // 需要另外配合babel插件使用
    "prettier" // 注意順序
  ],
  "plugins": ["@typescript-eslint", "react", "jsx-control-statements", "prettier"], // 注意順序
  "rules": {
    "prettier/prettier": 2, // 這樣prettier的提示能夠以錯誤的形式在控制臺輸出
  }
};

然后我們要配置lint-staged，在提交代碼時自動格式化代碼。

修改package.json：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{jsx,js,tsx,ts}": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ]
}

用editorconfig統(tǒng)一編輯器規(guī)范

有些編輯器能夠根據(jù)配置提示會自動格式化代碼，我們可以為各種編輯器提供一個統(tǒng)一的配置。

在根目錄新建.editorconfig即可，注意不要與已有的lint規(guī)則沖突：

root = true

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

使用jest

使用jest可以幫助我們測試代碼，在項目中使用jest的實現(xiàn)方式有很多種，文本不具體展開討論，只提供一些必備的工具和配置。

必備工具：

$ npm i -D jest babel-jest ts-jest @types/jest

參考配置jest.config.js，測試文件均放在__test__目錄中：

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};