VS Code按Tab键无法自动补全JSX标签，如何解决？

Hey there! I know how frustrating it is when that quick tab autocomplete trick doesn't work—let's get this sorted out for you, assuming you're using the most common editor for React work: VS Code (I'll touch on other editors too).

Step 1: Make sure you have the right extensions installed #

First, double-check these extensions are active in VS Code:

• JavaScript and TypeScript (built into VS Code, should be enabled by default—if not, go to Extensions and make sure it's turned on)
• Reactjs Code Snippets (by charalampos karypidis): This extension adds tons of React/JSX-specific shortcuts, including basic tag autocomplete.
• Emmet (built into VS Code): Emmet is what powers those quick HTML/JSX tag expansions, so it's critical here.

Step 2: Tweak your VS Code settings #

Open your settings (press Ctrl+, on Windows/Linux or Cmd+, on Mac) and adjust these:

1. Search for editor.tabCompletion and set it to on (this lets Tab trigger both snippet and word completions).
2. Search for emmet.includeLanguages and add these mappings (so Emmet recognizes JSX files as HTML for expansion):

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

3. Search for emmet.triggerExpansionOnTab and set it to true—this ensures pressing Tab will fire off Emmet's tag expansion.

Step 3: Verify your file type #

• Make sure your file has the .jsx or .tsx extension (VS Code automatically treats these as React files).
• If you're using a .js file, click the language mode indicator in the bottom-right corner of VS Code and select JavaScript React to enable JSX support.

Testing it out #

Now type div and press Tab—you should see it expand to <div></div> instantly. If it still doesn't work, try pressing Ctrl+Space (or Cmd+Space) to bring up the completion list, select the Emmet div option, and then press Tab.

For WebStorm users #

WebStorm has great out-of-the-box JSX support:

• Go to File > Settings > Editor > General > Code Completion
• Under "Insert selected variant by pressing Tab", make sure the box is checked
• Ensure your file is recognized as a React file (WebStorm usually picks this up from .jsx/.tsx extensions or React imports)

That should fix your autocomplete issue!

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