Skip to main content
Home Theme VS Code Meow Fresh and clean user interface, code with no distraction. Meow in the darkness.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #B6BBC4 activityBar.background #03040f activityBar.border #1b1b1b activityBar.foreground #B6BBC4 activityBarBadge.background #ff6188 activityBarBadge.foreground #03040f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.block.css, comment.block.html, comment.line.double-dash.sql, punctuation.separator.namespace.xml, meta.tag.preprocessor.xml, punctuation.accessor.ts, punctuation.separator.key-value.ts #454545 italic keyword.operator.type.ts, punctuation.accessor.optional.ts, constant.numeric.decimal.point.c, invalid.deprecated.semicolon.python, keyword.operator.arithmetic.python, keyword.operator.assignment.cpp, keyword.operator.assignment.cs, keyword.operator.assignment.python, keyword.operator.assignment.shell, keyword.operator.assignment.tsx, keyword.operator.comparison.tsx, keyword.operator.custom.infix.swift, keyword.operator.logical.tsx, keyword.operator.pipe.shell, keyword.operator.relational.tsx, keyword.operator.ternary.swift, keyword.operator.ternary.tsx, keyword.operator.type.annotation.tsx, keyword.operator.type.tsx, keyword.other.r, punctuation.accessor.cs, punctuation.accessor.optional.tsx, punctuation.accessor.tsx, punctuation.comma.rust, punctuation.definition.section.case-statement.js, punctuation.other.colon.go, punctuation.other.comma.go, punctuation.section.function.begin.python, punctuation.separator.array.json, punctuation.separator.colon.cs, punctuation.separator.colon.inheritance.cpp, punctuation.separator.colon.python, punctuation.separator.colon.range-based.cpp, punctuation.separator.comma.cs, punctuation.separator.comma.js, punctuation.separator.comma.tsx, punctuation.separator.delimiter.c, punctuation.separator.delimiter.comma.cpp, punctuation.separator.delimiter.java, punctuation.separator.delimiter.php, punctuation.separator.key-value.css, punctuation.separator.key-value.html, punctuation.separator.key-value.ini, punctuation.separator.key-value.js, punctuation.separator.key-value.mapping.yaml, punctuation.separator.key-value.tsx, punctuation.separator.parameter.js, punctuation.separator.parameter.tsx, punctuation.separator.period.python, punctuation.separator.regex.alternation.shell, punctuation.separator.semicolon.range, punctuation.semi.rust, punctuation.terminator.expression.php, punctuation.terminator.java, punctuation.terminator.rule.css, punctuation.terminator.statement.c, punctuation.terminator.statement.case.shell, punctuation.terminator.statement.cpp, punctuation.terminator.statement.cs, punctuation.terminator.statement.js, punctuation.terminator.statement.semicolon.shell, punctuation.terminator.statement.tsx, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, keyword.operator.combinator.css, keyword.operator.bitwise.shift.cpp, meta.embedded.block.json, punctuation.separator.list.comma.css, keyword.operator.type.annotation.js.jsx, keyword.operator.assignment.js.jsx, keyword.operator.logical.js.jsx, keyword.operator.ternary.js.jsx, punctuation.accessor.js.jsx, keyword.operator.comparison.js.jsx, keyword.operator.assignment.compound.tsx, keyword.operator.arithmetic.tsx, storage.type.function.arrow.tsx, keyword.operator.assignment.js, punctuation.separator.period.java, punctuation.separator.java, punctuation.other.period.go, keyword.operator.pattern.css, punctuation.accessor.js, meta.object.member.tsx, meta.embedded.expression.tsx, punctuation.separator.key-value.scss, punctuation.separator.delimiter.scss, punctuation.terminator.rule.scss, keyword.operator.scss, keyword.operator.css, keyword.operator.assignment.ts, punctuation.separator.comma.ts, keyword.operator.type.annotation.ts, keyword.operator.logical.js, keyword.operator.comparison.js, storage.type.function.arrow.js, punctuation.accessor.optional.js, punctuation.destructuring.js, keyword.operator.spread.js, meta.function.method.with-arguments.ruby, keyword.operator.comparison.ruby, keyword.operator.arithmetic.ruby, punctuation.separator.object.ruby, punctuation.definition.constant.ruby, keyword.operator.assignment.ruby, support.function.kernel.lambda.ruby, punctuation.separator.method.ruby, keyword.operator.other.ruby, punctuation.separator.namespace.ruby, punctuation.terminator.dart, punctuation.dot, punctuation.comma, keyword.operator.ternary, keyword.operator.assignment, keyword.operator.comparison, constant.numeric.decimal.point.go, punctuation.terminator.go, punctuation.separator.map.value.yaml, punctuation.definition.section.case-statement.tsx, meta.at-rule.include.scss, punctuation.separator.argument-label.swift, storage.type.function.arrow.ts, keyword.operator.logical.ts, punctuation.separator.parameter.ts, keyword.operator.relational.ts, keyword.operator.arithmetic.ts, punctuation.definition.section.case-statement.ts, punctuation.terminator.statement.ts, keyword.operator.assignment.go
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Meow | Coding Theme
breadcrumb.background
#03040f
breadcrumb.focusForeground #ff6188
button.background #ff6188
button.border #03040f
button.foreground #03040f
button.hoverBackground #ff6188
commandCenter.activeBackground #060d18b2
commandCenter.activeBorder #03040f
commandCenter.background #060d18b2
commandCenter.border #060d18b2
commandCenter.inactiveBorder #060d18b2
debugIcon.breakpointForeground #FF4B91
dropdown.background #03040f
dropdown.listBackground #03040f
editor.background #03040f
editor.findMatchBackground #4e534d94
editor.findMatchHighlightBackground #53575350
editor.foreground #B6BBC4
editor.selectionBackground #B6BBC420
editorBracketHighlight.foreground1 #ff6188
editorBracketHighlight.foreground2 #ff6188
editorBracketHighlight.foreground3 #ff6188
editorBracketHighlight.foreground4 #ff6188
editorBracketHighlight.foreground5 #ff6188
editorBracketHighlight.foreground6 #ff6188
editorBracketHighlight.unexpectedBracket.foreground #3DC2EC
editorBracketMatch.background #2B2C28
editorBracketMatch.border #2B2C28
editorCursor.background #ff6188
editorCursor.foreground #B6BBC4
editorError.foreground #FE5D9F
editorGroup.border #1b1b1b
editorGroupHeader.tabsBackground #03040f
editorIndentGuide.activeBackground1 #45474B
editorIndentGuide.activeBackground2 #303030
editorIndentGuide.activeBackground3 #303030
editorIndentGuide.activeBackground4 #303030
editorIndentGuide.activeBackground5 #303030
editorIndentGuide.activeBackground6 #303030
editorIndentGuide.background1 #151515
editorIndentGuide.background2 #131515
editorIndentGuide.background3 #131515
editorIndentGuide.background4 #131515
editorIndentGuide.background5 #131515
editorIndentGuide.background6 #131515
editorLineNumber.activeForeground #ff6188
editorLineNumber.foreground #45474B
editorSuggestWidget.background #03040f
editorSuggestWidget.focusHighlightForeground #03040f
editorSuggestWidget.highlightForeground #ff6188
editorWarning.foreground #FF9130
editorWidget.background #03040f
editorWidget.border #1b1b1b
editorWidget.foreground #B6BBC4
extensionButton.foreground #03040f
extensionButton.prominentBackground #ff6188
extensionButton.separator #03040f
extensionIcon.starForeground #FFD166
extensionIcon.verifiedForeground #4CC9F0
focusBorder #03040f
input.background #060d18b2
inputOption.activeBackground #ff6188
inputOption.activeBorder #1b1b1b
inputOption.hoverBackground #ff6188
inputValidation.errorForeground #FF4B91
inputValidation.infoForeground #4CC9F0
inputValidation.warningForeground #FF9130
list.activeSelectionBackground #060d18b2
list.errorForeground #FF4B91
list.hoverBackground #060d18b2
list.inactiveSelectionBackground #060d18b2
menu.background #03040f
menu.border #2B2C28
menu.foreground #B6BBC4
menu.selectionBackground #ff6188
menu.selectionForeground #03040f
menu.separatorBackground #2B2C28
menubar.selectionBackground #03040f
menubar.selectionForeground #B6BBC4
minimap.errorHighlight #FF4B91
notificationCenter.border #1b1b1b
notificationCenterHeader.foreground #ff6188
notificationLink.foreground #4361EE
notifications.background #03040f
notifications.border #1b1b1b
notificationsErrorIcon.foreground #FF4B91
notificationsInfoIcon.foreground #4CC9F0
notificationsWarningIcon.foreground #FF9130
notificationToast.border #1b1b1b
panel.background #03040f
panel.border #2B2C28
profileBadge.background #ff6188
profileBadge.foreground #B6BBC4
quickInput.background #03040f
quickInputList.focusBackground #ff6188
quickInputList.focusForeground #03040f
scrollbarSlider.activeBackground #060d18b2
scrollbarSlider.background #060d18b2
scrollbarSlider.hoverBackground #060d18b2
search.resultsInfoForeground #d3d0cb
settings.focusedRowBorder #1b1b1b
sideBar.background #03040f
sideBar.border #1b1b1b
sideBar.foreground #B6BBC4
sideBarSectionHeader.background #03040f
sideBarSectionHeader.border #1b1b1b
sideBarSectionHeader.foreground #B6BBC4
statusBar.background #03040f
statusBar.debuggingBackground #ff6188
statusBar.debuggingForeground #03040f
statusBar.foreground #B6BBC4
statusBarItem.errorBackground #03040f
statusBarItem.errorForeground #FF4B91
statusBarItem.errorHoverForeground #FF4B91
statusBarItem.remoteBackground #03040f
statusBarItem.remoteForeground #ff6188
tab.activeForeground #B6BBC4
tab.border #03040f
tab.inactiveBackground #03040f
terminalCursor.foreground #ff6188
titleBar.activeBackground #03040f
titleBar.activeForeground #B6BBC4
titleBar.border #03040f
titleBar.inactiveBackground #03040f
titleBar.inactiveForeground #B6BBC4 constant.language.boolean.yaml, entity.name.tag.css, entity.name.tag.html, entity.name.tag.tsx, entity.name.tag.wildcard.css, entity.name.tag.yaml, entity.other.keyframe-offset.css, keyword.control.as.tsx, keyword.control.at-rule.charset.css, keyword.control.at-rule.container.css, keyword.control.at-rule.document.css, keyword.control.at-rule.font-face.css, keyword.control.at-rule.import.css, keyword.control.at-rule.import.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.layer.css, keyword.control.at-rule.media.css, keyword.control.at-rule.namespace.css, keyword.control.at-rule.page.css, keyword.control.at-rule.supports.css, keyword.control.branch.swift, keyword.control.c, keyword.control.case.shell, keyword.control.catch.java, keyword.control.container.css, keyword.control.directive.define.c, keyword.control.directive.include.c, keyword.control.directive.include.cpp, keyword.control.done.shell, keyword.control.do.shell, keyword.control.document.css, keyword.control.else.php, keyword.control.else.shell, keyword.control.esac.shell, keyword.control.export.tsx, keyword.control.fi.shell, keyword.control.flow.js, keyword.control.flow.python, keyword.control.for.shell, keyword.control.from.tsx, keyword.control.go, keyword.control.if.php, keyword.control.if.shell, keyword.control.import.css, keyword.control.import.go, keyword.control.import.python, keyword.control.import.tsx, keyword.control.in.shell, keyword.control.java, keyword.control.keyframes.css, keyword.control.layer.css, keyword.control.logical.and.media.css, keyword.control.loop.js, keyword.control.loop.tsx, keyword.control.media.css, keyword.control.new.java, keyword.control.new.tsx, keyword.control.page.css, keyword.control.return.cpp, keyword.control.r, keyword.control.rust, keyword.control.shell, keyword.control.supports.css, keyword.control.switch.js, keyword.control.then.shell, keyword.control.try.java, keyword.control.trycatch.js, keyword.control.trycatch.tsx, keyword.function.go, keyword.map.go, keyword.operator.expression.new.cs, keyword.operator.logical.and.media.css, keyword.operator.new.js, keyword.operator.new.tsx, keyword.operator.pattern.case.default.shell, keyword.other.DDL.create.II.sql, keyword.other.DML.sql, keyword.other.create.sql, keyword.other.declaration-specifier.swift, keyword.other.directive.using.cs, keyword.other.fn.rust, keyword.other.import.java, keyword.other.new.php, keyword.other.sql, markup.heading.markdown, punctuation.definition.subshell.single.shell, punctuation.definition.tag.begin.html, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.html, punctuation.definition.tag.end.tsx, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, source.ignore, source.ini, storage.modifier.abstract.cs, storage.modifier.async.cs, storage.modifier.const.cs, storage.modifier.extern.cs, storage.modifier.internal.cs, storage.modifier.js, storage.modifier.mut.rust, storage.modifier.new.cs, storage.modifier.php, storage.modifier.private.cs, storage.modifier.protected.cs, storage.modifier.public.cs, storage.modifier.readonly.cs, storage.modifier.ref.cs, storage.modifier.sealed.cs, storage.modifier.specifier.const.cpp, storage.modifier.specifier.functional.post-parameters.override.cpp, storage.modifier.specifier.functional.pre-parameters.virtual.cpp, storage.modifier.static.cs, storage.modifier.tsx, storage.modifier.unsafe.cs, storage.modifier.volatile.cs, storage.type.built-in.primitive.c, storage.type.class.cpp, storage.type.class.cs, storage.type.class.js, storage.type.class.php, storage.type.enum.tsx, storage.type.function.js, storage.type.function.php, storage.type.function.python, storage.type.function.shell, storage.type.function.tsx, storage.type.interface.tsx, storage.type.java, storage.type.modifier.access.control.public.cpp, storage.type.namespace.cs, storage.type.rust, storage.type.struct.c, storage.type.tsx, support.function.builtin.shell, support.function.construct.output.php, support.type.property-name.json, variable.language.this.tsx, storage.type.type.tsx, storage.type.class.tsx, storage.type.js, keyword.control.conditional.js, keyword.package.go, keyword.type.go, keyword.struct.go, keyword.var.go, keyword.other.using.directive.cpp, storage.modifier.java, storage.modifier.virtual.cpp, keyword.control.conditional.tsx, keyword.control.try.cpp, keyword.control.catch.cpp, keyword.operator.delete.cpp, storage.type.built-in.cpp, keyword.operator.wordlike.cpp, keyword.operator.assignment.r, keyword.operator.comparison.r, keyword.operator.assignment.equal.rust, keyword.operator.comparison.rust, keyword.operator.c, keyword.operator.comparison.c, keyword.operator.assignment.c, keyword.control.import.js.jsx, keyword.control.from.js.jsx, keyword.control.export.js.jsx, entity.name.tag.js.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, storage.modifier.async.tsx, keyword.control.flow.tsx, variable.other.assignment.shell, keyword.control.export.js, keyword.other.definition.ini, punctuation.definition.typeparameters.begin.js.jsx, punctuation.definition.typeparameters.end.js.jsx, keyword.operator.expression.of.tsx, entity.other.keyframe-offset.percentage.css, support.type.object.module.js, keyword.control.at-rule.use.scss, keyword.control.operator, keyword.control.at-rule.include.scss, keyword.control.export.ts, storage.type.ts, meta.object-literal.key.ts, punctuation.definition.block.ts, meta.brace.square.ts, keyword.control.at-rule.import.scss, keyword.control.import.ts, keyword.control.from.ts, storage.type.interface.ts, storage.modifier.async.js, keyword.operator.expression.typeof.js, keyword.control.lua, keyword.control.def.ruby, keyword.control.ruby, keyword.control.class.ruby, keyword.control.pseudo-method.ruby, keyword.control, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, storage.type.primitive, support.class.dart, storage.modifier, entity.name.tag.reference.scss, meta.at-rule.media.header.css, keyword.const.go, keyword.go.mod, go.mod, go.sum, keyword.operator.address.go, keyword.control.flow.js.jsx, keyword.operator.expression.keyof.tsx, punctuation.section.property-list.begin.bracket.curly.css, entity.name.tag.localname.xml, punctuation.definition.tag.xml, entity.name.tag.xml, storage.type.class.ts, storage.type.enum.ts, keyword.operator.expression.keyof.ts, keyword.operator.expression.typeof.ts, punctuation.section.block.begin.bracket.curly.class.cpp, punctuation.section.block.end.bracket.curly.class.cpp, meta.head.function.definition.cpp, punctuation.section.block.end.bracket.curly.function.definition.cpp #ff6188 —
keyword.control.default.tsx, storage.type.property.tsx, storage.type.namespace.directive.cpp, storage.type.primitive.java, storage.type.built-in.primitive.cpp, keyword.control.default.js.jsx, storage.modifier.async.js.jsx, keyword.control.default.js, storage.type.class.jsdoc, support.function.misc.scss, keyword.operator.expression.in.tsx, keyword.operator.rest.tsx, keyword.operator.expression.instanceof.tsx, storage.type.function.ts, keyword.control.as.ts, storage.modifier.async.ts, keyword.operator.expression.of.ts #ff6188 italic
entity.name.function.preprocessor.c, entity.name.variable.field.cs, entity.name.variable.local.cs, entity.name.variable.parameter.cs, entity.other.attribute-name.class.css, invalid.deprecated.entity.other.attribute-name.html, entity.other.attribute-name.id.css, entity.name.type.module.tsx, keyword.operator.arithmetic.go, keyword.operator.arithmetic.js, keyword.operator.arithmetic.r, keyword.operator.arithmetic.shell, keyword.operator.assignment.java, keyword.operator.assignment.php, keyword.operator.assignment.rust, keyword.operator.class.php, keyword.operator.comparison.php, keyword.operator.increment.js, keyword.operator.increment.tsx, keyword.operator.key.php, keyword.operator.redirect.shell, keyword.operator.relational.js, keyword.operator.string.php, meta.block.c, meta.body.function.definition.cpp, meta.function-call.arguments.python, meta.method.body.java, meta.method-call.java, source.cs, source.python, source.r, source.swift, storage.modifier.reference.cpp, variable, variable.object.property.tsx, variable.other.enummember.tsx, variable.other.rust, keyword.type.void.cs, entity.name.function.sql, keyword.operator.spread.tsx, entity.other.attribute-name.html, support.function.lua, source.lua, keyword.operator.lua, source.ruby, source.dart, keyword.operator.comparison.go, keyword.operator.increment.go, variable.other.go, variable.other.assignment.go, keyword.operator.expression.infer.tsx, string.quoted.double.tsx, string.template.tsx, string.template.ts #ECB365 —
constant.numeric.decimal.tsx, string, string.quoted.double.css, string.quoted.double.html, string.quoted.double.rust, string.quoted.double.single-line.swift, string.quoted.double.yaml, string.quoted.single.css, string.quoted.single.html, string.quoted.single.tsx, string.unquoted.plain.out.yaml, source.ini, variable.parameter.url.css, constant.numeric.css, meta.property-value.css, support.constant.font-name.css, support.constant.property-value.css, constant.numeric.decimal.ts, constant.language.boolean.true.ts, constant.language.boolean.false.ts, string.quoted.double.ts, string.template.ts #98c379 —
storage.type.sql #98c379 italic
constant.character.entity.named.alpha.html, constant.character.entity.named.amp.html, constant.character.entity.named.apos.html, constant.character.entity.named.beta.html, constant.character.entity.named.cent.html, constant.character.entity.named.copy.html, constant.character.entity.named.deg.html, constant.character.entity.named.delta.html, constant.character.entity.named.divide.html, constant.character.entity.named.emsp.html, constant.character.entity.named.ensp.html, constant.character.entity.named.euro.html, constant.character.entity.named.gamma.html, constant.character.entity.named.gt.html, constant.character.entity.named.lt.html, constant.character.entity.named.nbsp.html, constant.character.entity.named.omega.html, constant.character.entity.named.pi.html, constant.character.entity.named.plusmn.html, constant.character.entity.named.pound.html, constant.character.entity.named.quot.html, constant.character.entity.named.reg.html, constant.character.entity.named.thinsp.html, constant.character.entity.named.times.html, constant.character.entity.named.yen.html, entity.name.command.shell, entity.name.function.c, entity.name.function.definition.cpp, entity.name.function.definition.special.member.destructor.cpp, entity.name.function.go, entity.name.function.js, entity.name.function.php, entity.name.function.python, entity.name.function.r, entity.name.function.rust, entity.name.function.shell, entity.name.function.support.builtin.go, entity.name.type.alias.tsx, entity.name.type.class.cpp, entity.name.type.class.cs, entity.name.type.class.java, entity.name.type.class.js, entity.name.type.class.php, entity.name.type.enum.tsx, entity.name.type.go, entity.name.type.interface.tsx, entity.name.type.namespace.cs, entity.name.type.package.go, entity.name.namespace.cpp, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.tsx, entity.other.inherited-class.js, markup.raw.block.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.function-call.generic.python, punctuation.definition.block.sequence.item.yaml, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, source.c, storage.modifier.import.java, storage.modifier.override.cs, storage.modifier.virtual.cs, string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.cpp, support.class.php, support.class.promise.tsx, support.constant.media.css, support.function.transform.css, support.function.any-method.swift, support.function.array.php, support.function.constructor.php, support.function.construct.php, support.function.file.php, support.function.image.php, support.function.json.php, support.function.magic.php, support.function.math.php, support.function.misc.css, support.function.string.php, support.function.swift, support.function.url.css, source.sql, variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.js.jsx, variable.parameter.keyframe-list.css, entity.name.type.cpp, entity.name.type.class.tsx, entity.name.type.class.ruby, entity.name.type.interface.ts, entity.name.function.member.cpp, entity.name.function.call.cpp, entity.name.function.tsx, entity.name.function.js.jsx, entity.name.function.scss, entity.name.function, entity.name.function.lua, entity.name.function.ruby, entity.other.attribute-name.css, entity.other.attribute-name.js.jsx, constant.language.import-export-all.tsx, meta.embedded.block.scss, keyword.declaration.dart, constant.language.go.sum, support.type.property-name.media.css, variable.other.readwrite.alias.ts, variable.other.property.ts, entity.name.type.class.ts, variable.other.readwrite.alias.js, entity.name.type.enum.ts #3dc2ec —
entity.other.attribute-name.pseudo-element.css, entity.other.inherited-class.ruby #3dc2ec italic
entity.name.function.cs, entity.name.function.java, entity.name.function.macro.rust, entity.name.function.support.go, entity.name.variable.property.cs, fenced_code.block.language.markdown, keyword.control.type.tsx, keyword.operator.expression.typeof.tsx, keyword.operator.logical.shell, meta.parameter-expansion, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.variable.shell, support.class.promise.js, support.function.builtin.python, support.function.r, support.variable.property.js, support.variable.property.tsx, variable.other.property.tsx, comment.line.shebang.tsx, comment.line.shebang.js, meta.shebang.shell, variable.other.object.access.cpp, punctuation.separator.dot-access.cpp, variable.other.property.js.jsx, variable.other.constant.property.tsx, support.function.library.lua, constant.language.lua, support.function.kernel.ruby, keyword.other.special-method.ruby, support.type.property-name.css, meta.property-name.css, constant.language.go.mod, entity.other.attribute-name.namespace.xml, entity.name.tag.namespace.xml, support.variable.property.ts #E76F51 —
markup.inline.raw.string.markdown, constant.language.ruby, constant.character.entity.tsx, entity.other.attribute.lua, support.class.ruby, storage.type.annotation, entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml, keyword.operator.new.ts #E76F51 italic
constant.language.null.tsx, constant.language.undefined.tsx, constant.numeric.decimal.cpp, constant.numeric.decimal.rust, constant.numeric.float.decimal.r, constant.numeric.integer.decimal.r, constant.numeric.integer.yaml, entity.name.type.cs, entity.name.type.parameter.cpp, entity.name.type.tsx, meta.object-literal.key.js, meta.var.expr.tsx, punctuation.bracket.angle.java, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, storage.type.generic.java, storage.type.modifier.access.public.cpp, storage.type.numeric.go, storage.type.object.array.java, storage.type.string.go, support.type.primitive.tsx, keyword.operator.ellipsis.go, keyword.other.default.destructor.cpp, keyword.type.int.cs, constant.numeric.decimal.c, constant.numeric.integer.shell, support.type.builtin.tsx, meta.structure.dictionary.value.json, entity.name.type.js.jsx, entity.name.type.module.js.jsx, storage.type.boolean.go, keyword.interface.go, storage.type.rune.go, meta.objectliteral.tsx, variable.other, entity.name.type.ts, support.type.primitive.ts, support.type.builtin.ts #6DA4AA —
constant.language.php, constant.numeric.decimal.cs, constant.numeric.decimal.go, constant.numeric.decimal.java, constant.numeric.decimal.js, constant.numeric.decimal.php, constant.numeric.integer.ruby, constant.numeric.integer.decimal.swift, constant.language.boolean.true.js.jsx, constant.language.boolean.false.js.jsx, constant.language.boolean.false.js, constant.language.boolean.true.js, meta.scope.logical-expression.shell, support.constant.std.php, keyword.operator.arithmetic.php, constant.language.boolean.go #B99470 —
markup.bold.markdown — bold
markup.italic.markdown — italic
comment.block.documentation.tsx, markup.strikethrough.markdown, markup.table.markdown, constant.numeric.float.lua, constant.other.symbol.ruby, constant.numeric.dart, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css #84A98C —
variable.css, variable.argument.css, constant.language.null.go, constant.language.null.js.jsx, constant.language.undefined.js.jsx, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx, constant.language.json, variable.scss, constant.character.entity.xml, meta.object-literal.key.tsx #858AE3 —
meta.embedded.expression.tsx #E5E5E570
variable.other.constant.tsx, variable.other.object.tsx, variable.parameter.tsx, variable.other.constant.ts, variable.other.object.ts, variable.other.constant.object.ts, variable.other.readwrite.ts #E29578 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method : "GET" ,
headers : { Accept : "application/json" } ,
} ) ;
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` ) ;
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method : "GET" ,
headers : { Accept : "application/json" } ,
} ) ;
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` ) ;
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}