Skip to content

VSCode

Frontend IDE

Pesticide for Chrome

  • This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page. https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi

Atom Plugins

  • https://github.com/jdbirla/JD_Front_End_Repo/blob/master/Angela/Angela_Yu_Tools_Required.md

Online IDE

https://replit.com/signup

VS Code Extensions

Angela

  • Live PreviewPreview
  • Hosts a local server in your workspace for you to preview your webpages on.
  • https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
  • Prettier - Code formatter
  • Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  • vscode-icons
  • Icons for Visual Studio Code
  • https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
  • formulahendry.auto-close-tag
  • Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
  • hex-ci.stylelint-plus
  • Modern CSS/SCSS/Less linter for vscode, support auto fix on save.
  • https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus
  • ESLint
  • Integrates ESLint JavaScript into VS Code.
  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
  • naumovs.color-highlight
  • This extension styles css/web colors found in your document.
  • https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
  • Live Server
  • https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  • Launch a development local Server with live reload feature for static & dynamic pages
  • file-icons
    • File-specific icons in VSCode for improved visual grepping.
    • https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

Jonas

  • Prettier - Code formatter image
  • One Monokai Theme
  • image preview image image
  • live server
  • user snipet configure image

  • Debuggin image

  • user snipet for react

  • got to user snipet and paset below config
{
  "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"
  }
}
  • user setting json
{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "window.confirmBeforeClose": "always",
  "window.openFoldersInNewWindow": "on",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "yaml.schemas": {
    "kubernetes": "*.yaml"
  },
  "redhat.telemetry.enabled": true,
  "workbench.colorTheme": "Monokai Pro",
  "code-runner.showExecutionMessage": false,
  "code-runner.clearPreviousOutput": true,
  "editor.minimap.enabled": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "code-runner.executorMap": {
    "typescript": "ts-node"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.iconTheme": "material-icon-theme",
  "eslint.run": "onSave"
}

  • Quokka : a javascript run tool image image

  • ESLint setup in vite project image image image