VSCode 的代码片段功能有哪些高级用法？

$1

$2

$n

$0

${1:defaultValue}

"React Functional Component": {
    "prefix": "rfc",
    "body": [
        "import React from 'react';",
        "",
        "const ${1:$TM_FILENAME_BASE} = (${2:props}) => {",
        "  return (",
        "    <div>",
        "      $3",
        "    </div>",
        "  );",
        "};",
        "",
        "export default $1;",
        "$0"
    ],
    "description": "Generates a React functional component with filename as component name"
}

$TM_FILENAME_BASE

MyComponent.jsx

rfc

MyComponent

$2:props

props

useEffect

${1|option1,option2,option3|}

"React Hook Component with Choice": {
    "prefix": "rfchook",
    "body": [
        "import React${1|, { useState }, { useEffect }| from 'react';",
        "",
        "const ${2:$TM_FILENAME_BASE} = (${3:props}) => {",
        "  ${4|const [state, setState] = useState(initialState);,|} ",
        "  ${5|useEffect(() => {\n    // Effect cleanup\n    return () => {};\n  }, [dependencies]);,|} ",
        "  return (",
        "    <div>",
        "      $6",
        "    </div>",
        "  );",
        "};",
        "",
        "export default $2;",
        "$0"
    ],
    "description": "Generates a React functional component with optional useState and useEffect"
}

import React

useState

useEffect

$4

$5

useState

useEffect

option1,option2,|

|

scope

scope

scope

"javascript,typescript,javascriptreact,typescriptreact"

"javascriptreact,typescriptreact"

// global.code-snippets
{
    "Log to Console (JS/TS)": {
        "prefix": "log",
        "body": "console.log('$1');$0",
        "description": "Logs a message to the console",
        "scope": "javascript,typescript,javascriptreact,typescriptreact"
    },
    "Log to Console (Python)": {
        "prefix": "log",
        "body": "print('$1')$0",
        "description": "Logs a message to the console",
        "scope": "python"
    }
}

prefix

scope

log

User Snippets

.vscode

your-project-name.code-snippets

// .vscode/my-project.code-snippets
{
    "Project Specific Component": {
        "prefix": "mycomp",
        "body": [
            "import { MyProjectComponent } from '@/components/MyProjectComponent';",
            "",
            "function ${1:$TM_FILENAME_BASE} ({ ${2:prop} }) {",
            "  return (",
            "    <MyProjectComponent>",
            "      $3",
            "    </MyProjectComponent>",
            "  );",
            "}",
            "",
            "export default $1;",
            "$0"
        ],
        "description": "Generates a project-specific React component using MyProjectComponent",
        "scope": "javascriptreact,typescriptreact"
    }
}

index.ts

styles.module.css

test.ts

"Generate New Module Script": {
    "prefix": "newmod",
    "body": [
        "// Run this command in your terminal:",
        "// node scripts/generateModule.js --name $1 --path src/features",
        "// Or if you have a VSCode task configured:",
        "// Cmd+Shift+P -> Run Task -> generateModule $1"
    ],
    "description": "Provides instructions to generate a new feature module using a script"
}

prefix