Detailed examples of steps to configure react development environment with VSCode

The default configuration of vscode is not friendly to react's JSX syntax, which is reflected in the default indentation error after using automatic formatting or pasting. Although the error can be alleviated by changing the language mode, the formatting after changing the language mode is still not ideal. This article mainly introduces the steps for configuring the react development environment in VSCode. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

By using the ESLint and Prettier plug-ins together, you can achieve perfect support for JSX syntax in vscode.

Editor installation plug-in

You need to install the following plug-in in vscode:

1. ESLint

2. Prettier

Configuration in the project

Configuration ESLint

Basic configuration

Install babel-eslint, eslint-plugin-jsx-a11y, eslint-plugin-react dependencies in the project:

##

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

Recommended ESLint The configuration is as follows (modify .eslintrc)

{
 // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
 "extends": "airbnb",

 // We use 'babel-eslint' mainly for React Native Classes
 "parser": "babel-eslint",
 "ecmaFeatures": {
  "classes": true,
 },

 // jsx相关插件
 "plugins": ["react", "jsx-a11y", "import"]

 // We can add/overwrite custom rules here
 "rules": {
  // React Native has JSX in JS files
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  // React Native includes images via require("../images/example.png")
  "global-require": 0
 }
}

There are a few points to note:

1. If If you use yarn to install, you need to manually create the .eslintrc file

2. If eslint reports an error during use and prompts that dependencies are missing, just install the relevant dependencies

Possible problems

If the file name suffix in the project is .js instead of .jsx, you may encounter the following error:

Copy code The code is as follows:

[eslint] JSX not allowed in files with extension '.js' (react/jsx-filename-extension)

Add new rules in .eslintrc to allow .js and .jsx suffixes:

"rules": {
 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

react-native 0.49 and later versions are no longer recommended to use .jsx. Suffixed, refer to this discussion No .jsx extension?

props validation error

[eslint] 'navigation' is missing in props validation (react/prop-types)

The type of props detected is To help write reusable components, it is best not to turn off this reminder. If you must turn it off, add the following rules:

"rules": {
 "react/prop-types": 0
}

Configure Prettier

The effect we want is: Configure Prettier to automatically format JSX code when saving files according to ESLint rules. The steps are as follows:

Install prettier-eslint in the project

npm install prettier-eslint --save-dev

Configure vscode workspace

Add the following code in the user-defined section of vscode workspace:

// Format a file on save. 
// A formatter must be available, 
// the file must not be auto-saved, 
// and editor must not be shutting down.
"editor.formatOnSave": true,
  
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
  
// Use 'prettier-eslint' instead of 'prettier'. 
// Other settings will only be fallbacks 
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,

Related recommendations:

Detailed examples of vue-cli vscode configuration eslint

Preview markdown and modify the preview style in VSCode

Summary and organize VsCode plug-in

The above is the detailed content of Detailed examples of steps to configure react development environment with VSCode. For more information, please follow other related articles on the PHP Chinese website!