Hi, everyone! I’m Curry, the programmer.
Today I will share how to build a UI component library from scratch. This is also part of the front-end rollback plan.
In the days to come, I will continue to share every knowledge point in the front-end rewind plan.
The following is the content of the front-end rollback plan:
At present, these contents are continuously updated in my learning documents. Those who are interested are welcome to study together!
Environment setup
Component library name
Because our component library is published to npm, the name of your component library cannot be the same as the name of other npm packages.
The name of my component library is: curry-design
First, go to the npm repository and look for curry-design to see if anyone is using it. .
https://www.npmjs.com/search?q=curry-design
As you can see from the results, no other package is using this name, so I can use this name as the package name of the component library.
If the name you gave is found in npm, you need to change the name.
Create project
Create a project using create-react-app
Execute the following command in the terminal:
npx create-react-app curry-design --template typescript
After execution, the react + ts template will be downloaded successfully.
The created directory is as follows:
Configure eslint
- Create .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended', // Use ESLint recommended rules
'plugin:react/recommended', // Use React recommended rules
'plugin:@typescript-eslint/recommended', // Use TypeScript recommended rules
],
parser: '@typescript-eslint/parser', // Use TypeScript parser
parserOptions: {
ecmaVersion: 2021, // ECMAScript version, change as needed
sourceType: 'module', // module import method
ecmaFeatures: {
jsx: true, // Enable JSX syntax support
},
},
plugins: [
'react', // React related ESLint plug-in
'@typescript-eslint', // TypeScript related ESLint plug-in
],
rules: {
//Add your custom rules here
'no-unused-vars': 'off', // Turn off unused variable checking, you can enable it as needed
'@typescript-eslint/no-unused-vars': ['error'], // Use TypeScript's rules to check for unused variables
'react/prop-types': 'off', // Turn off prop-types checking if you don't use prop-types
'react/react-in-jsx-scope': 'off', // Turn off the global introduction of React in JSX, applicable to React 17+
'react/display-name': 'off', // Turn off component name checking if you don't need it
},
settings: {
react: {
version: 'detect', // Automatically detect React version
},
},
};
- Add eslint scripts command
"lint": "npx eslint .",
- Install eslint vscode plug-in
- Execute lint command for detection
Configure prettier
- Install plugin
pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
- Add in .eslintrc.js
extends: [ 'plugin:prettier/recommended' // New ],
- Install prettier vs code plugin
- Add format scripts command
"format": " prettier --write 'src/\*\*/\*. + (js|ts|jsx|tsx)' "
- Execute pnpm format to format
- Create vscode/settings.json in the root directory. This tells vscode the configuration.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // Field formatting after saving
},
// Check for unrecognized words
"cSpell.words": [
"ahooks",
"antd",
"Appstore",
"clonedeep",
"craco",
"downarrow",
"immer",
"mockjs",
"Popconfirm",
"qrcode",
"reduxjs",
"uparrow"
]
}
- You can modify the configuration you want, create .prettierrc.js in the root directory, and configure it in this file
module.exports = {
// The parentheses can be ignored when the arrow function has only one parameter.
arrowParens: 'avoid',
// Do not have spaces inside the brackets
bracketSpacing: true,
// Use Unix format for line terminators
endOfLine: 'lf',
// true: Put > on the last line instead of at a new line
jsxBracketSameLine: false,
// line width
printWidth: 100,
// newline method
proseWrap: 'preserve',
// semicolon
semi: false,
// use single quotes
singleQuote: true,
// indent
tabWidth: 2,
// Use tab indentation
useTabs: false,
// Post comma, multi-line objects and arrays add comma in the last line
trailingComma: 'es5',
parser: 'typescript',
}
husky check code
- Install
pnpm i husky -D
- Excuting an order
npm pkg set scripts.prepare="husky install" npm run prepare npx husky add .husky/pre-commit "npm run lint" npx husky add .husky/pre-commit "npm run format" npx husky add .husky/pre-commit "git add ."
After executing the above command, create the husky file in the directory
When git commit is submitted, the code style will be checked according to the above steps.
commit lint
In order to standardize the description of commit.
- Perform lint during git commit and execute the following command. The following two commands, one for mac and one for windows, can be executed as needed.
// mac
npm install --save-dev @commitlint/{config-conventional,cli}
// For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
- Configuration, enter the following command in the terminal
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
- Add hook, enter and execute the following command
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
After the above execution, the following files will be generated:
5. In this way, if the description is incorrect during git commit, an error will occur.
Error commit: Submission failed
Correct commit: Submission is normal
Continuous updates
At present, these contents are continuously updated in my learning documents. Those who are interested are welcome to study together!