Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

What extensions do you use in VSCode? #406

Closed
kentcdodds opened this issue May 24, 2018 · 27 comments
Closed

What extensions do you use in VSCode? #406

kentcdodds opened this issue May 24, 2018 · 27 comments
Labels
packages Thoughts/opinions/personal use of 3rd party packages/libraries/frameworks

Comments

@kentcdodds
Copy link
Owner

kentcdodds commented May 24, 2018

Yes, this is me asking myself a question, because I want to answer it and I'm sure someone will ask me eventually.

I'll try to keep my answer up-to-date. You can get to this question quickly with the short-link: http://kcd.im/vscode

@kentcdodds
Copy link
Owner Author

kentcdodds commented May 24, 2018

Here's the list:


To generate this list:

const {execSync, spawn} = require('child_process')

const result = execSync('code --list-extensions')

const list = String(result)
  .split('\n')
  .filter(Boolean)
  .map(
    x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
  )
  .join('\n')

const proc = spawn('pbcopy')
proc.stdin.write(list)
proc.stdin.end()

I just load that up in a Quokka buffer​​​​ and it's just waiting in my clipboard.

And here's my config because someone asked me once:

{
  // Place your settings in this file to overwrite the default settings
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": true,
  "editor.lightbulb.enabled": false,
  "editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": false,
  "editor.rulers": [80],
  "editor.snippetSuggestions": "inline",
  "editor.suggest.showKeywords": false,
  "editor.wordBasedSuggestions": false,
  "editor.suggest.localityBonus": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "enitor.acceptSuggestionOnEnter": "off",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed"
  },
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.glyphMargin": false,
  "editor.folding": false,
  "files.exclude": {
    "**/.env": true,
    "USE_GITIGNORE": true
  },
  "files.associations": {
    "*.md": "mdx"
  },
  "files.defaultLanguage": "{activeEditorLanguage}",
  "javascript.validate.enable": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/coverage": true,
    "**/dist": true,
    "**/build": true,
    "**/.build": true,
    "**/.gh-pages": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "overrideConfig": {
      "rules": {
        "no-debugger": "off"
      }
    }
  },
  "terminal.integrated.shellArgs.osx": ["-l"],
  "terminal.integrated.scrollback": 10000,
  "explorer.openEditors.visible": 0,
  "editor.lineNumbers": "on",
  "workbench.colorTheme": "Night Owl",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "workbench.panel.defaultLocation": "right",
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": false,
  "workbench.editor.limit.value": 10,
  "debug.javascript.codelens.npmScripts": "never",
  "breadcrumbs.enabled": true,
  "local-history.absolute": true,
  "local-history.path": "/Users/kentcdodds/.vscode-history",
  "grunt.autoDetect": "off",
  "npm.runSilent": true,
  "gulp.autoDetect": "off",
  "explorer.confirmDragAndDrop": false,
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": false,
  "editor.minimap.enabled": false,
  "spellright.language": ["en"],
  "spellright.documentTypes": ["markdown", "plaintext", "mdx"],
  "spellright.parserByClass": {
    "mdx": {
      "parser": "markdown"
    }
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,
  "php.suggest.basic": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.packageManager": "npm",
  "npm.packageManager": "npm",
  "editor.acceptSuggestionOnEnter": "off",
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 20,
  "workbench.statusBar.visible": true,
  "editor.cursorBlinking": "solid",
  "editor.inlineSuggest.enabled": true,
  "redhat.telemetry.enabled": false,
  "editor.formatOnSave": true,
  "emmet.showAbbreviationSuggestions": false,
  "emmet.showExpandedAbbreviation": "never",
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false,
    "jsonc": false,
    "mdx": true,
    "typescriptreact": true
  },
  "git.autofetch": true,
  "timeline.excludeSources": [],
  "deno.lint": false,
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },
  "git.path": "/opt/homebrew/bin/git",
  "playwright.reuseBrowser": true
  /**/
  // egghead
  /*
  "editor.fontSize": 20,
  "terminal.integrated.fontSize": 15,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.editor.showTabs": false,
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "window.zoomLevel": 1,
  "breadcrumbs.enabled": false,
  "editor.parameterHints.enabled": false,
  "editor.suggestOnTriggerCharacters": false,
  "explorer.decorations.colors": false,
  "explorer.decorations.badges": false,
  "workbench.activityBar.visible": false
  /**/
  // build react apps
  /*
  "editor.fontSize": 20,
  "terminal.integrated.fontSize": 15,
  "scm.diffDecorations": "none",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "window.zoomLevel": -1,
  "editor.parameterHints.enabled": false,
  "editor.suggestOnTriggerCharacters": false,
  "explorer.decorations.colors": false,
  "explorer.decorations.badges": false
  /**/
  // workshop
  /*
  "editor.fontSize": 16,
  "terminal.integrated.fontSize": 16,
  "scm.diffDecorations": "none",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "workbench.colorTheme": "Night Owl Light",
  "explorer.decorations.colors": false,
  "explorer.decorations.badges": false,
  "workbench.activityBar.visible": false,
  "workbench.editor.limit.value": 100
  /**/
  // Talk
  /*
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 20,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.statusBar.visible": false,
  "workbench.activityBar.visible": false,
  "editor.cursorBlinking": "solid",
  "window.zoomLevel": 2,
  "workbench.colorTheme": "Night Owl Light",
  "breadcrumbs.filePath": "off",
  "breadcrumbs.symbolPath": "off",
  "editor.parameterHints.enabled": false,
  "editor.quickSuggestions": {
    "comments": "off",
    "strings": "off",
    "other": "off"
  },
  "editor.suggestOnTriggerCharacters": false,
  "explorer.decorations.colors": false,
  "explorer.decorations.badges": false
  /**/
}

