寻求React开发中可快捷生成带类名元素的VSCode代码片段

Got it, let's set up those time-saving React snippets in VS Code exactly how you need them. Here's a straightforward, step-by-step solution:

Step 1: Open Your React Snippet File #

• Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette.
• Type Configure User Snippets and select it.
• Choose the snippet file matching your React setup: pick javascriptreact.json for JavaScript React projects, or typescriptreact.json if you use TypeScript.

Step 2: Add the Snippet Configuration #

Paste the following JSON into the opened file (replace existing content if needed, or add it if the file is empty):

{
  "Div with Class Shortcut": {
    "prefix": "\\..*",
    "body": [
      "<div className=\"${1:${TM_CURRENT_TRIGGER/^\\.(.*)$/$1/}}\"></div>"
    ],
    "description": "Generate a div with specified class (e.g., .menu → <div className=\"menu\"></div>)"
  },
  "Custom Element with Class Shortcut": {
    "prefix": "\\w+\\..*",
    "body": [
      "<${1:${TM_CURRENT_TRIGGER/^(\\w+)\\.(.*)$/$1/}} className=\"${2:${TM_CURRENT_TRIGGER/^(\\w+)\\.(.*)$/$2/}}\"></${1:${TM_CURRENT_TRIGGER/^(\\w+)\\.(.*)$/$1/}}>"
    ],
    "description": "Generate any element with specified class (e.g., span.menu → <span className=\"menu\"></span>)"
  }
}

Step 3: Test the Snippets #

Open a .jsx or .tsx file and try these shortcuts:

• Type .menu and press Tab → You’ll get <div className="menu"></div> instantly.
• Type span.menu and press Tab → You’ll get <span className="menu"></span> as expected.

Quick Breakdown #

• The first snippet triggers whenever you start with a dot followed by text. It grabs the class name after the dot and drops it into a div element.
• The second snippet activates when you type a tag name, dot, then class name. It splits your input into the tag and class, then builds the matching React element with the class attribute.

内容的提问来源于stack exchange，提问作者Benjamin Barbé