Some Useful Visual Code extensions, settings, and snippets

Exentsions

ESLint： It is a linter for JavaScript/TypeScript — it checks your code for errors, style issues, and enforces coding standards.
Prettier： It is an opinionated code formatter. Unlike ESLint (which focuses on code correctness and style rules), Prettier focuses on consistent formatting.
One Monokai Theme： It is a popular dark theme for VS Code (also available in some JetBrains IDEs).
Material Icon Theme： It’s a file and folder icon theme based on Google’s Material Design.
Quokka.js ： It (often just called Quokka) is a developer productivity tool for JavaScript and TypeScript. It runs your code instantly as you type in your editor (like VS Code, JetBrains IDEs, Sublime, etc.) and shows the results inline.
Auto Rename Tag： When you rename <div> → <section>, it automatically renames the closing tag, and works in HTML, XML, JSX/TSX, Vue, etc.
Color Highlight： Highlights CSS/HTML/JS/TS color values (#ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%), etc.) directly in your code with the actual color.
Image Preview：If you hover over an image path/URL inside code (like in img src="..." or CSS background-image: url(...)), VS Code shows a small preview popup.

Settings

Code Snippets

1. “Print to console”

"Print to console": {
  "prefix": "cl",
  "scope": "javascript,typescript,javascriptreact",
  "body": ["console.log($1)"],
  "description": "console.log"
}

prefix: cl → type cl and press Tab to expand
scope: works in JavaScript, TypeScript, and React files
body: expands to console.log() with the cursor inside the parentheses ($1 means first cursor position).
description: shown in IntelliSense as console.log.

👉 Usage: type cl → Tab → console.log(<cursor>)

2. “reactComponent”

"reactComponent": {
  "prefix": "rfc",
  "scope": "javascript,typescript,javascriptreact",
  "body": [
    "function ${1:${TM_FILENAME_BASE}}() {",
    "\treturn (",
    "\t\t<div>",
    "\t\t\t$0",
    "\t\t</div>",
    "\t)",
    "}",
    "",
    "export default ${1:${TM_FILENAME_BASE}}",
    ""
  ],
  "description": "React component"
}

prefix: rfc → type rfc and press Tab
body: creates a React function component template.
Example in a file called Home.js: function Home() { return ( <div> </div> ) } export default Home
- ${TM_FILENAME_BASE} automatically uses the file name (Home).
- $0 marks the final cursor position.

👉 Usage: type rfc → Tab → ready-to-use React function component

3. “reactStyledComponent”

"reactStyledComponent": {
  "prefix": "rsc",
  "scope": "javascript,typescript,javascriptreact",
  "body": [
    "import styled from 'styled-components'",
    "",
    "const Styled${TM_FILENAME_BASE} = styled.$0``",
    "",
    "function ${TM_FILENAME_BASE}() {",
    "\treturn (",
    "\t\t<Styled${TM_FILENAME_BASE}>",
    "\t\t\t${TM_FILENAME_BASE}",
    "\t\t</Styled${TM_FILENAME_BASE}>",
    "\t)",
    "}",
    "",
    "export default ${TM_FILENAME_BASE}",
    ""
  ],
  "description": "React styled component"
}

prefix: rsc → type rsc and press Tab
body: creates a React component with styled-components.
Example in a file called Button.js: import styled from 'styled-components' const StyledButton = styled.div`` function Button() { return ( <StyledButton> Button </StyledButton> ) } export default Button
- ${TM_FILENAME_BASE} uses the file name (Button).
- $0 places the cursor where you can pick the HTML tag (div, button, etc.).

👉 Usage: type rsc → Tab → ready-to-use React styled component template

✅ In summary:
This snippet file gives you shortcuts in VS Code:

cl → expands to console.log()
rfc → expands to a React function component
rsc → expands to a React styled component

Would you like me to extend this set with a React Arrow Function Component (rafc) snippet too? That way you can quickly scaffold components using the arrow function style.

//snippets.json
{
  "Print to console": {
    "prefix": "cl",
    "scope": "javascript,typescript,javascriptreact",
    "body": ["console.log($1)"],
    "description": "console.log"
  },
  "reactComponent": {
    "prefix": "rfc",
    "scope": "javascript,typescript,javascriptreact",
    "body": [
      "function ${1:${TM_FILENAME_BASE}}() {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}",
      ""
    ],
    "description": "React component"
  },
  "reactStyledComponent": {
    "prefix": "rsc",
    "scope": "javascript,typescript,javascriptreact",
    "body": [
      "import styled from 'styled-components'",
      "",
      "const Styled${TM_FILENAME_BASE} = styled.$0``",
      "",
      "function ${TM_FILENAME_BASE}() {",
      "\treturn (",
      "\t\t<Styled${TM_FILENAME_BASE}>",
      "\t\t\t${TM_FILENAME_BASE}",
      "\t\t</Styled${TM_FILENAME_BASE}>",
      "\t)",
      "}",
      "",
      "export default ${TM_FILENAME_BASE}",
      ""
    ],
    "description": "React styled component"
  }
}

Spread the love