Snippets

javascript.json/typescript.json/typescriptreact.json (I just copy/paste it...)

{
  /*
   // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
   // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
   // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
   // Example:
   "Print to console": {
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
  }
*/
  "console.log": {
    "prefix": "cl",
    "body": "console.log(${1:'here'})$0"
  },
  "console.log('var', var)": {
    "prefix": "vl",
    "body": "console.log('$1', $1)$0"
  },
  "console.log({var})": {
    "prefix": "ol",
    "body": "console.log({$1})$0"
  },
  "import x from '": {
    "prefix": "imp",
    "body": "import ${2:*} from '$1'$3"
  },
  "eslint rule": {
    "prefix": "esl",
    "body": ["/*", "eslint", "  $1: \"off\",", "*/"]
  },
  "eslint disable next line": {
    "prefix": "eslnl",
    "body": "// eslint-disable-next-line $1"
  },
  "eslint disable line": {
    "prefix": "esll",
    "body": "// eslint-disable-line $1"
  },
  "constructor": {
    "prefix": "ctor",
    "body": ["constructor(...args) {", "  super(...args)", "  $0", "}"]
  },
  "try/catch": {
    "prefix": "try",
    "body": ["try {", "  $1", "} catch (error) {", "  $0", "}"]
  },
  "async function": {
    "prefix": "afun",
    "body": ["async function $1($2) {", "  $0", "}"]
  },
  "throw log": {
    "prefix": "tl",
    "body": "throw new Error(JSON.stringify({$0}, null, 2))"
  },
  "spaced console.log": {
    "prefix": "scl",
    "body": [
      "console.log('**************************************************************************\\\\n\\\\n\\\\n')",
      "console.log($0)",
      "console.log('\\\\n\\\\n\\\\n**************************************************************************')"
    ]
  },
  "Switch Statement": {
    "prefix": "switch",
    "body": [
      "switch (${1:key}) {",
      "  case ${2:value}: {",
      "    $0",
      "    break",
      "  }",
      "  default: {",
      "    break",
      "  }",
      "}"
    ]
  },
  "Reducer": {
    "prefix": "reducer",
    "body": [
      "function ${1:someReducer}(state, action) {",
      "  switch (action.type) {",
      "    case ${2:'value'}: {",
      "      return $0",
      "    }",
      "    default: {",
      "      throw new Error(`Unhandled action type: ${action.type}`)",
      "    }",
      "  }",
      "}"
    ]
  },
  "Switch case": {
    "prefix": "case",
    "body": ["case ${2:'value'}: {", "  return $0", "}"]
  },
  "import React": {
    "prefix": "ir",
    "body": ["import * as React from 'react'\n"]
  },
  "React.useState": {
    "prefix": "us",
    "body": [
      "const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = React.useState(${2:initial${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}})$0"
    ]
  },
  "React.useEffect": {
    "prefix": "uf",
    "body": ["React.useEffect(() => {", "  $0", "}, [])"]
  },
  "React.useReducer": {
    "prefix": "ur",
    "body": [
      "const [state, dispatch] = React.useReducer(${1:someReducer}, {",
      "  $0",
      "})"
    ]
  },
  "React.useRef": {
    "prefix": "urf",
    "body": ["const ${1:someRef} = React.useRef($2)$0"]
  },
  "React Component": {
    "prefix": "rc",
    "body": [
      "class $1 extends React.Component {",
      "  render() {",
      "    $0",
      "  }",
      "}"
    ]
  },
  "React: componentWillMount": {
    "prefix": "cwm",
    "body": ["componentWillMount() {", "  $0", "}"]
  },
  "React: componentDidMount": {
    "prefix": "cdm",
    "body": ["componentDidMount() {", "  $0", "}"]
  },
  "React: componentWillReceiveProps": {
    "prefix": "cwrp",
    "body": ["componentWillReceiveProps(nextProps) {", "  $0", "}"]
  },
  "React: componentWillUpdate": {
    "prefix": "cwu",
    "body": ["componentWillUpdate(nextProps, nextState) {", "  $0", "}"]
  },
  "React: componentDidUpdate": {
    "prefix": "cdu",
    "body": ["componentDidUpdate(prevProps, prevState) {", "  $0", "}"]
  },
  "React: componentWillUnmount": {
    "prefix": "cwu",
    "body": ["componentWillUnmount() {", "  $0", "}"]
  },
  "Jest test": {
    "prefix": "test",
    "body": ["test('$1', () => {", "  $0", "})"]
  },
  "Jest async test": {
    "prefix": "atest",
    "body": ["test('$1', async () => {", "  $0", "})"]
  },
  "Mocha it block": {
    "prefix": "it",
    "body": ["it('$1', () => {", "  $2", "})"]
  },
  "Mocha describe block": {
    "prefix": "desc",
    "body": ["describe('$1', () => {", "  $2", "})"]
  },
  "split-guide final": {
    "prefix": "sgf",
    "body": ["// FINAL_START", "$1", "// FINAL_END"]
  },
  "split-guide workshop": {
    "prefix": "sgw",
    "body": ["// WORKSHOP_START", "$1", "// WORKSHOP_END"]
  },
  "split-guide comment": {
    "prefix": "sgc",
    "body": ["// COMMENT_START", "$1", "// COMMENT_END"]
  }
}

