Use tools to standardize your React project

A, configuration,`prettier`

1. Initialize a project using NPX, where I build the project using typescript templates
```
npx create-react-app react-demo1 --template typescript
Copy the code
```
2. Refer to the official configuration and official address

3. Install the plug-in package

npm install --save-dev --save-exact prettier
Copy the code

4, Create a. Prettierrc and. Prettierignore file in the root directory
- prettierrThe file is the configurationprettierrThe rules of
- .prettierignoreYes Configuration is not requiredprettierrFile, something like that.gitignoreThe role of
5. Configure the. Prettierignore configuration
```
build
coverage
Copy the code
```

6, in. Prettierr configuration, the following is my own project, for reference only

{
  "prettier.semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": In 100,
  "tabWidth": 2,
  "endOfLine": "auto",
  "arrowParens": "always"
}
Copy the code

For more configuration, please refer to the official website address. The following is the text description I provided

{
    "printWidth": 100, // over the maximum newline
    "tabWidth": 4, // Indent number of bytes
    "useTabs": False, // Indent instead of TAB, use Spaces
    "semi": True, // Add a semicolon to the end of the sentence
    "singleQuote": True, // Use single quotes instead of double quotes
    "proseWrap": "Preserve ", // Default value. Folds markdown text style due to the use of some fold-sensitive renderer (such as GitHub Comment)
    "arrowParens": "Avoid ", // (x) => {} arrow function argument only one should have parentheses. Avoid: omit parentheses
    "bracketSpacing": True, // Add a space between the object, array parentheses, and text "{foo: bar}"
    "disableLanguages": ["vue"], // Do not format vue files, vue file formatting is set separately
    "endOfLine": "Auto ", // ends with \n\r \n\r auto
    "eslintIntegration": // Don't let Prettier use ESLint's code format for validation
    "htmlWhitespaceSensitivity": "ignore",
    "ignorePath": ". Prettierignore ", // Fill in the. Prettierignore file of the project without prettier formatting
    "jsxBracketSameLine": False, // if '>' is placed on a single line in JSX
    "jsxSingleQuote": False, // Use single quotes instead of double quotes in JSX
    "parser": "Babylon ", // Formatted parser, default to Babylon
    "requireConfig": false, // Require a 'prettierconfig' to format prettier
    "stylelintIntegration": False, // Don't let Prettier use the code format of the stylelint to check
    "trailingComma": "Es5 ", // Whether to place a comma after the last element of an object or array.
    "tslintIntegration": False // Don't let Prettier use tsLint's code format for validation
}
Copy the code

7, Since creation-react-app creates a project with an ESLint specification, we add an prettierr, where there is a conflict, so we need to tell whose specification to use. Can be simply understood as the priority bar, refer to the official website
- Installing dependency packages
```
npm install eslint-config-prettier -D
Copy the code
```
- Configure in package.json
```
{..."eslintConfig": {
    "extends": [
      "react-app"."react-app/jest".// Add this line
      "prettier"]},... }Copy the code
```

Second, the configuration`git`Hook function for each time`commit`“Is used`prettierr`Formatting code

1. Reference address
2. Use NPX to generate files
```
npx mrm lint-staged
Copy the code
```

3. Running the above command automatically adds configuration to package.json

{
  "lint-staged":
    // Generated by default
    // "*.{js,css,md}": "prettier --write"
    // Add this if the project is to use ts
    "*.{ts,tsx,css,md}": "prettier --write"}}Copy the code

4. Add husky’s commit hook to package.json

{..."husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write".// Add this line to indicate that git add will be performed automatically after the fix
      "git add"]}... }Copy the code

5, modifyindex.tsFile, change the single quotes to double quotes, remove the semicolon, and usegitSubmit the code to see if the file is automatically formatted

Three, configuration,`git`Submission specification of

1. Reference documents

2. Install dependency packages

