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

{
 // 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

Copy code The code is as follows:

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

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

props validation error

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

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

Configure Prettier

npm install prettier-eslint --save-dev

Configure 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,

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!