remix.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  //   "scope": "javascript,typescript",
  //   "prefix": "log",
  //   "body": [
  //     "console.log('$1');",
  //     "$2"
  //   ],
  //   "description": "Log output to console"
  // }
  "Remix Loader": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rmxLoader",
    "body": [
      "import type { LoaderArgs } from \"@remix-run/node\"",
      "import { json } from \"@remix-run/node\"",
      "import { useLoaderData } from \"@remix-run/react\"",
      "",
      "export async function loader({request}: LoaderArgs) {",
      "  return json({});",
      "};",
      ""
    ]
  },
  "Remix Action": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rmxAction",
    "body": [
      "import type { ActionArgs } from \"@remix-run/node\"",
      "import { redirect, json } from \"@remix-run/node\"",
      "import { useActionData } from \"@remix-run/react\"",
      "",
      "export async function action({request}: ActionArgs) {",
      "  const formData = await request.formData();",
      "  $0",
      "};",
      ""
    ]
  },
  "Remix Route Component": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rmxComponent",
    "body": [
      "export default function $0() {",
      "  const data = useLoaderData<typeof loader>();",
      "",
      "  return null;",
      "}"
    ]
  },
  "Remix CatchBoundary": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rmxCatchBoundary",
    "body": [
      "export function CatchBoundary() {",
      "  const caught = useCatch();",
      "",
      "  if (caught.status === 404) {",
      "    return (",
      "      <div>",
      "        Not found",
      "      </div>",
      "    );",
      "  }",
      "",
      "  throw new Error(`Unexpected caught response with status: ${caught.status}`);",
      "}"
    ]
  },

  "Remix ErrorBoundary": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rmxErrorBoundary",
    "body": [
      "export function ErrorBoundary({ error }: { error: Error }) {",
      "  console.error(error);",
      "",
      "  return (",
      "    <div>",
      "      An unexpected error occurred: {error.message}",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

keybindings.json

[
  {
    "comment": "This is just really handy. I use it all the time in Atom.",
    "key": "shift+cmd+\\",
    "command": "workbench.files.action.focusFilesExplorer"
  },
  {
    "comment": "Because I want enter to open the file, I need some way to rename it, this seemed as good as any other method. 'm' for 'move'",
    "key": "m",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
  },
  {
    "comment": "This allows me to open the file on enter instead which makes more sense to me.",
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
  },
  {
    "comment": "This makes my zoom behavior more like chrome",
    "key": "cmd+0",
    "command": "workbench.action.zoomReset"
  },
  {
    "comment": "This disables the enter key for autocomplete. Use tab instead. It's annoying when I'm typing quickly and want to go to the next line but have to first clear the autocomplete menu. So I just disabled the enter key here.",
    "key": "enter",
    "command": "-acceptSelectedSuggestionOnEnter",
    "when": "acceptSuggestionOnEnter && suggestWidgetVisible && suggestionMakesTextEdit && textInputFocus"
  },
  {
    "comment": "This disables the tab key for autocomplete. Instead we have another one which only applies when not in snippet mode.",
    "key": "tab",
    "command": "-acceptSelectedSuggestion",
    "when": "suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "tab",
    "command": "acceptSelectedSuggestion",
    "when": "suggestWidgetVisible && textInputFocus && !editorTabMovesFocus && !inSnippetMode"
  },
  {
    "key": "shift+cmd+space",
    "command": "editor.action.triggerParameterHints",
    "when": "editorHasSignatureHelpProvider && editorTextFocus"
  },
  {
    "key": "shift+cmd+space",
    "command": "-editor.action.triggerParameterHints",
    "when": "editorHasSignatureHelpProvider && editorTextFocus"
  },
  {
    "key": "cmd+a",
    "command": "explorer.newFile",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "shift+cmd+a",
    "command": "explorer.newFolder",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "ctrl+w",
    "command": "expand_region",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+w",
    "command": "undo_expand_region",
    "when": "editorTextFocus && editorHasSelection"
  },
  {
    "key": "cmd+shift+d",
    "when": "editorTextFocus",
    "command": "-editor.action.copyLinesDownAction"
  }
]

@EQuimper
Copy link

EQuimper commented May 24, 2018

Hey @kentcdodds nice list :) Hope this is ok I wrote something here :) You should check this one out https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync This let you have your setting in a private gist and when you change machine etc you get all back :)

