React开发求助：VS Code中JSX标签自动补全实现及插件咨询

Hey there! I totally get how frustrating it is to manually type closing JSX tags every time—those extra keystrokes add up fast. Let’s go through the steps to get auto-completion working smoothly:

1. Check VS Code’s Built-In Settings #

First, make sure the core auto-closing features are enabled:

• Open Settings (use Ctrl+, on Windows/Linux or Cmd+, on Mac).
• Search for editor.autoClosingTags and ensure it’s set to true. This controls automatic tag closing across all supported file types.
• Next, search for emmet.includeLanguages. Add these entries if they’re missing:

  "emmet.includeLanguages": {
    "javascript": "html",
    "typescriptreact": "html"
  }
  

  This tells Emmet (VS Code’s built-in snippet tool) to treat JSX/TSX files like HTML, so you can use Emmet shortcuts (like typing div and hitting Tab to get a closed <div> tag).

2. Try These Handy Plugins #

If the built-in settings don’t give you what you need, these plugins will supercharge your JSX workflow:

• ES7+ React/Redux/React-Native snippets: This is a fan favorite. It not only auto-closes JSX tags but also gives you tons of useful React snippets (like rafce for a functional component with exports, or rcc for a class component). The tag completion is smart and context-aware.
• Auto Rename Tag: While not strictly auto-completion, this plugin pairs perfectly with it. When you rename an opening tag, it automatically updates the closing tag—no more mismatched tags!

3. Quick Troubleshooting Tips #

• Double-check your file extensions: Make sure your React files use .jsx or .tsx extensions. If you’re using .js, click the language mode selector in the bottom-right corner of VS Code and switch it to JavaScript React.
• Refresh VS Code: Sometimes a simple reload fixes glitches. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and run the Reload Window command.

That should cover most cases—once set up, you’ll never go back to manually closing tags!

内容的提问来源于stack exchange，提问作者Abhishek Konnur