JavaScript ?? React? ???? ?? Visual Studio Code? ??? ?? ??? ???? ????? ????? ??? ? ??? ???? ?? ? ????. ? ?????? ?? JS ? React ???? VS Code ??? ???? ?? ?? ???? ?? ??? ????.

1. ??? ?? ????? ?? ?? ?? ?

???? ??? ??? ?? ??? ??? ???? ?? ??? ??? ? ??? ???. ?? ????? ?? ????? ??? ??? ? ???? ???? ???? ??? ????!

VS Code?? ?? ??? ???? ??:

1. ?? ??? ??: Cmd Shift P(Mac) ?? Ctrl Shift P(Windows)
? ????.
2. '?? ??: ??? ??? ??'? ???? ?????.
3. ?? ?? ??? ?????(?: JavaScript ???? ?? JavaScript, ?? JS ???? ?? javascript.json).
4. ?? ??? ???? ????? ??? JSON ??? ???? ?????.

??? ??

?? “Smart React Component” — ??? ?? ??? React Component

? ???? src ? props? ?? ?? ??? ??? React ?? ?? ???? ????, ??? ??? ??? ?? ?? ?? ??? ??? ???? ? ?????.

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div className='${1:componentName}'>",<br>      "      <img src='${3:/path/to/image.jpg}' alt='${4:description}' />",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

?? “??? ?? ??” — ??? ??? ??? ???

clog? ???? ? ???? ??? null? ???? ???? ?? ???? ???? console.log ?? ????? ???? ?? ?????? ?? ?? ???? ?????.

<span>{<br>  "Conditional Console Log": {<br>    "prefix": "clog",<br>    "body": [<br>      "if (${1:variable} !== null && ${1:variable} !== undefined) {",<br>      "  console.log('${1:variable}:', ${1:variable});",<br>      "}"<br>    ],<br>    "description": "Conditional console.log to check variable before logging"<br>  }<br>}</span>

?? “API Fetch Snippet” — API ??? ????? ?? ???

?? ???? ??? ??????? apif? ???? ?? ?? ??? ??? ???? API ???? ??? ?????.

<span>{<br>  "API Fetch Call": {<br>    "prefix": "apif",<br>    "body": [<br>      "const fetch${1:Data} = async () => {",<br>      "  try {",<br>      "    const response = await fetch('${2:https://api.example.com/endpoint}');",<br>      "    if (!response.ok) throw new Error('Network response was not ok');",<br>      "    const data = await response.json();",<br>      "    console.log(data);",<br>      "    return data;",<br>      "  } catch (error) {",<br>      "    console.error('Fetch error:', error);",<br>      "  }",<br>      "};"<br>    ],<br>    "description": "Basic API fetch call with error handling"<br>  }<br>}</span>

2. ?? ???? ????? ?

JavaScript ? React ?????? ?? ??? ????? ??? ?? ?? ????(hello, node_modules)? ???? ??? ????. ?? ???? ???? ???? ?? ??? ??? ??? ????.

? ??? ?? ?? ? ?? ???

node_modules ? .log ??? ?? ??? ??? ???? settings.json? ?? ??? ?????.

<span>{<br>  "files.exclude": {<br>    "<strong>/node_modules"</strong>: <span>true</span>,<br>    "/build": <span>true</span>,<br>    "<strong>/dist"</strong>: <span>true</span>,<br>    "/<em>.log"</em>: <span>true</span><br>  },<br>  "search.exclude": {<br>    "<em>/node_modules"</em>: <span>true</span>,<br>    "<em>/coverage"</em>: <span>true</span><br>  },<br>  "files.watcherExclude": {<br>    "<em>/node_modules/</em><em>"</em>: <span>true</span>,<br>    "<em>/build/</em>*": <span>true</span><br>  }<br>}</span>

? ?: ?? ? ??? ?????? ??? ???? ?? ??? ?????? VS Code? ?? ?? ???? ??? ? ????.

?? ?? ??

• files.exclude: ?? ????? ??? ??? ??? ????. ???? node_modules, build, dist ? .log ??? ????.
• search.exclude: ?? ???? ?? ??? ???? ?? ??? ???? ????.
• files.watcherExclude: VS Code? ?? ??? ?? ??? ?????? ???? ???? CPU ???? ?? ??? ??????.

??? ??? node_modules ? ?? ??? ??? ?? ? ??? ?? ??? ??? ? ?? React ? Node.js ????? ?? ?????.

3. ???? ?? ???: ??? ?? ??? ?

??? ???? ????? VS Code? ???? ??? ?? ???? ????.

?? JavaScript ?? ??? ??

settings.json? ?????? ?? ????? ?? ?? ??? ?????.

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div className='${1:componentName}'>",<br>      "      <img src='${3:/path/to/image.jpg}' alt='${4:description}' />",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

??:

• editor.tabSize: ???? ??? JavaScript?? ???? ???? ?? 2?? ?????.
• editor.insertSpaces: ??? ???? ???? ?? ? ?? ??? ?????.
• editor.formatOnSave: ?? ? ???? ?? ??? ?????.
• editor.trimAutoWhitespace: ?? ??? ???? ??? ???? ?????.

? ??? ?: ????? .prettierrc ??? ???? ?? ??? ??? ???? ? ???? ??? ???? ???? ?? ??? ???.

??? ???

??? ??? ??? ?? ?? ??? ??? ? ?? ?? ???? ???? ?? ??? ??????. ? ?? ??? ?? ??? ?? ??? ???? ??? ??? ?? ??? ????. ?? ??? ? ??? ??? ? ????.

? ??? VS Code? ?? ??? ?? ??: JavaScript ? React ???? ?? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!