@palashmon
Copy link

palashmon commented May 24, 2018

Hi @kentcdodds,

  • wmaurer.join-lines

This extension is no longer required, as a Join Lines command has been built into Visual Studio Code:

Join Lines

You can open Keyboard Shortcuts (Ctrl+K Ctrl+S) and bind editor.action.joinLines to a shortcut of your choice.

@jfsiii
Copy link

jfsiii commented May 24, 2018

GitLens

Import Cost

colorize

image

Code Outline

screen shot 2018-05-24 at 12 07 37 pm

@esausilva
Copy link

esausilva commented May 24, 2018

If you have multiple computers you would want to sync vs code settings https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

ES6/ES7 syntax coloring https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

To colorize brackets https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

React code snippets https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Take pretty code screenshots to share on Twitter https://marketplace.visualstudio.com/items?itemName=pnp.polacode

@Rolando-Barbella
Copy link

Rolando-Barbella commented May 25, 2018

  • ES7 React/Redux/GraphQL/React-Native snippets
  • Import Cost
  • Git History
  • Git History Diff
  • Markdown All in One

@sagirk
Copy link

sagirk commented Jun 14, 2018

@kentcdodds @esausilva

Replace

dzannotti.vscode-babel-coloring

With

mgmcdermott.vscode-language-babel

