Installing ES7 React/Redux/GraphQL/React-Native snippets can quickly generate React component templates, such as inputting rfc to generate function components, and inserting useState into useState Hook; 2. Use Prettier to automatically format the code when saving, and unify the team code style with .eslintrc files; 3. ESLint combined with plug-ins can check potential problems in React projects, such as missing or unused variables; 4. React Developer Tools is a browser extension, used to debug component trees and locate source code. These plug-ins cover the entire process of writing, formatting, checking and debugging of React development. Pay attention to the configuration collaboration between ESLint and Prettier to avoid conflicts.

If you write React with VS Code, installing the right plug-in can double your efficiency. Some plug-ins can help you quickly generate component structures, while others can automatically complete, format code, and even check for errors when writing JSX.

The following are a few VS Code plug-ins that I think are particularly practical in my daily development. They have sorted them out according to their functions:

1. ES7 React/Redux/GraphQL/React-Native snippets

This plugin is simply a magic weapon for writing React. It provides a bunch of shortcut code snippets. For example, inputting rfc can quickly generate a function component template. rcc is a class component, and redux can generate Redux-related code structures.

Recommended usage:

• No additional configuration is required after installation, the default shortcut keys take effect
• Supports multiple React technology stacks (including Redux and GraphQL)
• Very suitable for beginners to quickly build component structures, and veterans can save a lot of time to type code

Examples of common fragments:

• imr → import React
• conc → Create context
• usestate → Quickly insert useState Hook

2. Prettier - Code formatter

Prettier is one of the most popular code formatting tools in the front-end circle. In React projects, the mixed code of JSX and JS is prone to confusing formats. With Prettier, it can unify the style and automatically format it when saved.

Recommended usage:

• Settings automatically formats when saving (File > Preferences > Settings, search format on save)
• Can be customized with .prettierrc file
• It is recommended to use it with ESLint to avoid format conflicts

Note:

• The default formatter may not be Prettier, and it needs to be set manually
• If you are using Airbnb or other specifications, remember to adjust the configuration to match the team style

3. ESLint

ESLint is not only a syntax checking tool, but also helps you find potential bugs, such as the useEffect dependencies not written in full, the variables are not used, etc. Especially in React projects, combining eslint-plugin-react and @typescript-eslint/eslint-plugin is even more powerful.

Recommended usage:

• After installation, make sure there is a .eslintrc configuration file in the project
• Can be used with Prettier (need to install eslint-config-prettier to disable conflict rules)
• An error will be marked directly in VS Code, and you can see a prompt by hovering over the mouse.

Common error reminders:

• Missing dependency in useEffect
• Unexpected default export of component
• No direct mutation of state

4. React Developer Tools (official recommendation)

Although this is not a VS Code plugin, it is a necessary browser extension for debugging React applications. You can view the component tree, props, state through it, and even "jump" to the corresponding source code location of the component.

Recommended usage:

• Install Chrome/Firefox version of React DevTools
• Click a component in the Component panel, VS Code will automatically open the corresponding file and locate the number of lines (provided that you have enabled debugging configuration locally)

Basically that's it. The above plug-ins are combined to basically cover the entire process of code writing, formatting, inspection and debugging. Not complicated but easily overlooked is that some of them need to be coordinated with configuration to maximize their role, such as the collaborative work of ESLint Prettier.

The above is the detailed content of Best VS Code extensions for React. For more information, please follow other related articles on the PHP Chinese website!