这一篇主要介绍代码规范相关的内容。
eslint
我们通常使用 lint 工具来检查代码不规范的地方,以下是将 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,才能在开发时启用 eslint:
// webpack.base.js
module: {
rules: [
// 把这个配置放在所有 loader 之前
{
enforce: 'pre',
test: /\.tsx?$/,
exclude: /node_modules/,
include: [APP_PATH],
loader: 'eslint-loader',
options: {
emitWarning: true, // 这个配置需要打开,才能在控制台输出 warning 信息
emitError: true, // 这个配置需要打开,才能在控制台输出 error 信息
fix: true // 是否自动修复,如果是,每次保存时会自动修复可以修复的部分
}
}
]
}
prettier
除了约束开发时的编码规范外,我们一般还希望在提交代码时自动格式化代码,但我们只希望处理当前提交的代码,而不是整个代码库,否则会把提交记录搞得乱七八糟,prettier 和 lint-staged 可以完成这项任务。
先安装工具:
$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier
$ npm i -D lint-staged
在根目录增加 prettier 配置.prettierrc.js
,同样的也可以增加忽略配置.prettierignore
(建议配置为与 lint 忽略规则一致):
// 这个配置需要与 eslint 一致,否则在启用 eslint auto fix 的情况下会造成冲突
module.exports = {
"printWidth": 120, // 一行的字符数,如果超过会进行换行,默认为 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 统一编辑器规范
有些编辑器能够根据配置提示会自动格式化代码,我们可以为各种编辑器提供一个统一的配置。
在根目录新建 .editorconfig
即可,注意不要与已有的 lint 规则冲突:
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 的实现方式有很多种,文本不具体展开讨论,只提供一些必备的工具和配置。
必备工具:
$ 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'],
};