VS Code

settings.json

{
  "workbench.colorTheme": "Catppuccin Mocha",
  "workbench.startupEditor": "none", // <== Não abrir o arquivo de boas vindas
  "editor.fontSize": 14, // <== Tamanho da fonte
  "terminal.integrated.fontSize": 14,  // <== Tamanho da fonte do terminal integrado
  "window.zoomLevel": 1,
  
  "typescript.preferences.importModuleSpecifier": "non-relative",

  "explorer.confirmDelete": false, // <== Não exibir modal de confirmação ao excluir arquivos
  "explorer.compactFolders": false, // <== Não compactar pastas caso tenha varias pastas vazias apenas com subpastas
  "explorer.confirmDragAndDrop": false, // <== Não exibir modal de confirmação ao arrastar arquivos
  
  "files.autoSave": "afterDelay", // <== Salvar automaticamente
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  // "editor.formatOnSave": true,
  "tailwindCSS.experimental.classRegex": [ // <== Regex do TailwindCSS para funcionar com tv (tailwind-variants) e cva (class variance authority)
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],

  "cSpell.language": "en,pt,pt_BR", // <== Extensão Code Spell Checker para ingles e pt-BR
  "cSpell.enableFiletypes": [ // <== Extensão Code Spell Checker linguagens par checar
    "!c",
    "!cpp",
    "!csharp",
    "!go",
    "!handlebars",
    "!haskell",
    "!jade",
    "!java",
    "!jupyter",
    "!latex",
    "!php",
    "!pug",
    "!python",
    "!restructuredtext",
    "!rust",
    "!scala",
    "!scss",
    "!swift"
  ],

  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },

  "powermode.presets": "flames",  // <== Extensão do powermode pra solta fogo
  "powermode.enabled": true, // <== Extensão do powermode habilitada
  "powermode.combo.timeout": 1, // <== Extensão do powermode timeout da animação
  "powermode.shake.intensity": 1, // <== Extensão do powermode intensidade
}

typescript.json

{
	// Place your snippets for typescript 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"functionTypescript": {
		"prefix": "fn",
		"body": [
		  "export const ${1:${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/downcase}${2:/capitalize}/g}} = (value: string) => {",
		  "\treturn value",
		  "}"
		  ""
		],
		"description": "Create Function Typescript"
	},
	"functionTypescriptWithProps": {
		"prefix": "fnp",
		"body": [
		  "interface ${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}Props {",
		  "\tvalue: string",
		  "}",
		  "",
		  "export const ${1:${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/downcase}${2:/capitalize}/g}} = ({ value }: ${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}Props) => {",
		  "\treturn value",
		  "}"
		  ""
		],
		"description": "Create Function Typescript with props"
	},
}

typescriptreact.json

{
	// Place your snippets for typescriptreact 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	"Print to console": {
	"prefix": "log",
	"body": [
		"console.log('$1')",
		"$2"
	],
	"description": "Log output to console"
	},
	"functionalComponentTypescriptWithoutProps": {
		"prefix": "rfc",
		"body": [
		  "import React from 'react'",
		  "",
		  "export const ${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}: React.FC = () => {",
		  "\treturn (",
		  "\t\t<>",
		  "\t\t\t$1",
		  "\t\t</>",
		  "\t)",
		  "}"
		  ""
		],
		"description": "Create ReactJS Functional Component Typescript without props"
	},
	"functionalComponentTypescriptWithProps": {
		"prefix": "rfcp",
		"body": [
		  "import React from 'react'",
		  "",
		  "export interface ${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}Props {",
		  "\t$1",
		  "}",
		  "",
		  "export const ${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}: React.FC<${TM_FILENAME_BASE/(^\\w+)|(-)|(\\w+)/${1:/pascalcase}${3:/pascalcase}/g}Props> = ({ }) => {",
		  "\treturn (",
		  "\t\t<>",
		  "\t\t$2",
		  "\t\t</>",
		  "\t)",
		  "}"
		  ""
		],
		"description": "Create ReactJS Functional Component Typescript with props"
	},
	"contextTypescript": {
		"prefix": "ctx",
		"body": [
		  "import { PropsWithChildren, createContext, useContext, useState } from 'react'",
		  "",
		  "export interface $1ContextProps {",
		  "\t$2",
		  "}",
		  "",
		  "const $1Context = createContext<$1ContextProps>({} as $1ContextProps)",
		  "export const $1Provider: React.FC<PropsWithChildren> = ({ children }) => {",
		  "\tconst [isLoading, setIsLoading] = useState(false)",
		  "", 
		  "\treturn (",
		  "\t\t<$1Context.Provider",
		  "\t\t\tvalue={{",
		  "\t\t\t\tisLoading,",
		  "\t\t\t}}",
		  "\t\t\t>",
		  "\t\t\t\t{children}",
		  "\t\t</$1Context.Provider>",
		  "\t)",
		  "}",
		  "",
		  "export const use$1 = () => {",
		  "\tconst context = useContext($1Context)",
		  "",
		  "\tif (context === undefined)",
		  "\t\tthrow new Error('use$1 must be used within a $1Provider')",
		  "\treturn context",
		  "",
		  "}",
		  "",
		],
		"description": "Create ReactJS Context Provider Typescript"
	},
}