本文主要针对react-umi进行项目配置，使用的是@umijs/fabric下面的包
- 创建react-umi项目
- 配置eslint
- 配置stylelint
- 配置prettier
- 配置git hook
1. 创建项目
mkdir sub-react-umi
cd sub-react-umi
yarn create @umijs/umi-app
yarn install 或者 npm install
2. 配置eslint
# 全局安装eslint
npm install eslint -g
# 项目中安装eslint包
npm install eslint --save-dev
# 初始化eslint 按照自己的想要的配置进行选择
eslint --init
> To check syntax, find problems, and enforce code style
> Javascript modules (import/export)
> React
> Yes
> Browser
> Use a popular style guild
...
然后在tsconfig.json中的"include"目录中增加".eslintrc.js"
可根据自己需求在.eslintrc.js文件中进行配置
当然可以直接使用umi/fabric下面的包
npm install @umijs/fabric --save-dev
我的配置如下
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
// in antd-design-pro
globals: {
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
page: true,
REACT_APP_ENV: true,
},
parserOptions: {
project: ['./tsconfig.json', './packages/*/tsconfig.json'],
ecmaVersion: 12,
sourceType: 'module',
ecmaFeatures: true,
tsconfigRootDir: __dirname,
},
rules: {},
overrides: [
{
files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
rules: {
'no-use-before-define': 'off', // 不能在定义之前使用
},
},
],
env: {
browser: true,
es2021: true,
},
};
3. 配置stylelint
下载stylelint的相关包
npm install @umijs/fabric --save-dev
# 声明一下(如果已经有就不用下载了)，由于umi集成了stylelint的包，所以可以直接下载umi的包，若是没有使用umi，则需要这样引入包
npm install --save-dev stylelint
npm install --save-dev stylelint-config-standard
在根目录下创建.stylelintrc.js文件，拷贝以下代码
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
rules: {
// your rules
},
ignoreFiles: ['./src/global.less'],
};
4. 配置prettier
由于本项目自带prettier，但是想方便配置，本人直接将其修改成.prettier.js文件
具体配置如下
const fabric = require('@umijs/fabric');
module.exports = {
...fabric.prettier,
singleQuote: true,
trailingComma: 'all',
printWidth: 120,
overrides: [
{
files: '.prettierrc',
options: { parser: 'json' },
},
],
};
5. 配置git hooks——husky
安装husky
npm install husky --save-dev
在package.json中加入如下配置
// 这是husky扩展的脚本执行的定义方式，当对应git hooks触发时执行
"husky": {
"hooks": {
// 可以执行一个js文件，将控制权转移给我们更熟悉的nodejs
"pre-commit": "lint-staged",
// 也可以调用其他脚本或者执行一段原生shell命令，如下配置
// "commit-msg": "npm run test && echo succeed"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --parser=typescript --write src/**/*.{js,jsx,tsx,ts}",
"eslint --fix",
"git add"
],
"*.{less,css}": [
"prettier --write src/**/*.{less,css}",
"stylelint --fix src/**/*.{less,css}",
"git add"
]
},
欢迎下方留言...