npm install --save-dev @commitlint/config-conventional @commitlint/cli
Copy the code

Create a commitlint.config.js file

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
Copy the code

The following is my own revision according to the Internet

module.exports = {
  extends: ['@commitlint/config-conventional'].rules: {
    'type-enum': [
      2.'always'['upd'.'feat'.'fix'.'docs'.'style'.'refactor'.'test'.'chore']],}};Upd: / https://segmentfault.com/a/1190000017790694 * * * * update * feat: new * fix: fix * docs: document * style: the style * refactor: Refactoring code * test: unit tests * chore: Changes to the build process or helper tools */
Copy the code

4. Generate prompt messages

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

5. Test submission
6. You must bring instructions with you every time you submit code
```
git add .
git Commit -m 'feat '
Copy the code
```

Four, configuration,`eslint`the

You might say that the above code will automatically format for us every time we submit it, but we would like to be able to find any irregularities every time we save the code, so that when we submit the code, we don’t need to change it one by one.

1. Initialize esLint and wait for a moment to generate a.eslintrc.js file in the project root directory
```
npx eslint --init
Copy the code
```

Instead, create.eslintignore in the project root directory to ignore files that do not need to be examined

# comment, ignore the file
node_modules
src/serviceWorker.ts
src/react-app-env.d.ts
*.lock
Copy the code

3, Where prettier is configured, then esLint and prettier are compatible

npm install eslint-plugin-prettier -D
npm install eslint-config-prettier -D
Copy the code

4. Configure according to the documentation
5. React is now developed using hooks. Configure this rule as well
6. Run the project and manually remove a semicolon or single quotation mark to double quotation mark

7. Pay for my own.eslintrc.js configuration file

module.exports = {
  env: {
    browser: true.es2021: true,},extends: [
    'react-app'.'eslint:recommended'.'plugin:react/recommended'.'plugin:@typescript-eslint/recommended'.'plugin:prettier/recommended'.'plugin:react-hooks/recommended',].parser: '@typescript-eslint/parser'.parserOptions: {
    ecmaFeatures: {
      jsx: true,},ecmaVersion: 12.sourceType: 'module',},plugins: ['react'.'@typescript-eslint'.'prettier'.'react-hooks'].rules: {
    'prettier/prettier': 'error'.'arrow-body-style': 'off'.'prefer-arrow-callback': 'off'.'react-hooks/rules-of-hooks': 'error'.'react-hooks/exhaustive-deps': 'warn',}};Copy the code

Configure style formatting

1. Install dependency packages

npm install --save-dev stylelint stylelint-config-standard
Copy the code

2. Create a file in the root directory of the project

{
  "extends": ["stylelint-config-standard"],
  "rules": {}
}
Copy the code

3. Configure git hooks in package.json to format styles

{..."lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write"."git add"].// For CSS or SCSS style formatting, continue if you use less
    "*.{css,scss}": [
      "stylelint src/**/*.css --fix"."stylelint src/**/*.scss --fix"]}... }Copy the code

4. Create a style in index. CSS and use Git to submit the code to see if the style is formatted
5, When submitting code with Git, it is slow and seems to be pulling out packages. In this case, delete node_modules and reinstall it

Vi. Editor specification

Create a. Editorconfig file under the project

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
Copy the code

Use tools to standardize your React project

A, configuration,prettier

Second, the configurationgitHook function for each timecommit“Is usedprettierrFormatting code

Three, configuration,gitSubmission specification of

Four, configuration,eslintthe

Configure style formatting

Vi. Editor specification

Related Posts

VueJS – Parent and child components pass values

React Scaffolding

Pineapple coming!! Here comes the new VueX with a very sweet name “Pinia”! If you don’t learn, you will be out.

A, configuration,`prettier`

Second, the configuration`git`Hook function for each time`commit`“Is used`prettierr`Formatting code

Three, configuration,`git`Submission specification of

Four, configuration,`eslint`the