@esausilva
Copy link

esausilva commented Jun 14, 2018

@sagirk Thanks, I will try it

@detrohutt detrohutt added the packages Thoughts/opinions/personal use of 3rd party packages/libraries/frameworks label Jun 21, 2018
@michaelgmcd
Copy link

michaelgmcd commented Jul 16, 2018

Hey @kentcdodds, just seeing this now. Awesome that you're using my vscode-language-babel package. Let me know if you (or anyone else on this thread) run into any issues with it!

@amb101
Copy link

amb101 commented Sep 12, 2018

This one extension is a game changer for console.log





@talves
Copy link

talves commented Jan 14, 2019

To generate this list on Windows (copies list to clipboard)

const {execSync, spawn} = require('child_process')

const result = execSync('code --list-extensions')

const list = String(result)
  .split('\n')
  .filter(Boolean)
  .map(
    x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
  )
  .join('\n')

const proc = spawn('clip')
proc.stdin.write(list)
proc.stdin.end()

@Oluwasetemi
Copy link

Oluwasetemi commented Jan 24, 2019

I have been looking for this. Can you please help me with some light on whats is going on under the hood.
@talves

@Ridermansb
Copy link

Ridermansb commented Mar 29, 2019

@kentcdodds and about this...

Screen Shot 2019-03-29 at 12 28 32

@matchai
Copy link

matchai commented Mar 29, 2019

@Ridermansb It looks like he's using Rocket:
https://matthewpalmer.net/rocket/

@tylersssss
Copy link

tylersssss commented May 11, 2019

@kentcdodds Can you share the vscode snippet you used in your remote workshop for useReducer?

@kentcdodds
Copy link
Owner Author

kentcdodds commented May 11, 2019

Hi @tjshipe! Updated 💯

@mohammedzamakhan
Copy link

mohammedzamakhan commented Oct 4, 2019

@kentcdodds instead of using comments in VS Code settings.json, you can actually create multiple workspaces and have workspace specific settings.json

@kentcdodds
Copy link
Owner Author

kentcdodds commented Oct 4, 2019

That requires the settings be inside the project right? The thing is that sometimes when I'm in the project I want it to have my livestream settings (like when I'm livestreaming) and other times I want it to have my normal settings.

@mohammedzamakhan
Copy link

mohammedzamakhan commented Oct 4, 2019

No, its doesn't require you to have settings inside the project. You can add/remove folders from a workspace. Once you create a workspace (file format: .code-workspace) and keep the workspace file in which ever folder you want on your system. You can then go to workspace settings by "Preferences: Open Workspace Settings"

@kentcdodds
Copy link
Owner Author

kentcdodds commented Oct 4, 2019

Oh, I see. Thanks for letting me know. I think I'll stick with my current workflow because I think it's a bit faster/easier :) Thanks though!

@enzime4u
Copy link

enzime4u commented Oct 16, 2019

Hi there, in this article [https://kentcdodds.com/blog/react-hooks-pitfalls] what theme are you using for the code snippets ? thank you ?

@kentcdodds
Copy link
Owner Author

kentcdodds commented Oct 16, 2019

It's inspired by the Night Owl theme.

@ashtonlance
Copy link

ashtonlance commented Nov 6, 2019

It's inspired by the Night Owl theme.

Do you mind sharing it?

@kentcdodds
Copy link
Owner Author

kentcdodds commented Nov 6, 2019

It's open source: https://npm.im/prism-react-renderer

It's one of the baked in themes

@DatXN
Copy link

DatXN commented Feb 16, 2020

Hi Kent, what are you using for in-line styled component syntax highlighting?

@douglance
Copy link

douglance commented Apr 27, 2020

@kentcdodds What is the test explorer window you that you're using in your egghead.io videos?

Edit: Oh nevermind. It's CodeSandbox, not VS Code.

@michaelgmcd
Copy link

michaelgmcd commented Apr 27, 2020

@DatXN vscode-language-babel supports inline styled components syntax highlighting

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
packages Thoughts/opinions/personal use of 3rd party packages/libraries/frameworks
Projects
None yet
Development

No branches or pull requests