这一篇主要介绍代码规范相关的内容。
eslint
我们通常使用lint工具来检查代码不规范的地方,以下是将 eslint、typescript 和 webpack 结合使用的例子。
首先安装依赖:
1 2
| $ 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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| module.exports = { "root": true, "env": { "browser": true, "node": true, "es6": true, "jest": true, "jsx-control-statements/jsx-control-statements": true }, "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": 'module', "ecmaFeatures": { "jsx": true, "experimentalObjectRestSpread": true } }, "globals": { }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:jsx-control-statements/recommended", ], "settings": { "react": { "version": "detect" } }, "plugins": ["@typescript-eslint", "react", "jsx-control-statements"], "rules": { "no-extra-semi": 0, "quotes": ['error', 'single'], "no-unused-vars": 0 } };
|
我们可能希望检查或不检查某些特定的文件,可以在根目录新建.eslintignore
,以下配置不检查src目录以外的js文件:
还需要配置webpack,才能在开发时启用eslint:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| module: { rules: [ { enforce: 'pre', test: /\.tsx?$/, exclude: /node_modules/, include: [APP_PATH], loader: 'eslint-loader', options: { emitWarning: true, emitError: true, fix: true } } ] }
|
prettier
除了约束开发时的编码规范外,我们一般还希望在提交代码时自动格式化代码,但我们只希望处理当前提交的代码,而不是整个代码库,否则会把提交记录搞得乱七八糟,prettier和lint-staged可以完成这项任务。
先安装工具:
1 2
| $ npm i -D prettier eslint-plugin-prettier eslint-config-prettier $ npm i -D lint-staged
|
在根目录增加prettier配置.prettierrc.js
,同样的也可以增加忽略配置.prettierignore
(建议配置为与lint忽略规则一致):
1 2 3 4 5 6 7 8 9 10
| module.exports = { "printWidth": 120, "tabWidth": 2, "useTabs": false, "singleQuote": true, "semi": true, "trailingComma": "none", "bracketSpacing": true, };
|
修改eslint配置.eslintrc.js
:
1 2 3 4 5 6 7 8 9 10 11 12
| module.exports = { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:jsx-control-statements/recommended", "prettier" ], "plugins": ["@typescript-eslint", "react", "jsx-control-statements", "prettier"], "rules": { "prettier/prettier": 2, } };
|
然后我们要配置lint-staged
,在提交代码时自动格式化代码。
修改package.json
:
1 2 3 4 5 6 7 8 9 10 11 12
| "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{jsx,js,tsx,ts}": [ "prettier --write", "eslint --fix", "git add" ] }
|
用editorconfig统一编辑器规范
有些编辑器能够根据配置提示会自动格式化代码,我们可以为各种编辑器提供一个统一的配置。
在根目录新建.editorconfig
即可,注意不要与已有的lint规则冲突:
1 2 3 4 5 6 7 8 9
| 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的实现方式有很多种,文本不具体展开讨论,只提供一些必备的工具和配置。
必备工具:
1
| $ npm i -D jest babel-jest ts-jest @types/jest
|
参考配置jest.config.js
,测试文件均放在__test__
目录中:
1 2 3 4 5 6 7
| module.exports = { transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], };
|