Home > Web Front-end > JS Tutorial > body text

Detailed examples of steps to configure react development environment with VSCode

小云云
Release: 2017-12-27 13:45:54
Original
5503 people have browsed it

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
Copy after login

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
 }
}
Copy after login

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"] }]
}
Copy after login

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)
Copy after login

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
}
Copy after login

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
Copy after login

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,
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!