React front-end acceleration development tool learning notes

Recently got into React and learned some front-end engineering Settings. Write it down here, from the beginning.

Create a new repository on Github and build a new project with create-React-app scaffolding. Git repo. git remote add origin https://github.com git branch -m main git push -u origin main
Set absolute directoryThe first problem to be solved is the path of file introduction. When the project is too large, sometimes it is necessary to use multi-layer nested relative path to introduce files. This has two disadvantages. Many files that reference it also need to adjust the relative path of the reference, so we set an absolute path entry so that we can choose the relative or absolute path according to the depth of the path.

– The project root directory creates or opens the jsconfig.json file and adds the following contents. After this step, the default initial location for file references is under the SRC folder.
```
{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]}Copy the code
```
Automatic formattingAlthough VS Code provides the plugin for Prettier, the default format for formatting is different because of the operating system, version, etc. We hope that a team can automatically format code when submitting the code. Prettier connection at https://prettier.io/docs/en/install.html

Install the prettier
NPM install –save-dev –save-exact prettier echo {}>.prettierrc.json

Create another.prettierIgnore file and add

# Ignore artifacts: build coverage

Prettier now has Prettier installed. She already has the ability to format code, but not to automate formatting code. Prettier provides a pre-commit hook to automate formatting submitted code. Lint-staged NPX mrm@2 Lint-staged installation will be shown in the package.json file of the project after it has been installed

The file formats inside represent what Prettier can format now, add other file formats you want to format,

To prevent esLint from being compatible with Prettier, install eslint-config-Prettier

npm install --save-dev eslint-config-prettier Once installed, add the “prettier” option to the extends array of the eslintConfig option in the package.json file.Once all configured, the code can be automatically formatted at commit time.
Automatic importImporting additional files is an unnecessary but necessary operation during project development, but it can be done automatically through some Settings. Json, add the “JSX “:”react” option,
Open VS Code Settings, search trigger Expansion in the search box and check TAB to expand

Search word based Suggestion, check Controls… Set the suggestions mode to AllDocuments

Automatic import is now configured.
React/Redux is an ES7 React/Redux plugin that can automatically complete large snippets of Code. Complete the fragments according to acronyms and read the manual

A Commit Message limitWe want to put some restrictions on messages when we commit code to avoid situations where messages are too simple to be legible or unreadable by other developers. Use commitlint.
Echo “module. Exports = {extends: [‘@commitlint/config-conventional’]}” > commitlint.config.js husky NPX husky add. husky/commit-msg ‘NPX –no-install Commitlint –edit “$1″‘ is configured, test commit message. Commit nonconforming to specifications and get the following error message.

Rules can be found at github.com/conventiona…