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:
ESLint
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:
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)
"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
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 projectnpm 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!