diff --git a/init.lua b/init.lua
index 4eae8e7d..d93fe6e4 100644
--- a/init.lua
+++ b/init.lua
@@ -83,15 +83,27 @@ I hope you enjoy your Neovim journey,
 
 P.S. You can delete this when you're done too. It's your config now! :)
 --]]
-
--- Set <space> as the leader key
+-- Configure netrw to open on the right side
+vim.g.netrw_banner = 0 -- Hide the banner
+vim.g.netrw_liststyle = 3 -- Use a tree-like view
+vim.g.netrw_winsize = 20 -- Set explorer width
+vim.g.netrw_altv = 1 -- Open in right vertical split
+vim.opt.tabstop = 4
+vim.opt.shiftwidth = 4
+vim.opt.expandtab = true
+vim.opt.softtabstop = 4
+vim.opt.spell = true -- Enable spell checking
+vim.opt.spelllang = 'en' -- Set spell check language to English
+vim.opt.foldmethod = 'indent' -- Fold based on indentation
+vim.opt.foldlevel = 99 -- Open all folds by default
+vim.opt.foldenable = true -- Enable folding-- Set <space> as the leader key
 -- See `:help mapleader`
 --  NOTE: Must happen before plugins are loaded (otherwise wrong leader will be used)
 vim.g.mapleader = ' '
 vim.g.maplocalleader = ' '
 
 -- Set to true if you have a Nerd Font installed and selected in the terminal
-vim.g.have_nerd_font = false
+vim.g.have_nerd_font = true
 
 -- [[ Setting options ]]
 -- See `:help vim.opt`
@@ -166,6 +178,11 @@ vim.keymap.set('n', '<Esc>', '<cmd>nohlsearch<CR>')
 -- Diagnostic keymaps
 vim.keymap.set('n', '<leader>q', vim.diagnostic.setloclist, { desc = 'Open diagnostic [Q]uickfix list' })
 
+-- Map <leader>p to open netrw in a vertical split
+vim.keymap.set('n', '<leader>p', function()
+  vim.cmd 'vertical rightbelow Lexplore 25' -- Open on the right
+end, { desc = 'Open file explorer [P]' })
+
 -- Exit terminal mode in the builtin terminal with a shortcut that is a bit easier
 -- for people to discover. Otherwise, you normally need to press <C-\><C-n>, which
 -- is not what someone will guess without a bit more experience.
@@ -245,12 +262,16 @@ require('lazy').setup({
   { -- Adds git related signs to the gutter, as well as utilities for managing changes
     'lewis6991/gitsigns.nvim',
     opts = {
+      current_line_blame = true, -- Toggle with `:Gitsigns toggle_current_line_blame`
+      current_line_blame_opts = {
+        virt_text_pos = 'right_align', -- 'eol' | 'overlay' | 'right_align'
+      },
       signs = {
         add = { text = '+' },
-        change = { text = '~' },
-        delete = { text = '_' },
+        change = { text = 'Ͼ' },
+        delete = { text = '' },
         topdelete = { text = '‾' },
-        changedelete = { text = '~' },
+        changedelete = { text = 'Ͼ' },
       },
     },
   },
@@ -590,14 +611,14 @@ require('lazy').setup({
       })
 
       -- Change diagnostic symbols in the sign column (gutter)
-      -- if vim.g.have_nerd_font then
-      --   local signs = { ERROR = '', WARN = '', INFO = '', HINT = '' }
-      --   local diagnostic_signs = {}
-      --   for type, icon in pairs(signs) do
-      --     diagnostic_signs[vim.diagnostic.severity[type]] = icon
-      --   end
-      --   vim.diagnostic.config { signs = { text = diagnostic_signs } }
-      -- end
+      if vim.g.have_nerd_font then
+        local signs = { ERROR = '', WARN = '', INFO = '', HINT = '' }
+        local diagnostic_signs = {}
+        for type, icon in pairs(signs) do
+          diagnostic_signs[vim.diagnostic.severity[type]] = icon
+        end
+        vim.diagnostic.config { signs = { text = diagnostic_signs } }
+      end
 
       -- LSP servers and clients are able to communicate to each other what features they support.
       --  By default, Neovim doesn't support everything that is in the LSP specification.
@@ -618,7 +639,7 @@ require('lazy').setup({
       local servers = {
         -- clangd = {},
         -- gopls = {},
-        -- pyright = {},
+        pyright = {},
         -- rust_analyzer = {},
         -- ... etc. See `:help lspconfig-all` for a list of all the pre-configured LSPs
         --
@@ -639,7 +660,7 @@ require('lazy').setup({
                 callSnippet = 'Replace',
               },
               -- You can toggle below to ignore Lua_LS's noisy `missing-fields` warnings
-              -- diagnostics = { disable = { 'missing-fields' } },
+              diagnostics = { disable = { 'missing-fields' } },
             },
           },
         },
@@ -678,7 +699,32 @@ require('lazy').setup({
       }
     end,
   },
-
+  {
+    'pmizio/typescript-tools.nvim',
+    dependencies = { 'nvim-lua/plenary.nvim', 'neovim/nvim-lspconfig' },
+    opts = {
+      settings = {
+        tsserver_plugins = {
+          -- Add support for styled-components, remove if not needed
+          '@styled/typescript-styled-plugin',
+        },
+        -- Ensures proper Next.js support
+        tsserver_file_preferences = {
+          includeInlayParameterNameHints = 'all',
+          includeInlayVariableTypeHints = true,
+        },
+        tsserver_format_options = {
+          allowRenameOfImportPath = true,
+        },
+        complete_function_calls = true, -- Auto-complete function arguments
+      },
+    },
+    config = function()
+      require('typescript-tools').setup {
+        capabilities = require('cmp_nvim_lsp').default_capabilities(),
+      }
+    end,
+  },
   { -- Autoformat
     'stevearc/conform.nvim',
     event = { 'BufWritePre' },
@@ -714,10 +760,10 @@ require('lazy').setup({
       formatters_by_ft = {
         lua = { 'stylua' },
         -- Conform can also run multiple formatters sequentially
-        -- python = { "isort", "black" },
+        python = { 'isort', 'black' },
         --
         -- You can use 'stop_after_first' to run the first available formatter from the list
-        -- javascript = { "prettierd", "prettier", stop_after_first = true },
+        javascript = { 'prettierd', 'prettier', stop_after_first = true },
       },
     },
   },
@@ -742,12 +788,12 @@ require('lazy').setup({
           -- `friendly-snippets` contains a variety of premade snippets.
           --    See the README about individual language/framework/plugin snippets:
           --    https://github.com/rafamadriz/friendly-snippets
-          -- {
-          --   'rafamadriz/friendly-snippets',
-          --   config = function()
-          --     require('luasnip.loaders.from_vscode').lazy_load()
-          --   end,
-          -- },
+          {
+            'rafamadriz/friendly-snippets',
+            config = function()
+              require('luasnip.loaders.from_vscode').lazy_load { paths = { vim.fn.stdpath 'config' .. '/snippets' } }
+            end,
+          },
         },
       },
       'saadparwaiz1/cmp_luasnip',
@@ -789,7 +835,7 @@ require('lazy').setup({
           -- Accept ([y]es) the completion.
           --  This will auto-import if your LSP supports it.
           --  This will expand snippets if the LSP sent a snippet.
-          ['<C-y>'] = cmp.mapping.confirm { select = true },
+          ['<Enter>'] = cmp.mapping.confirm { select = true },
 
           -- If you prefer more traditional completion keymaps,
           -- you can uncomment the following lines
@@ -900,9 +946,9 @@ require('lazy').setup({
     'nvim-treesitter/nvim-treesitter',
     build = ':TSUpdate',
     main = 'nvim-treesitter.configs', -- Sets main module to use for opts
-    -- [[ Configure Treesitter ]] See `:help nvim-treesitter`
+    -- [[  Configure Treesitter ]] See `:help nvim-treesitter`
     opts = {
-      ensure_installed = { 'bash', 'c', 'diff', 'html', 'lua', 'luadoc', 'markdown', 'markdown_inline', 'query', 'vim', 'vimdoc' },
+      ensure_installed = { 'bash', 'c', 'diff', 'html', 'javascript', 'typescript', 'lua', 'luadoc', 'markdown', 'markdown_inline', 'query', 'vim', 'vimdoc' },
       -- Autoinstall languages that are not installed
       auto_install = true,
       highlight = {
@@ -921,6 +967,19 @@ require('lazy').setup({
     --    - Show your current context: https://github.com/nvim-treesitter/nvim-treesitter-context
     --    - Treesitter + textobjects: https://github.com/nvim-treesitter/nvim-treesitter-textobjects
   },
+  {
+    'prichrd/netrw.nvim',
+    opts = {},
+    config = function()
+      require('netrw').setup {
+
+        mappings = {
+          -- String mappings are executed as vim commands
+          ['<Leader>p'] = ':Explore<CR>',
+        },
+      }
+    end,
+  },
 
   -- The following comments only work if you have downloaded the kickstart repo, not just copy pasted the
   -- init.lua. If you want these files, they are in the repository, so you can just download them and
@@ -932,11 +991,11 @@ require('lazy').setup({
   --  Uncomment any of the lines below to enable them (you will need to restart nvim).
   --
   -- require 'kickstart.plugins.debug',
-  -- require 'kickstart.plugins.indent_line',
-  -- require 'kickstart.plugins.lint',
+  require 'kickstart.plugins.indent_line',
+  require 'kickstart.plugins.lint',
   -- require 'kickstart.plugins.autopairs',
-  -- require 'kickstart.plugins.neo-tree',
-  -- require 'kickstart.plugins.gitsigns', -- adds gitsigns recommend keymaps
+  require 'kickstart.plugins.neo-tree',
+  require 'kickstart.plugins.gitsigns', -- adds gitsigns recommend keymaps
 
   -- NOTE: The import below can automatically add your own plugins, configuration, etc from `lua/custom/plugins/*.lua`
   --    This is the easiest way to modularize your config.
diff --git a/init.vim b/init.vim
new file mode 100644
index 00000000..e69de29b
diff --git a/snippets/css.json b/snippets/css.json
new file mode 100644
index 00000000..f03bf4d0
--- /dev/null
+++ b/snippets/css.json
@@ -0,0 +1,651 @@
+{
+    "align-items": {
+        "prefix": "ai",
+        "body": "align-items: ${1|flex-start,flex-end,center,baseline,stretch,start,end,self-start,self-end|};",
+        "description": "initial value: stretch"
+    },
+    "align-items: baseline": {
+        "prefix": "aib",
+        "body": "align-items: baseline;"
+    },
+    "align-items: center": {
+        "prefix": "aic",
+        "body": "align-items: center;"
+    },
+    "align-items: flex-start": {
+        "prefix": "aifs",
+        "body": "align-items: flex-start;"
+    },
+    "align-items: flex-end": {
+        "prefix": "aife",
+        "body": "align-items: flex-end;"
+    },
+    "align-items: stretch": {
+        "prefix": "ais",
+        "body": "align-items: stretch;"
+    },
+    "align-self": {
+        "prefix": "as",
+        "body": "align-items: ${1|flex-start,flex-end,center,baseline,stretch,auto|};",
+        "description": "initial value: auto"
+    },
+    "animation": {
+        "prefix": "ani",
+        "body": "animation: ${1:name} ${2:1s} ${3|linear,ease-in-out,ease,ease-in,ease-out,step-start,step-end,steps,cubic-bezier|};",
+        "description": "animation: name duration timing-function delay direction count fill-mode play-state"
+    },
+    "animation-delay": {
+        "prefix": "anide",
+        "body": "animation-delay: ${0:1s};"
+    },
+    "animation-direction": {
+        "prefix": "anidi",
+        "body": "animation-direction: ${1|alternate,alternate-reverse,reverse,normal|};",
+        "description": "initial value: normal"
+    },
+    "animation-duratuion": {
+        "prefix": "anidu",
+        "body": "animation-duration: ${0:1s};"
+    },
+    "animation-fill-mode": {
+        "prefix": "anifm",
+        "body": "animation-fill-mode: ${1|forwards,backwards,both,none|};",
+        "description": "initial value: none"
+    },
+    "animation-iteration-count": {
+        "prefix": "aniic",
+        "body": "animation-iteration-count: ${0:infinite};",
+        "description": "initial value: 1"
+    },
+    "animation-name": {
+        "prefix": "anin",
+        "body": "animation-name: ${0:name};"
+    },
+    "animation-play-state": {
+        "prefix": "anips",
+        "body": "animation-play-state: ${1|paused,running|};",
+        "description": "initial value: running"
+    },
+    "animation-timing-function": {
+        "prefix": "anitf",
+        "body": "animation-timing-function: ${1|linear,ease,ease-in-out,ease-in,ease-out,step-start,step-end,steps,cubic-bezier|};",
+        "description": "initial value: ease"
+    },
+    "background": {
+        "prefix": "bg",
+        "body": "background: ${0:#fff};",
+        "description": "background: image position/size repeat attachment box box"
+    },
+    "background-attachment": {
+        "prefix": "bga",
+        "body": "background-attachment: ${1|fixed,scroll,local|};",
+        "description": "initial value: scroll"
+    },
+    "background-color": {
+        "prefix": "bgc",
+        "body": "background-color: ${0:#fff};"
+    },
+    "background-clip": {
+        "prefix": "bgcl",
+        "body": "background-clip: ${1|border-box,padding-box,content-box,text|};",
+        "description": "initial value: border-box"
+    },
+    "background-image": {
+        "prefix": "bgi",
+        "body": "background-image: url('${0:background.jpg}');"
+    },
+    "background-origin": {
+        "prefix": "bgo",
+        "body": "background-origin: ${1|border-box,padding-box,content-box|};",
+        "description": "initial value: padding-box"
+    },
+    "background-position": {
+        "prefix": "bgp",
+        "body": "background-position: ${1:left} ${2:top};"
+    },
+    "background-repeat": {
+        "prefix": "bgr",
+        "body": "background-repeat: ${1|no-repeat,repeat-x,repeat-y,repeat,space,round|};",
+        "description": "initial value: repeat"
+    },
+    "background-repeat: repeat": {
+        "prefix": "bgrr",
+        "body": "background-repeat: repeat;"
+    },
+    "background-repeat: repeat-x": {
+        "prefix": "bgrx",
+        "body": "background-repeat: repeat-x;"
+    },
+    "background-repeat: repeat-y": {
+        "prefix": "bgry",
+        "body": "background-repeat: repeat-y;"
+    },
+    "background-repeat: no-repeat": {
+        "prefix": "bgrn",
+        "body": "background-repeat: no-repeat;"
+    },
+    "background-size": {
+        "prefix": "bgs",
+        "body": "background-size: ${0:cover};"
+    },
+    "border": {
+        "prefix": "bor",
+        "body": "border: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};"
+    },
+    "border: none": {
+        "prefix": "born",
+        "body": "border: none;"
+    },
+    "border-color": {
+        "prefix": "borc",
+        "body": "border-color: ${0:#000};"
+    },
+    "border-style": {
+        "prefix": "bors",
+        "body": "border-style: ${1|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|};"
+    },
+    "border-width": {
+        "prefix": "borw",
+        "body": "border-width: ${0:1px};"
+    },
+    "border-bottom": {
+        "prefix": "borb",
+        "body": "border-bottom: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};"
+    },
+    "border-left": {
+        "prefix": "borl",
+        "body": "border-left: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};"
+    },
+    "border-right": {
+        "prefix": "borr",
+        "body": "border-right: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};"
+    },
+    "border-top": {
+        "prefix": "bort",
+        "body": "border-top: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};"
+    },
+    "border-radius": {
+        "prefix": "br",
+        "body": "border-radius: ${0:2px};"
+    },
+    "bottom": {
+        "prefix": "bot",
+        "body": "bottom: ${0:0};"
+    },
+    "box-shadow": {
+        "prefix": "bos",
+        "body": "box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:1px} ${0:rgba(0, 0, 0, .5)};",
+        "description": "box-shadow: x-offset y-offset blur spread color"
+    },
+    "box-sizing": {
+        "prefix": "boz",
+        "body": "box-sizing: ${1|border-box,content-box|};",
+        "description": "initial value: content-box"
+    },
+    "clear": {
+        "prefix": "clr",
+        "body": "clear: ${1|both,left,right,none|};"
+    },
+    "color": {
+        "prefix": "col",
+        "body": "color: ${0:#000};"
+    },
+    "content": {
+        "prefix": "con",
+        "body": "content: '$0';"
+    },
+    "cursor": {
+        "prefix": "cur",
+        "body": "cursor: ${1|auto,default,alias,cell,copy,crosshair,context-menu,help,grab,grabbing,move,none,no-drop,not-allowed,pointer,progress,e-resize,all-scroll,text,wait,vertical-text,zoom-in,zoom-out|};",
+        "description": "initial value: auto"
+    },
+    "cursor: pointer": {
+        "prefix": "curp",
+        "body": "cursor: pointer;"
+    },
+    "cursor: default": {
+        "prefix": "curd",
+        "body": "cursor: default;"
+    },
+    "display": {
+        "prefix": "dis",
+        "body": "display: ${1|none,block,inline,inline-block,flex,inline-flex,list-item,table,inline-table,table-caption,table-cell,table-row,table-row-group,table-column|};"
+    },
+    "display: block": {
+        "prefix": "disb",
+        "body": "display: block;"
+    },
+    "display: inline-block": {
+        "prefix": "disi",
+        "body": "display: inline-block;"
+    },
+    "display: none": {
+        "prefix": "disn",
+        "body": "display: none;"
+    },
+    "display: flex": {
+        "prefix": "disf",
+        "body": "display: flex;"
+    },
+    "flex": {
+        "prefix": "flex",
+        "body": "flex: ${1:1} ${2:1} ${3:auto};",
+        "description": "flex: grow shrink basis"
+    },
+    "flex (alt)": {
+        "prefix": "fle",
+        "body": "flex: ${1:1} ${2:1} ${3:auto};"
+    },
+    "flex-direction": {
+        "prefix": "fld",
+        "body": "flex-direction: ${1|row,row-reverse,column,column-reverse|};",
+        "description": "initial value: row"
+    },
+    "flex-direction: row": {
+        "prefix": "fldr",
+        "body": "flex-direction: row;"
+    },
+    "flex-direction: column": {
+        "prefix": "fldc",
+        "body": "flex-direction: column;"
+    },
+    "flex-flow": {
+        "prefix": "flf",
+        "body": "flex-flow: ${1|row,row-reverse,column,column-reverse|} ${2|wrap,wrap-reverse,nowrap|};"
+    },
+    "flex-wrap": {
+        "prefix": "flw",
+        "body": "flex-wrap: ${1|wrap,wrap-reverse,nowrap|};",
+        "description": "initial value: nowrap"
+    },
+    "float": {
+        "prefix": "fl",
+        "body": "float: ${1|left,right,none|};"
+    },
+    "float: left": {
+        "prefix": "fll",
+        "body": "float: left;"
+    },
+    "float: right": {
+        "prefix": "flr",
+        "body": "float: right;"
+    },
+    "float: none": {
+        "prefix": "fln",
+        "body": "float: none;"
+    },
+    "font-family": {
+        "prefix": "ff",
+        "body": "font-family: ${0:arial};"
+    },
+    "font-size": {
+        "prefix": "fz",
+        "body": "font-size: ${0:12px};"
+    },
+    "font-style": {
+        "prefix": "fst",
+        "body": "font-style: ${1|italic,oblique,normal|};"
+    },
+    "font-style: italic": {
+        "prefix": "fsti",
+        "body": "font-style: italic;"
+    },
+    "font-style: normal": {
+        "prefix": "fstn",
+        "body": "font-style: normal;"
+    },
+    "font-style: oblique": {
+        "prefix": "fsto",
+        "body": "font-style: oblique;"
+    },
+    "font-weight": {
+        "prefix": "fw",
+        "body": "font-weight: ${0:bold};"
+    },
+    "font-weight: bold": {
+        "prefix": "fwb",
+        "body": "font-weight: bold;"
+    },
+    "font-weight: light": {
+        "prefix": "fwl",
+        "body": "font-weight: light;"
+    },
+    "font-weight: normal": {
+        "prefix": "fwn",
+        "body": "font-weight: normal;"
+    },
+    "font": {
+        "prefix": "ft",
+        "body": "font: ${0:12px/1.5};",
+        "description": "font: [weight style variant stretch] size/line-height family"
+    },
+    "height": {
+        "prefix": "hei",
+        "body": "height: ${0:1px};"
+    },
+    "justify-content": {
+        "prefix": "jc",
+        "body": "justify-content: ${1|flex-start,flex-end,center,space-between,space-around|};",
+        "description": "initial value: flex-start"
+    },
+    "justify-content: flex-start": {
+        "prefix": "jcfs",
+        "body": "justify-content: flex-start;"
+    },
+    "justify-content: flex-end": {
+        "prefix": "jcfe",
+        "body": "justify-content: flex-end;"
+    },
+    "justify-content: center": {
+        "prefix": "jcc",
+        "body": "justify-content: center;"
+    },
+    "justify-content: space-around": {
+        "prefix": "jcsa",
+        "body": "justify-content: space-around;"
+    },
+    "justify-content: space-between": {
+        "prefix": "jcsb",
+        "body": "justify-content: space-between;"
+    },
+    "list-style": {
+        "prefix": "lis",
+        "body": "list-style: ${1|disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none,armenian,cjk-ideographic,georgian,lower-greek,hebrew,hiragana,hiragana-iroha,katakana,katakana-iroha,lower-latin,upper-latin|} ${2|outside,inside|};",
+        "description": "list-style: type position image"
+    },
+    "list-style-position": {
+        "prefix": "lisp",
+        "body": "${1|outside,inside|}",
+        "description": "initial value: outside"
+    },
+    "list-style-type": {
+        "prefix": "list",
+        "body": "list-style-type: ${1|disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none,armenian,cjk-ideographic,georgian,lower-greek,hebrew,hiragana,hiragana-iroha,katakana,katakana-iroha,lower-latin,upper-latin|};",
+        "description": "initial value: disc"
+    },
+    "list-style-type: circle": {
+        "prefix": "listc",
+        "body": "list-style-type: circle;"
+    },
+    "list-style-type: disc": {
+        "prefix": "listd",
+        "body": "list-style-type: disc;"
+    },
+    "list-style-type: none": {
+        "prefix": "listn",
+        "body": "list-style-type: none;"
+    },
+    "list-style-type: square": {
+        "prefix": "lists",
+        "body": "list-style-type: square;"
+    },
+    "list-style-type: lower-roman": {
+        "prefix": "listlr",
+        "body": "list-style-type: lower-roman;"
+    },
+    "list-style-type: upper-roman": {
+        "prefix": "listur",
+        "body": "list-style-type: upper-roman;"
+    },
+    "left": {
+        "prefix": "lef",
+        "body": "left: ${0:0};"
+    },
+    "line-height": {
+        "prefix": "lh",
+        "body": "line-height: ${0:1.5};"
+    },
+    "letter-spacing": {
+        "prefix": "ls",
+        "body": "letter-spacing: ${0:2px};"
+    },
+    "letter-spacing: normal": {
+        "prefix": "lsn",
+        "body": "letter-spacing: normal;"
+    },
+    "margin": {
+        "prefix": "mar",
+        "body": "margin: ${0:0};"
+    },
+    "margin-bottom": {
+        "prefix": "marb",
+        "body": "margin-bottom: ${0:0};"
+    },
+    "margin-left": {
+        "prefix": "marl",
+        "body": "margin-left: ${0:0};"
+    },
+    "margin-right": {
+        "prefix": "marr",
+        "body": "margin-right: ${0:0};"
+    },
+    "margin-top": {
+        "prefix": "mart",
+        "body": "margin-top: ${0:0};"
+    },
+    "margin: 0 auto": {
+        "prefix": "mara",
+        "body": "margin: 0 auto;"
+    },
+    "min-height": {
+        "prefix": "mih",
+        "body": "min-height: ${0:1px};"
+    },
+    "min-width": {
+        "prefix": "miw",
+        "body": "min-width: ${0:1px};"
+    },
+    "max-height": {
+        "prefix": "mah",
+        "body": "max-height: ${0:1px};"
+    },
+    "max-width": {
+        "prefix": "maw",
+        "body": "max-width: ${0:1px};"
+    },
+    "opacity": {
+        "prefix": "opa",
+        "body": "opacity: ${0:0};"
+    },
+    "overflow": {
+        "prefix": "ov",
+        "body": "overflow: ${1|visible,hidden,scroll,auto,clip|};"
+    },
+    "overflow: auto": {
+        "prefix": "ova",
+        "body": "overflow: auto;"
+    },
+    "overflow: hidden": {
+        "prefix": "ovh",
+        "body": "overflow: hidden;"
+    },
+    "overflow: scroll": {
+        "prefix": "ovs",
+        "body": "overflow: scroll;"
+    },
+    "overflow: visible": {
+        "prefix": "ovv",
+        "body": "overflow: visible;"
+    },
+    "padding": {
+        "prefix": "pad",
+        "body": "padding: ${0:0};"
+    },
+    "padding-bottom": {
+        "prefix": "padb",
+        "body": "padding-bottom: ${0:0};"
+    },
+    "padding-left": {
+        "prefix": "padl",
+        "body": "padding-left: ${0:0};"
+    },
+    "padding-right": {
+        "prefix": "padr",
+        "body": "padding-right: ${0:0};"
+    },
+    "padding-top": {
+        "prefix": "padt",
+        "body": "padding-top: ${0:0};"
+    },
+    "position": {
+        "prefix": "pos",
+        "body": "position: ${1|relative,absolute,fixed,sticky,static|};"
+    },
+    "position absolute": {
+        "prefix": "posa",
+        "body": "position: absolute;"
+    },
+    "position fixed": {
+        "prefix": "posf",
+        "body": "position: fixed;"
+    },
+    "position relative": {
+        "prefix": "posr",
+        "body": "position: relative;"
+    },
+    "position sticky": {
+        "prefix": "poss",
+        "body": "position: sticky;"
+    },
+    "right": {
+        "prefix": "rig",
+        "body": "right: ${0:0};"
+    },
+    "text-align": {
+        "prefix": "ta",
+        "body": "text-align: ${1|center,left,right,justify,start,end|};"
+    },
+    "text-align: center": {
+        "prefix": "tac",
+        "body": "text-align: center;"
+    },
+    "text-align: left": {
+        "prefix": "tal",
+        "body": "text-align: left;"
+    },
+    "text-align: right": {
+        "prefix": "tar",
+        "body": "text-align: right;"
+    },
+    "text-decoration": {
+        "prefix": "td",
+        "body": "text-decoration: ${1|none,underline,overline,line-through|};"
+    },
+    "text-decoration: underline": {
+        "prefix": "tdu",
+        "body": "text-decoration: underline;"
+    },
+    "text-decoration: none": {
+        "prefix": "tdn",
+        "body": "text-decoration: none;"
+    },
+    "text-decoration: line-through": {
+        "prefix": "tdl",
+        "body": "text-decoration: line-through;"
+    },
+    "text-indent": {
+        "prefix": "ti",
+        "body": "text-indent: ${0:2em};"
+    },
+    "text-shadow": {
+        "prefix": "ts",
+        "body": "text-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:1px} ${0:rgba(0, 0, 0, .5)};",
+        "description": "text-shadow: x-offset y-offset blur spread color"
+    },
+    "text-transform": {
+        "prefix": "tt",
+        "body": "text-transform: ${1|capitalize,uppercase,lowercase,full-width,none|};"
+    },
+    "top": {
+        "prefix": "top",
+        "body": "top: ${0:0};"
+    },
+    "vertical-align": {
+        "prefix": "va",
+        "body": "vertical-align: ${1|baseline,middle,top,bottom,sub,super,text-top,text-bottom|};"
+    },
+    "vertical-align: bottom": {
+        "prefix": "vab",
+        "body": "vertical-align: bottom;"
+    },
+    "vertical-align: middle": {
+        "prefix": "vam",
+        "body": "vertical-align: middle;"
+    },
+    "vertical-align: top": {
+        "prefix": "vat",
+        "body": "vertical-align: top;"
+    },
+    "visibility": {
+        "prefix": "vis",
+        "body": "visibility: ${1|visible,hidden,collapse|};"
+    },
+    "visibility: visible": {
+        "prefix": "visv",
+        "body": "visibility: visible;"
+    },
+    "visibility: hidden": {
+        "prefix": "vish",
+        "body": "visibility: hidden;"
+    },
+    "word-break": {
+        "prefix": "wb",
+        "body": "word-break: ${1|break-all,keep-all,break-word,normal|};"
+    },
+    "width": {
+        "prefix": "wid",
+        "body": "width: ${0:0};"
+    },
+    "width: auto": {
+        "prefix": "wida",
+        "body": "width: auto;"
+    },
+    "white-space": {
+        "prefix": "ws",
+        "body": "white-space: ${1|nowrap,pre,pre-wrap,pre-line,normal|};"
+    },
+    "white-space: nowrap": {
+        "prefix": "wsn",
+        "body": "white-space: nowrap;"
+    },
+    "white-space: pre": {
+        "prefix": "wsp",
+        "body": "white-space: pre;"
+    },
+    "word-wrap": {
+        "prefix": "ww",
+        "body": "word-wrap: ${1|break-word,break-spaces,normal|};"
+    },
+    "z-index": {
+        "prefix": "zi",
+        "body": "z-index: ${0:-1};"
+    },
+    "@import": {
+        "prefix": "imp",
+        "body": "@import '${0:filename}';"
+    },
+    "@mixin": {
+        "prefix": "mix",
+        "body": "@mixin ${1:name} {\n  $0\n}"
+    },
+    "@include": {
+        "prefix": "inc",
+        "body": "@include ${0:mixin};"
+    },
+    "@keyframes": {
+        "prefix": "key",
+        "body": "@keyframes ${1:name} {\n  $0\n}"
+    },
+    "@media": {
+        "prefix": "med",
+        "body": "@media screen and (${1:max-width: 300px}) {\n  $0\n}"
+    },
+    "!important": {
+        "prefix": "!",
+        "body": "!important"
+    },
+    "!important (alt)": {
+        "prefix": "i",
+        "body": "!important"
+    }
+}
diff --git a/snippets/html.json b/snippets/html.json
new file mode 100644
index 00000000..839032a6
--- /dev/null
+++ b/snippets/html.json
@@ -0,0 +1,769 @@
+{
+    "doctype": {
+        "prefix": "doctype",
+        "body": ["<!DOCTYPE>", "$1"],
+        "description": "HTML - Defines the document type",
+        "scope": "text.html"
+    },
+    "a": {
+        "prefix": "a",
+        "body": "<a href=\"$1\">$2</a>$3",
+        "description": "HTML - Defines a hyperlink",
+        "scope": "text.html"
+    },
+    "abbr": {
+        "prefix": "abbr",
+        "body": "<abbr title=\"$1\">$2</abbr>$3",
+        "description": "HTML - Defines an abbreviation",
+        "scope": "text.html"
+    },
+    "address": {
+        "prefix": "address",
+        "body": ["<address>", "$1", "</address>"],
+        "description": "HTML - Defines an address element",
+        "scope": "text.html"
+    },
+    "area": {
+        "prefix": "area",
+        "body": "<area shape=\"$1\" coords=\"$2\" href=\"$3\" alt=\"$4\">$5",
+        "description": "HTML - Defines an area inside an image map",
+        "scope": "text.html"
+    },
+    "article": {
+        "prefix": "article",
+        "body": ["<article>", "\t$1", "</article>"],
+        "description": "HTML - Defines an article",
+        "scope": "text.html"
+    },
+    "aside": {
+        "prefix": "aside",
+        "body": ["<aside>", "\t$1", "</aside>$2"],
+        "description": "HTML - Defines content aside from the page content",
+        "scope": "text.html"
+    },
+    "audio": {
+        "prefix": "audio",
+        "body": ["<audio controls>", "\t$1", "</audio>"],
+        "description": "HTML - Defines sounds content",
+        "scope": "text.html"
+    },
+    "b": {
+        "prefix": "b",
+        "body": "<b>$1</b>$2",
+        "description": "HTML - Defines bold text",
+        "scope": "text.html"
+    },
+    "base": {
+        "prefix": "base",
+        "body": "<base href=\"$1\" target=\"$2\">$3",
+        "description": "HTML - Defines a base URL for all the links in a page",
+        "scope": "text.html"
+    },
+    "bdi": {
+        "prefix": "bdi",
+        "body": "<bdi>$1</bdi>$2",
+        "description": "HTML - Used to isolate text that is of unknown directionality",
+        "scope": "text.html"
+    },
+    "bdo": {
+        "prefix": "bdo",
+        "body": ["<bdo dir=\"$1\">", "$2", "</bdo>"],
+        "description": "HTML - Defines the direction of text display",
+        "scope": "text.html"
+    },
+    "big": {
+        "prefix": "big",
+        "body": "<big>$1</big>$2",
+        "description": "HTML - Used to make text bigger",
+        "scope": "text.html"
+    },
+    "blockquote": {
+        "prefix": "blockquote",
+        "body": ["<blockquote cite=\"$2\">", "\t$1", "</blockquote>"],
+        "description": "HTML - Defines a long quotation",
+        "scope": "text.html"
+    },
+    "body": {
+        "prefix": "body",
+        "body": ["<body>", "\t$0", "</body>"],
+        "description": "HTML - Defines the body element",
+        "scope": "text.html"
+    },
+    "br": {
+        "prefix": "br",
+        "body": "<br>",
+        "description": "HTML - Inserts a single line break",
+        "scope": "text.html"
+    },
+    "button": {
+        "prefix": "button",
+        "body": "<button type=\"$1\">$2</button>$3",
+        "description": "HTML - Defines a push button",
+        "scope": "text.html"
+    },
+    "canvas": {
+        "prefix": "canvas",
+        "body": "<canvas id=\"$1\">$2</canvas>$3",
+        "description": "HTML - Defines graphics",
+        "scope": "text.html"
+    },
+    "caption": {
+        "prefix": "caption",
+        "body": "<caption>$1</caption>$2",
+        "description": "HTML - Defines a table caption",
+        "scope": "text.html"
+    },
+    "cite": {
+        "prefix": "cite",
+        "body": "<cite>$1</cite>$2",
+        "description": "HTML - Defines a citation",
+        "scope": "text.html"
+    },
+    "code": {
+        "prefix": "code",
+        "body": "<code>$1</code>$2",
+        "description": "HTML - Defines computer code text",
+        "scope": "text.html"
+    },
+    "col": {
+        "prefix": "col",
+        "body": "<col>$2",
+        "description": "HTML - Defines attributes for table columns",
+        "scope": "text.html"
+    },
+    "colgroup": {
+        "prefix": "colgroup",
+        "body": ["<colgroup>", "\t$1", "</colgroup>"],
+        "description": "HTML - Defines group of table columns",
+        "scope": "text.html"
+    },
+    "command": {
+        "prefix": "command",
+        "body": "<command>$1</command>$2",
+        "description": "HTML - Defines a command button [not supported]",
+        "scope": "text.html"
+    },
+    "datalist": {
+        "prefix": "datalist",
+        "body": ["<datalist>", "\t$1", "</datalist>"],
+        "description": "HTML - Defines a dropdown list",
+        "scope": "text.html"
+    },
+    "dd": {
+        "prefix": "dd",
+        "body": "<dd>$1</dd>$2",
+        "description": "HTML - Defines a definition description",
+        "scope": "text.html"
+    },
+    "del": {
+        "prefix": "del",
+        "body": "<del>$1</del>$2",
+        "description": "HTML - Defines deleted text",
+        "scope": "text.html"
+    },
+    "details": {
+        "prefix": "details",
+        "body": ["<details>", "\t$1", "</details>"],
+        "description": "HTML - Defines details of an element",
+        "scope": "text.html"
+    },
+    "dialog": {
+        "prefix": "dialog",
+        "body": "<dialog>$1</dialog>$2",
+        "description": "HTML - Defines a dialog (conversation)",
+        "scope": "text.html"
+    },
+    "dfn": {
+        "prefix": "dfn",
+        "body": "<dfn>$1</dfn>$2",
+        "description": "HTML - Defines a definition term",
+        "scope": "text.html"
+    },
+    "div": {
+        "prefix": "div",
+        "body": ["<div>", "\t$1", "</div>"],
+        "description": "HTML - Defines a section in a document",
+        "scope": "text.html"
+    },
+    "dl": {
+        "prefix": "dl",
+        "body": ["<dl>", "\t$1", "</dl>"],
+        "description": "HTML - Defines a definition list",
+        "scope": "text.html"
+    },
+    "dt": {
+        "prefix": "dt",
+        "body": "<dt>$1</dt>$2",
+        "description": "HTML - Defines a definition term",
+        "scope": "text.html"
+    },
+    "em": {
+        "prefix": "em",
+        "body": "<em>$1</em>$2",
+        "description": "HTML - Defines emphasized text",
+        "scope": "text.html"
+    },
+    "embed": {
+        "prefix": "embed",
+        "body": "<embed src=\"$1\">$2",
+        "description": "HTML - Defines external interactive content ot plugin",
+        "scope": "text.html"
+    },
+    "fieldset": {
+        "prefix": "fieldset",
+        "body": ["<fieldset>", "\t$1", "</fieldset>"],
+        "description": "HTML - Defines a fieldset",
+        "scope": "text.html"
+    },
+    "figcaption": {
+        "prefix": "figcaption",
+        "body": "<figcaption>$1</figcaption>$2",
+        "description": "HTML - Defines a caption for a figure",
+        "scope": "text.html"
+    },
+    "figure": {
+        "prefix": "figure",
+        "body": ["<figure>", "\t$1", "</figure>"],
+        "description": "HTML - Defines a group of media content, and their caption",
+        "scope": "text.html"
+    },
+    "footer": {
+        "prefix": "footer",
+        "body": ["<footer>", "\t$1", "</footer>"],
+        "description": "HTML - Defines a footer for a section or page",
+        "scope": "text.html"
+    },
+    "form": {
+        "prefix": "form",
+        "body": ["<form>", "\t$1", "</form>"],
+        "description": "HTML - Defines a form",
+        "scope": "text.html"
+    },
+    "h1": {
+        "prefix": "h1",
+        "body": "<h1>$1</h1>$2",
+        "description": "HTML - Defines header 1",
+        "scope": "text.html"
+    },
+    "h2": {
+        "prefix": "h2",
+        "body": "<h2>$1</h2>$2",
+        "description": "HTML - Defines header 2",
+        "scope": "text.html"
+    },
+    "h3": {
+        "prefix": "h3",
+        "body": "<h3>$1</h3>$2",
+        "description": "HTML - Defines header 3",
+        "scope": "text.html"
+    },
+    "h4": {
+        "prefix": "h4",
+        "body": "<h4>$1</h4>$2",
+        "description": "HTML - Defines header 4",
+        "scope": "text.html"
+    },
+    "h5": {
+        "prefix": "h5",
+        "body": "<h5>$1</h5>$2",
+        "description": "HTML - Defines header 5",
+        "scope": "text.html"
+    },
+    "h6": {
+        "prefix": "h6",
+        "body": "<h6>$1</h6>$2",
+        "description": "HTML - Defines header 6",
+        "scope": "text.html"
+    },
+    "head": {
+        "prefix": "head",
+        "body": ["<head>", "\t$1", "</head>"],
+        "description": "HTML - Defines information about the document",
+        "scope": "text.html"
+    },
+    "header": {
+        "prefix": "header",
+        "body": ["<header>", "\t$1", "</header>"],
+        "description": "HTML - Defines a header for a section of page",
+        "scope": "text.html"
+    },
+    "hgroup": {
+        "prefix": "hgroup",
+        "body": ["<hgroup>", "\t$1", "</hgroup>"],
+        "description": "HTML - Defines information about a section in a document",
+        "scope": "text.html"
+    },
+    "hr": {
+        "prefix": "hr",
+        "body": "<hr>",
+        "description": "HTML - Defines a horizontal rule",
+        "scope": "text.html"
+    },
+    "html": {
+        "prefix": "html",
+        "body": ["<html>", "\t$0", "</html>"],
+        "description": "HTML - Defines an html document",
+        "scope": "text.html"
+    },
+    "html5": {
+        "prefix": "html5",
+        "body": [
+            "<!DOCTYPE html>",
+            "<html lang=\"$1en\">",
+            "\t<head>",
+            "\t\t<meta charset=\"UTF-8\">",
+            "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
+            "\t\t<title>$2</title>",
+            "\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",
+            "\t</head>",
+            "\t<body>",
+            "\t$0",
+            "\t</body>",
+            "</html>"
+        ],
+        "description": "HTML - Defines a template for a html5 document",
+        "scope": "text.html"
+    },
+    "i": {
+        "prefix": "i",
+        "body": "<i>$1</i>$2",
+        "description": "HTML - Defines italic text",
+        "scope": "text.html"
+    },
+    "iframe": {
+        "prefix": "iframe",
+        "body": "<iframe src=\"$1\">$2</iframe>$3",
+        "description": "HTML - Defines an inline sub window",
+        "scope": "text.html"
+    },
+    "img": {
+        "prefix": "img",
+        "body": "<img src=\"$1\" alt=\"$2\">$3",
+        "description": "HTML - Defines an image",
+        "scope": "text.html"
+    },
+    "input": {
+        "prefix": "input",
+        "body": "<input type=\"$1\" name=\"$2\" value=\"$3\">$4",
+        "description": "HTML - Defines an input field",
+        "scope": "text.html"
+    },
+    "ins": {
+        "prefix": "ins",
+        "body": "<ins>$1</ins>$2",
+        "description": "HTML - Defines inserted text",
+        "scope": "text.html"
+    },
+    "keygen": {
+        "prefix": "keygen",
+        "body": "<keygen name=\"$1\">$2",
+        "description": "HTML - Defines a generated key in a form",
+        "scope": "text.html"
+    },
+    "kbd": {
+        "prefix": "kbd",
+        "body": "<kbd>$1</kbd>$2",
+        "description": "HTML - Defines keyboard text",
+        "scope": "text.html"
+    },
+    "label": {
+        "prefix": "label",
+        "body": "<label for=\"$1\">$2</label>$3",
+        "description": "HTML - Defines an inline window",
+        "scope": "text.html"
+    },
+    "legend": {
+        "prefix": "legend",
+        "body": "<legend>$1</legend>$2",
+        "description": "HTML - Defines a title in a fieldset",
+        "scope": "text.html"
+    },
+    "li": {
+        "prefix": "li",
+        "body": "<li>$1</li>$2",
+        "description": "HTML - Defines a list item",
+        "scope": "text.html"
+    },
+    "link": {
+        "prefix": "link",
+        "body": "<link rel=\"$1\" type=\"$2\" href=\"$3\">$4",
+        "description": "HTML - Defines a resource reference",
+        "scope": "text.html"
+    },
+    "main": {
+        "prefix": "main",
+        "body": ["<main>", "\t$1", "</main>"],
+        "description": "HTML - Defines an image map",
+        "scope": "text.html"
+    },
+    "map": {
+        "prefix": "map",
+        "body": ["<map name=\"$1\">", "\t$2", "</map>"],
+        "description": "HTML - Defines an image map",
+        "scope": "text.html"
+    },
+    "mark": {
+        "prefix": "mark",
+        "body": "<mark>$1</mark>$2",
+        "description": "HTML - Defines marked text",
+        "scope": "text.html"
+    },
+    "menu": {
+        "prefix": "menu",
+        "body": ["<menu>", "\t$1", "</menu>"],
+        "description": "HTML - Defines a menu list",
+        "scope": "text.html"
+    },
+    "menuitem": {
+        "prefix": "menuitem",
+        "body": "<menuitem>$1</menuitem>$2",
+        "description": "HTML - Defines a menu item [firefox only]",
+        "scope": "text.html"
+    },
+    "meta": {
+        "prefix": "meta",
+        "body": "<meta name=\"$1\" content=\"$2\">$3",
+        "description": "HTML - Defines meta information",
+        "scope": "text.html"
+    },
+    "meter": {
+        "prefix": "meter",
+        "body": "<meter value=\"$1\">$2</meter>$3",
+        "description": "HTML - Defines measurement within a predefined range",
+        "scope": "text.html"
+    },
+    "nav": {
+        "prefix": "nav",
+        "body": ["<nav>", "\t$1", "</nav>"],
+        "description": "HTML - Defines navigation links",
+        "scope": "text.html"
+    },
+    "noscript": {
+        "prefix": "noscript",
+        "body": ["<noscript>", "$1", "</noscript>"],
+        "description": "HTML - Defines a noscript section",
+        "scope": "text.html"
+    },
+    "object": {
+        "prefix": "object",
+        "body": "<object width=\"$1\" height=\"$2\" data=\"$3\">$4</object>$5",
+        "description": "HTML - Defines an embedded object",
+        "scope": "text.html"
+    },
+    "ol": {
+        "prefix": "ol",
+        "body": ["<ol>", "\t$1", "</ol>"],
+        "description": "HTML - Defines an ordered list",
+        "scope": "text.html"
+    },
+    "optgroup": {
+        "prefix": "optgroup",
+        "body": ["<optgroup>", "\t$1", "</optgroup>"],
+        "description": "HTML - Defines an option group",
+        "scope": "text.html"
+    },
+    "option": {
+        "prefix": "option",
+        "body": "<option value=\"$1\">$2</option>$3",
+        "description": "HTML - Defines an option in a drop-down list",
+        "scope": "text.html"
+    },
+    "output": {
+        "prefix": "output",
+        "body": "<output name=\"$1\" for=\"$2\">$3</output>$4",
+        "description": "HTML - Defines some types of output",
+        "scope": "text.html"
+    },
+    "p": {
+        "prefix": "p",
+        "body": "<p>$1</p>$2",
+        "description": "HTML - Defines a paragraph",
+        "scope": "text.html"
+    },
+    "param": {
+        "prefix": "param",
+        "body": "<param name=\"$1\" value=\"$2\">$3",
+        "description": "HTML - Defines a parameter for an object",
+        "scope": "text.html"
+    },
+    "pre": {
+        "prefix": "pre",
+        "body": ["<pre>$1</pre>"],
+        "description": "HTML - Defines preformatted text",
+        "scope": "text.html"
+    },
+    "progress": {
+        "prefix": "progress",
+        "body": "<progress value=\"$1\" max=\"$2\">$3</progress>$4",
+        "description": "HTML - Defines progress of a task of any kind",
+        "scope": "text.html"
+    },
+    "q": {
+        "prefix": "q",
+        "body": "<q>$1</q>$2",
+        "description": "HTML - Defines a short quotation",
+        "scope": "text.html"
+    },
+    "rp": {
+        "prefix": "rp",
+        "body": "<rp>$1</rp>$2",
+        "description": "HTML - Used in ruby annotations to define what to show browsers that do not support the ruby element",
+        "scope": "text.html"
+    },
+    "rt": {
+        "prefix": "rt",
+        "body": "<rt>$1</rt>$2",
+        "description": "HTML - Defines explanation to ruby annotations",
+        "scope": "text.html"
+    },
+    "ruby": {
+        "prefix": "ruby",
+        "body": ["<ruby>", "$1", "</ruby>"],
+        "description": "HTML - Defines ruby annotations",
+        "scope": "text.html"
+    },
+    "s": {
+        "prefix": "s",
+        "body": "<s>$1</s>$2",
+        "description": "HTML - Used to define strikethrough text",
+        "scope": "text.html"
+    },
+    "samp": {
+        "prefix": "samp",
+        "body": "<samp>$1</samp>$2",
+        "description": "HTML - Defines sample computer code",
+        "scope": "text.html"
+    },
+    "script": {
+        "prefix": "script",
+        "body": ["<script>", "\t$1", "</script>"],
+        "description": "HTML - Defines a script",
+        "scope": "text.html"
+    },
+    "section": {
+        "prefix": "section",
+        "body": ["<section>", "\t$1", "</section>"],
+        "description": "HTML - Defines a section",
+        "scope": "text.html"
+    },
+    "select": {
+        "prefix": "select",
+        "body": ["<select>", "\t$1", "</select>"],
+        "description": "HTML - Defines a selectable list",
+        "scope": "text.html"
+    },
+    "small": {
+        "prefix": "small",
+        "body": "<small>$1</small>$2",
+        "description": "HTML - Defines small text",
+        "scope": "text.html"
+    },
+    "source": {
+        "prefix": "source",
+        "body": "<source src=\"$1\" type=\"$2\">$3",
+        "description": "HTML - Defines media resource",
+        "scope": "text.html"
+    },
+    "span": {
+        "prefix": "span",
+        "body": "<span>$1</span>$2",
+        "description": "HTML - Defines a section in a document",
+        "scope": "text.html"
+    },
+    "strong": {
+        "prefix": "strong",
+        "body": "<strong>$1</strong>$2",
+        "description": "HTML - Defines strong text",
+        "scope": "text.html"
+    },
+    "style": {
+        "prefix": "style",
+        "body": ["<style>", "$1", "</style>"],
+        "description": "HTML - Defines a style definition",
+        "scope": "text.html"
+    },
+    "sub": {
+        "prefix": "sub",
+        "body": "<sub>$1</sub>$2",
+        "description": "HTML - Defines sub-scripted text",
+        "scope": "text.html"
+    },
+    "sup": {
+        "prefix": "sup",
+        "body": "<sup>$1</sup>$2",
+        "description": "HTML - Defines super-scripted text",
+        "scope": "text.html"
+    },
+    "summary": {
+        "prefix": "summary",
+        "body": "<summary>$1</summary>$2",
+        "description": "HTML - Defines a visible heading for the detail element [limited support]",
+        "scope": "text.html"
+    },
+    "table": {
+        "prefix": "table",
+        "body": ["<table>", "\t$1", "</table>"],
+        "description": "HTML - Defines a table",
+        "scope": "text.html"
+    },
+    "tbody": {
+        "prefix": "tbody",
+        "body": ["<tbody>", "\t$1", "</tbody>"],
+        "description": "HTML - Defines a table body",
+        "scope": "text.html"
+    },
+    "td": {
+        "prefix": "td",
+        "body": "<td>$1</td>$2",
+        "description": "HTML - Defines a table cell",
+        "scope": "text.html"
+    },
+    "textarea": {
+        "prefix": "textarea",
+        "body": "<textarea rows=\"$1\" cols=\"$2\">$3</textarea>$4",
+        "description": "HTML - Defines a text area",
+        "scope": "text.html"
+    },
+    "tfoot": {
+        "prefix": "tfoot",
+        "body": ["<tfoot>", "\t$1", "</tfoot>"],
+        "description": "HTML - Defines a table footer",
+        "scope": "text.html"
+    },
+    "thead": {
+        "prefix": "thead",
+        "body": ["<thead>", "$1", "</thead>"],
+        "description": "HTML - Defines a table head",
+        "scope": "text.html"
+    },
+    "th": {
+        "prefix": "th",
+        "body": "<th>$1</th>$2",
+        "description": "HTML - Defines a table header",
+        "scope": "text.html"
+    },
+    "time": {
+        "prefix": "time",
+        "body": "<time datetime=\"$1\">$2</time>$3",
+        "description": "HTML - Defines a date/time",
+        "scope": "text.html"
+    },
+    "title": {
+        "prefix": "title",
+        "body": "<title>$1</title>$2",
+        "description": "HTML - Defines the document title",
+        "scope": "text.html"
+    },
+    "tr": {
+        "prefix": "tr",
+        "body": "<tr>$1</tr>$2",
+        "description": "HTML - Defines a table row",
+        "scope": "text.html"
+    },
+    "track": {
+        "prefix": "track",
+        "body": "<track src=\"$1\" kind=\"$2\" srclang=\"$3\" label=\"$4\">$5",
+        "description": "HTML - Defines a table row",
+        "scope": "text.html"
+    },
+    "u": {
+        "prefix": "u",
+        "body": "<u>$1</u>$2",
+        "description": "HTML - Used to define underlined text",
+        "scope": "text.html"
+    },
+    "ul": {
+        "prefix": "ul",
+        "body": ["<ul>", "\t$1", "</ul>"],
+        "description": "HTML - Defines an unordered list",
+        "scope": "text.html"
+    },
+    "var": {
+        "prefix": "var",
+        "body": "<var>$1</var>$2",
+        "description": "HTML - Defines a variable",
+        "scope": "text.html"
+    },
+    "video": {
+        "prefix": "video",
+        "body": [
+            "<video width=\"$1\" height=\"$2\" controls>",
+            "\t$3",
+            "</video>"
+        ],
+        "description": "HTML - Defines a video",
+        "scope": "text.html"
+    },
+"div.": {
+        "prefix": "div.",
+        "body": ["<div class=\"$1\">", "\t$2", "</div>"],
+        "description": "HTML - Defines a section in a document",
+        "scope": "text.html"
+    },
+"div#": {
+        "prefix": "div#",
+        "body": ["<div id=\"$1\">", "\t$2", "</div>"],
+        "description": "HTML - Defines a section in a document",
+        "scope": "text.html"
+    },
+"div.#": {
+        "prefix": "div.#",
+        "body": ["<div class=\"$1\" id=\"$2\">", "\t$3", "</div>"],
+        "description": "HTML - Defines a section in a document",
+        "scope": "text.html"
+    },
+"p.": {
+        "prefix": "p.",
+        "body": ["<p class=\"$1\">$2</p>"],
+        "description": "HTML - Defines a paragraph",
+        "scope": "text.html"
+    },
+"p#": {
+        "prefix": "p#",
+        "body": ["<p id=\"$1\">$2</p>"],
+        "description": "HTML - Defines a paragraph",
+        "scope": "text.html"
+    },
+"p.#": {
+        "prefix": "p.#",
+        "body": ["<p class=\"$1\" id=\"$2\">$3</p>"],
+        "description": "HTML - Defines a paragraph",
+        "scope": "text.html"
+    },
+"ul.": {
+        "prefix": "ul.",
+        "body": ["<ul class=\"$1\">", "\t$2", "</ul>"],
+        "description": "HTML - Defines an unordered list",
+        "scope": "text.html"
+    },
+"ul#": {
+        "prefix": "ul#",
+        "body": ["<ul id=\"$1\">", "\t$2", "</ul>"],
+        "description": "HTML - Defines an unordered list",
+        "scope": "text.html"
+    },
+"ul.#": {
+        "prefix": "ul.#",
+        "body": ["<ul class=\"$1\" id=\"$2\">", "\t$3", "</ul>"],
+        "description": "HTML - Defines an unordered list",
+        "scope": "text.html"
+    },
+"ol.": {
+        "prefix": "ol.",
+        "body": ["<ol class=\"$1\">", "\t$2", "</ol>"],
+        "description": "HTML - Defines an ordered list",
+        "scope": "text.html"
+    },
+"ol#": {
+        "prefix": "ol#",
+        "body": ["<ol id=\"$1\">", "\t$2", "</ol>"],
+        "description": "HTML - Defines an ordered list",
+        "scope": "text.html"
+    },
+"ol.#": {
+        "prefix": "ol.#",
+        "body": ["<ol class=\"$1\" id=\"$2\">", "\t$3", "</ol>"],
+        "description": "HTML - Defines an ordered list",
+        "scope": "text.html"
+    }
+}
diff --git a/snippets/javascript/javascript.json b/snippets/javascript/javascript.json
new file mode 100644
index 00000000..5500ecc8
--- /dev/null
+++ b/snippets/javascript/javascript.json
@@ -0,0 +1,941 @@
+{
+    "setImmediate": {
+        "prefix": "sim",
+        "body": "setImmediate(() => {\n\t${0}\n})"
+    },
+    "await": {
+        "prefix": "a",
+        "body": "await ${0}"
+    },
+    "await Promise.all": {
+        "prefix": "apa",
+        "body": "await Promise.all(${1:value})"
+    },
+    "await Promise.all with destructuring": {
+        "prefix": "apad",
+        "body": "const [${0}] = await Promise.all(${1:value})"
+    },
+    "await Promise.all map": {
+        "prefix": "apm",
+        "body": "await Promise.all(${1:array}.map(async (${2:value}) => {\n\t${0}\n}))"
+    },
+    "await sleep": {
+        "prefix": "ast",
+        "body": "await new Promise((r) => setTimeout(r, ${0}))"
+    },
+    "Node callback": {
+        "prefix": "cb",
+        "body": "function (err, ${1:value}) {\n\tif (err) throw err\n\t${0}\n}"
+    },
+    "process.env": {
+        "prefix": "pe",
+        "body": "process.env"
+    },
+    "Promise.all": {
+        "prefix": "pa",
+        "body": "Promise.all(${1:value})"
+    },
+    "Promise.resolve": {
+        "prefix": "prs",
+        "body": "Promise.resolve(${1:value})"
+    },
+    "Promise.reject": {
+        "prefix": "prj",
+        "body": "Promise.reject(${1:value})"
+    },
+    "Promise": {
+        "prefix": "p",
+        "body": "Promise"
+    },
+    "new Promise": {
+        "prefix": "np",
+        "body": "new Promise((resolve, reject) => {\n\t${0}\n})"
+    },
+    "Promise.then": {
+        "prefix": "pt",
+        "body": "${1:promise}.then((${2:value}) => {\n\t${0}\n})"
+    },
+    "Promise.catch": {
+        "prefix": "pc",
+        "body": "${1:promise}.catch(error => {\n\t${0}\n})"
+    },
+    "describe": {
+        "prefix": "desc",
+        "body": "describe('${1:description}', () => {\n\t${0}\n})"
+    },
+    "describe top level": {
+        "prefix": "dt",
+        "body": "describe('${TM_FILENAME_BASE}', () => {\n\t${0}\n})"
+    },
+    "it asynchronous": {
+        "prefix": "it",
+        "body": "it('${1:description}', async () => {\n\t${0}\n})"
+    },
+    "it.todo": {
+        "prefix": "itt",
+        "body": "it.todo('${1:description}')"
+    },
+    "it with a callback": {
+        "prefix": "itd",
+        "body": "it('${1:description}', (done) => {\n\t${0}\n})"
+    },
+    "it synchronous": {
+        "prefix": "its",
+        "body": "it('${1:description}', () => {\n\t${0}\n})"
+    },
+    "before": {
+        "prefix": "bf",
+        "body": "before(async () => {\n\t${0}\n})"
+    },
+    "beforeAll": {
+        "prefix": "ba",
+        "body": "beforeAll(async () => {\n\t${0}\n})"
+    },
+    "beforeEach": {
+        "prefix": "bfe",
+        "body": "beforeEach(async () => {\n\t${0}\n})"
+    },
+    "after": {
+        "prefix": "aft",
+        "body": "after(() => {\n\t${0}\n})"
+    },
+    "afterEach": {
+        "prefix": "afe",
+        "body": "afterEach(() => {\n\t${0}\n})"
+    },
+    "require": {
+        "prefix": "rq",
+        "body": "require('${1:module}')"
+    },
+    "const module = require('module')": {
+        "prefix": "cr",
+        "body": "const ${1:module} = require('${1:module}')"
+    },
+    "exports.member": {
+        "prefix": "em",
+        "body": "exports.${1:member} = ${2:value}"
+    },
+    "module.exports": {
+        "prefix": "me",
+        "body": "module.exports = ${1:name}"
+    },
+    "module as class": {
+        "prefix": "mec",
+        "body": "class ${1:name} {\n\tconstructor (${2:arguments}) {\n\t\t${0}\n\t}\n}\n\nmodule.exports = ${1:name}\n"
+    },
+    "event handler": {
+        "prefix": "on",
+        "body": "${1:emitter}.on('${2:event}', (${3:arguments}) => {\n\t${0}\n})"
+    },
+    "dom event cancel default and propagation": {
+        "prefix": "evc",
+        "body": "ev.preventDefault()\nev.stopPropagation()\nreturn false"
+    },
+    "addEventListener": {
+        "prefix": "ae",
+        "body": "${1:document}.addEventListener('${2:event}', ${3:ev} => {\n\t${0}\n})"
+    },
+    "removeEventListener": {
+        "prefix": "rel",
+        "body": "${1:document}.removeEventListener('${2:event}', ${3:listener})"
+    },
+    "getElementById": {
+        "prefix": "gi",
+        "body": "${1:document}.getElementById('${2:id}')"
+    },
+    "getElementsByClassName": {
+        "prefix": "gc",
+        "body": "Array.from(${1:document}.getElementsByClassName('${2:class}'))"
+    },
+    "getElementsByTagName": {
+        "prefix": "gt",
+        "body": "Array.from(${1:document}.getElementsByTagName('${2:tag}'))"
+    },
+    "querySelector": {
+        "prefix": "qs",
+        "body": "${1:document}.querySelector('${2:selector}')"
+    },
+    "querySelectorAll": {
+        "prefix": "qsa",
+        "body": "Array.from(${1:document}.querySelectorAll('${2:selector}'))"
+    },
+    "createDocumentFragment": {
+        "prefix": "cdf",
+        "body": "${1:document}.createDocumentFragment(${2:elem})"
+    },
+    "createElement": {
+        "prefix": "cel",
+        "body": "${1:document}.createElement(${2:elem})"
+    },
+    "classList.add": {
+        "prefix": "hecla",
+        "body": "${1:el}.classList.add('${2:class}')"
+    },
+    "classList.remove": {
+        "prefix": "heclr",
+        "body": "${1:el}.classList.remove('${2:class}')"
+    },
+    "classList.toggle": {
+        "prefix": "hect",
+        "body": "${1:el}.classList.toggle('${2:class}')"
+    },
+    "getAttribute": {
+        "prefix": "hega",
+        "body": "${1:el}.getAttribute('${2:attr}')"
+    },
+    "removeAttribute": {
+        "prefix": "hera",
+        "body": "${1:el}.removeAttribute('${2:attr}')"
+    },
+    "setAttribute": {
+        "prefix": "hesa",
+        "body": "${1:el}.setAttribute('${2:attr}', ${3:value})"
+    },
+    "appendChild": {
+        "prefix": "heac",
+        "body": "${1:el}.appendChild(${2:elem})"
+    },
+    "removeChild": {
+        "prefix": "herc",
+        "body": "${1:el}.removeChild(${2:elem})"
+    },
+    "forEach loop": {
+        "prefix": "fe",
+        "body": "${1:iterable}.forEach((${2:item}) => {\n\t${0}\n})"
+    },
+    "map": {
+        "prefix": "map",
+        "body": "${1:iterable}.map((${2:item}) => {\n\t${0}\n})"
+    },
+    "reduce": {
+        "prefix": "reduce",
+        "body": "${1:iterable}.reduce((${2:previous}, ${3:current}) => {\n\t${0}\n}${4:, initial})"
+    },
+    "filter": {
+        "prefix": "filter",
+        "body": "${1:iterable}.filter((${2:item}) => {\n\t${0}\n})"
+    },
+    "find": {
+        "prefix": "find",
+        "body": "${1:iterable}.find((${2:item}) => {\n\t${0}\n})"
+    },
+    "every": {
+        "prefix": "every",
+        "body": "${1:iterable}.every((${2:item}) => {\n\t${0}\n})"
+    },
+    "some": {
+        "prefix": "some",
+        "body": "${1:iterable}.some((${2:item}) => {\n\t${0}\n})"
+    },
+    "var statement": {
+        "prefix": "v",
+        "body": "var ${1:name}"
+    },
+    "var assignment": {
+        "prefix": "va",
+        "body": "var ${1:name} = ${2:value}"
+    },
+    "let statement": {
+        "prefix": "l",
+        "body": "let ${1:name}"
+    },
+    "const statement": {
+        "prefix": "c",
+        "body": "const ${1:name}"
+    },
+    "const statement from destructuring": {
+        "prefix": "cd",
+        "body": "const { ${2:prop} } = ${1:value}"
+    },
+    "const statement from array destructuring": {
+        "prefix": "cad",
+        "body": "const [ ${2:prop} ] = ${1:value}"
+    },
+    "const assignment awaited": {
+        "prefix": "ca",
+        "body": "const ${1:name} = await ${2:value}"
+    },
+    "const destructuring assignment awaited": {
+        "prefix": "cda",
+        "body": "const { ${1:name} } = await ${2:value}"
+    },
+    "const arrow function assignment": {
+        "prefix": "cf",
+        "body": "const ${1:name} = (${2:arguments}) => {\n\treturn ${0}\n}"
+    },
+    "let assignment awaited": {
+        "prefix": "la",
+        "body": "let ${1:name} = await ${2:value}"
+    },
+    "const assignment yielded": {
+        "prefix": "cy",
+        "body": "const ${1:name} = yield ${2:value}"
+    },
+    "let assignment yielded": {
+        "prefix": "ly",
+        "body": "let ${1:name} = yield ${2:value}"
+    },
+    "const object": {
+        "prefix": "co",
+        "body": "const ${1:name} = {\n\t${0}\n}"
+    },
+    "const array": {
+        "prefix": "car",
+        "body": "const ${1:name} = [\n\t${0}\n]"
+    },
+    "generate array of integers starting with 1": {
+        "prefix": "gari",
+        "body": "Array.from({ length: ${1:length} }, (v, k) => k + 1)"
+    },
+    "generate array of integers starting with 0": {
+        "prefix": "gari0",
+        "body": "[...Array(${1:length}).keys()]"
+    },
+    "class": {
+        "prefix": "cs",
+        "body": "class ${1:name} {\n\tconstructor (${2:arguments}) {\n\t\t${0}\n\t}\n}"
+    },
+    "class extends": {
+        "prefix": "csx",
+        "body": "class ${1:name} extends ${2:base} {\n\tconstructor (${3:arguments}) {\n\t\tsuper(${3:arguments})\n\t\t${0}\n\t}\n}"
+    },
+    "module export": {
+        "prefix": "e",
+        "body": "export ${1:member}"
+    },
+    "module export const": {
+        "prefix": "ec",
+        "body": "export const ${1:member} = ${2:value}"
+    },
+    "export named function": {
+        "prefix": "ef",
+        "body": "export function ${1:member} (${2:arguments}) {\n\t${0}\n}"
+    },
+    "module default export": {
+        "prefix": "ed",
+        "body": "export default ${1:member}"
+    },
+    "module default export function": {
+        "prefix": "edf",
+        "body": "export default function ${1:name} (${2:arguments}) {\n\t${0}\n}"
+    },
+    "import module": {
+        "prefix": "im",
+        "body": "import ${2:*} from '${1:module}'"
+    },
+    "import module as": {
+        "prefix": "ia",
+        "body": "import ${2:*} as ${3:name} from '${1:module}'"
+    },
+    "import module destructured": {
+        "prefix": "id",
+        "body": "import {$2} from '${1:module}'"
+    },
+    "typeof": {
+        "prefix": "to",
+        "body": "typeof ${1:source} === '${2:undefined}'"
+    },
+    "this": {
+        "prefix": "t",
+        "body": "this."
+    },
+    "instanceof": {
+        "prefix": "iof",
+        "body": "${1:source} instanceof ${2:Object}"
+    },
+    "let and if statement": {
+        "prefix": "lif",
+        "body": "let ${0} \n if (${2:condition}) {\n\t${1}\n}"
+    },
+    "else statement": {
+        "prefix": "el",
+        "body": "else {\n\t${0}\n}"
+    },
+    "else if statement": {
+        "prefix": "ei",
+        "body": "else if (${1:condition}) {\n\t${0}\n}"
+    },
+    "while iteration decrementing": {
+        "prefix": "wid",
+        "body": "let ${1:array}Index = ${1:array}.length\nwhile (${1:array}Index--) {\n\t${0}\n}"
+    },
+    "throw new Error": {
+        "prefix": "tn",
+        "body": "throw new ${0:error}"
+    },
+    "try/catch": {
+        "prefix": "tc",
+        "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n}"
+    },
+    "try/finally": {
+        "prefix": "tf",
+        "body": "try {\n\t${0}\n} finally {\n\t\n}"
+    },
+    "try/catch/finally": {
+        "prefix": "tcf",
+        "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n} finally {\n\t\n}"
+    },
+    "anonymous function": {
+        "prefix": "fan",
+        "body": "function (${1:arguments}) {${0}}"
+    },
+    "named function": {
+        "prefix": "fn",
+        "body": "function ${1:name} (${2:arguments}) {\n\t${0}\n}"
+    },
+    "async function": {
+        "prefix": "asf",
+        "body": "async function (${1:arguments}) {\n\t${0}\n}"
+    },
+    "async arrow function": {
+        "prefix": "aa",
+        "body": "async (${1:arguments}) => {\n\t${0}\n}"
+    },
+    "immediately-invoked function expression": {
+        "prefix": "iife",
+        "body": ";(function (${1:arguments}) {\n\t${0}\n})(${2})"
+    },
+    "async immediately-invoked function expression": {
+        "prefix": "aiife",
+        "body": ";(async (${1:arguments}) => {\n\t${0}\n})(${2})"
+    },
+    "arrow function": {
+        "prefix": "af",
+        "body": "(${1:arguments}) => ${2:statement}"
+    },
+    "arrow function with destructuring": {
+        "prefix": "fd",
+        "body": "({${1:arguments}}) => ${2:statement}"
+    },
+    "arrow function with destructuring returning destructured": {
+        "prefix": "fdr",
+        "body": "({${1:arguments}}) => ${1:arguments}"
+    },
+    "arrow function with body": {
+        "prefix": "f",
+        "body": "(${1:arguments}) => {\n\t${0}\n}"
+    },
+    "arrow function with return": {
+        "prefix": "fr",
+        "body": "(${1:arguments}) => {\n\treturn ${0}\n}"
+    },
+    "generator function": {
+        "prefix": "gf",
+        "body": "function* (${1:arguments}) {\n\t${0}\n}"
+    },
+    "named generator": {
+        "prefix": "gfn",
+        "body": "function* ${1:name}(${2:arguments}) {\n\t${0}\n}"
+    },
+    "console.log": {
+        "prefix": "cl",
+        "body": "console.log(${0})"
+    },
+    "console.log with log": {
+        "prefix": "log",
+        "body": "console.log(${0})"
+    },
+    "console.log a variable": {
+        "prefix": "cv",
+        "body": "console.log('${1}:', ${1})"
+    },
+    "console.error": {
+        "prefix": "ce",
+        "body": "console.error(${0})"
+    },
+    "console.warn": {
+        "prefix": "cw",
+        "body": "console.warn(${0})"
+    },
+    "console.dir": {
+        "prefix": "cod",
+        "body": "console.dir('${1}:', ${1})"
+    },
+    "constructor": {
+        "prefix": "cn",
+        "body": "constructor () {\n\t${0}\n}"
+    },
+    "use strict": {
+        "prefix": "uss",
+        "body": "'use strict'"
+    },
+    "JSON.stringify()": {
+        "prefix": "js",
+        "body": "JSON.stringify($0)"
+    },
+    "JSON.parse()": {
+        "prefix": "jp",
+        "body": "JSON.parse($0)"
+    },
+    "method": {
+        "prefix": "m",
+        "body": "${1:method} (${2:arguments}) {\n\t${0}\n}"
+    },
+    "getter": {
+        "prefix": "get",
+        "body": "get ${1:property} () {\n\t${0}\n}"
+    },
+    "setter": {
+        "prefix": "set",
+        "body": "set ${1:property} (${2:value}) {\n\t${0}\n}"
+    },
+    "getter + setter": {
+        "prefix": "gs",
+        "body": "get ${1:property} () {\n\t${0}\n}\nset ${1:property} (${2:value}) {\n\t\n}"
+    },
+    "prototype method": {
+        "prefix": "proto",
+        "body": "${1:Class}.prototype.${2:method} = function (${3:arguments}) {\n\t${0}\n}"
+    },
+    "Object.assign": {
+        "prefix": "oa",
+        "body": "Object.assign(${1:dest}, ${2:source})"
+    },
+    "Object.create": {
+        "prefix": "oc",
+        "body": "Object.create(${1:obj})"
+    },
+    "Object.getOwnPropertyDescriptor": {
+        "prefix": "og",
+        "body": "Object.getOwnPropertyDescriptor(${1:obj}, '${2:prop}')"
+    },
+    "ternary": {
+        "prefix": "te",
+        "body": "${1:cond} ? ${2:true} : ${3:false}"
+    },
+    "ternary assignment": {
+        "prefix": "ta",
+        "body": "const ${0} = ${1:cond} ? ${2:true} : ${3:false}"
+    },
+    "Object.defineProperty": {
+        "prefix": "od",
+        "body": "Object.defineProperty(${1:dest}, '${2:prop}', {\n\t${0}\n})"
+    },
+    "Object.keys": {
+        "prefix": "ok",
+        "body": "Object.keys(${1:obj})"
+    },
+    "Object.values": {
+        "prefix": "ov",
+        "body": "Object.values(${1:obj})"
+    },
+    "Object.entries": {
+        "prefix": "oe",
+        "body": "Object.entries(${1:obj})"
+    },
+    "return": {
+        "prefix": "r",
+        "body": "return ${0}"
+    },
+    "return arrow function": {
+        "prefix": "rf",
+        "body": "return (${1:arguments}) => ${2:statement}"
+    },
+    "yield": {
+        "prefix": "y",
+        "body": "yield ${0}"
+    },
+    "return this": {
+        "prefix": "rt",
+        "body": "return ${0:this}"
+    },
+    "return null": {
+        "prefix": "rn",
+        "body": "return null"
+    },
+    "return new object": {
+        "prefix": "ro",
+        "body": "return {\n\t${0}\n}"
+    },
+    "return new array": {
+        "prefix": "ra",
+        "body": "return [\n\t${0}\n]"
+    },
+    "return promise": {
+        "prefix": "rp",
+        "body": "return new Promise((resolve, reject) => {\n\t${0}\n})"
+    },
+    "wrap selection in arrow function": {
+        "prefix": "wrap selection in arrow function",
+        "body": "() => {\n\t{$TM_SELECTED_TEXT}\n}",
+        "description": "wraps text in arrow function"
+    },
+    "wrap selection in async arrow function": {
+        "prefix": "wrap selection in async arrow function",
+        "body": "async () => {\n\t{$TM_SELECTED_TEXT}\n}",
+        "description": "wraps text in arrow function"
+    },
+    "define module": {
+        "prefix": "define",
+        "body": [
+            "define([",
+            "\t'require',",
+            "\t'${1:dependency}'",
+            "], function(require, ${2:factory}) {",
+            "\t'use strict';",
+            "\t$0",
+            "});"
+        ],
+        "description": "define module"
+    },
+    "For Loop": {
+        "prefix": "for",
+        "body": [
+            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
+            "\tconst ${3:element} = ${2:array}[${1:index}];",
+            "\t$0",
+            "}"
+        ],
+        "description": "For Loop"
+    },
+    "For-Each Loop": {
+        "prefix": "foreach",
+        "body": ["${1:array}.forEach(${2:element} => {", "\t$0", "});"],
+        "description": "For-Each Loop"
+    },
+    "For-In Loop": {
+        "prefix": "forin",
+        "body": [
+            "for (const ${1:key} in ${2:object}) {",
+            "\tif (${2:object}.hasOwnProperty(${1:key})) {",
+            "\t\tconst ${3:element} = ${2:object}[${1:key}];",
+            "\t\t$0",
+            "\t}",
+            "}"
+        ],
+        "description": "For-In Loop"
+    },
+    "For-Of Loop": {
+        "prefix": "forof",
+        "body": ["for (const ${1:iterator} of ${2:object}) {", "\t$0", "}"],
+        "description": "For-Of Loop"
+    },
+    "For-Await-Of Loop": {
+        "prefix": "forawaitof",
+        "body": [
+            "for await (const ${1:iterator} of ${2:object}) {",
+            "\t$0",
+            "}"
+        ],
+        "description": "For-Await-Of Loop"
+    },
+    "Function Statement": {
+        "prefix": "function",
+        "body": ["function ${1:name}(${2:params}) {", "\t$0", "}"],
+        "description": "Function Statement"
+    },
+    "If Statement": {
+        "prefix": "if",
+        "body": ["if (${1:condition}) {", "\t$0", "}"],
+        "description": "If Statement"
+    },
+    "If-Else Statement": {
+        "prefix": "ifelse",
+        "body": ["if (${1:condition}) {", "\t$2", "} else {", "\t$0", "}"],
+        "description": "If-Else Statement"
+    },
+    "New Statement": {
+        "prefix": "new",
+        "body": ["const ${1:name} = new ${2:type}(${3:arguments});$0"],
+        "description": "New Statement"
+    },
+    "Switch Statement": {
+        "prefix": "switch",
+        "body": [
+            "switch (${1:key}) {",
+            "\tcase ${2:value}:",
+            "\t\t$0",
+            "\t\tbreak;",
+            "",
+            "\tdefault:",
+            "\t\tbreak;",
+            "}"
+        ],
+        "description": "Switch Statement"
+    },
+    "While Statement": {
+        "prefix": "while",
+        "body": ["while (${1:condition}) {", "\t$0", "}"],
+        "description": "While Statement"
+    },
+    "Do-While Statement": {
+        "prefix": "dowhile",
+        "body": ["do {", "\t$0", "} while (${1:condition});"],
+        "description": "Do-While Statement"
+    },
+    "Try-Catch Statement": {
+        "prefix": "trycatch",
+        "body": ["try {", "\t$0", "} catch (${1:error}) {", "\t", "}"],
+        "description": "Try-Catch Statement"
+    },
+    "Set Timeout Function": {
+        "prefix": "settimeout",
+        "body": ["setTimeout(() => {", "\t$0", "}, ${1:timeout});"],
+        "description": "Set Timeout Function"
+    },
+    "Set Interval Function": {
+        "prefix": "setinterval",
+        "body": ["setInterval(() => {", "\t$0", "}, ${1:interval});"],
+        "description": "Set Interval Function"
+    },
+    "Import external module.": {
+        "prefix": "import statement",
+        "body": ["import { $0 } from \"${1:module}\";"],
+        "description": "Import external module."
+    },
+    "Region Start": {
+        "prefix": "#region",
+        "body": ["//#region $0"],
+        "description": "Folding Region Start"
+    },
+    "Region End": {
+        "prefix": "#endregion",
+        "body": ["//#endregion"],
+        "description": "Folding Region End"
+    },
+    "Log warning to console": {
+        "prefix": "warn",
+        "body": ["console.warn($1);", "$0"],
+        "description": "Log warning to the console"
+    },
+    "Log error to console": {
+        "prefix": "error",
+        "body": ["console.error($1);", "$0"],
+        "description": "Log error to the console"
+    },
+    "concat": {
+        "prefix": "concat",
+        "body": ["concat($1);", "$0"],
+        "description": "The concat() method concatenates the string arguments to the calling string and returns a new string."
+    },
+    "endsWith": {
+        "prefix": "endsWith",
+        "body": ["endsWith($1);", "$0"],
+        "description": "The endsWith() method determines whether a string ends with the characters of a specified string, returning true or false as appropriate.    "
+    },
+    "fromCharCode": {
+        "prefix": "fromCharCode",
+        "body": ["fromCharCode($1);", "$0"],
+        "description": "The static String.fromCharCode() method returns a string created from the specified sequence of UTF-16 code units."
+    },
+    "includes": {
+        "prefix": "includes",
+        "body": ["includes($1);", "$0"],
+        "description": "The includes() method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate."
+    },
+    "indexOf": {
+        "prefix": "indexOf",
+        "body": ["indexOf($1);", "$0"],
+        "description": "The indexOf() method, given one argument: a substring to search for, searches the entire calling string, and returns the index of the first occurrence of the specified substring. Given a second argument: a number, the method returns the first occurrence of the specified substring at an index greater than or equal to the specified number."
+    },
+    "lastIndexOf": {
+        "prefix": "lastIndexOf",
+        "body": ["lastIndexOf($1);", "$0"],
+        "description": "The lastIndexOf() method, given one argument: a substring to search for, searches the entire calling string, and returns the index of the last occurrence of the specified substring. Given a second argument: a number, the method returns the last occurrence of the specified substring at an index less than or equal to the specified number."
+    },
+    "localeCompare": {
+        "prefix": "localeCompare",
+        "body": ["localeCompare($1);", "$0"],
+        "description": "The localeCompare() method returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order. In implementations with Intl.Collator API support, this method simply calls Intl.Collator."
+    },
+    "match": {
+        "prefix": "match",
+        "body": ["match($1);", "$0"],
+        "description": "The match() method retrieves the result of matching a string against a regular expression."
+    },
+    "matchAll": {
+        "prefix": "matchAll",
+        "body": ["matchAll($1);", "$0"],
+        "description": "The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups."
+    },
+    "normalize": {
+        "prefix": "normalize",
+        "body": ["normalize($1);", "$0"],
+        "description": "The normalize() method returns the Unicode Normalization Form of the string."
+    },
+    "repeat": {
+        "prefix": "repeat",
+        "body": ["repeat($1);", "$0"],
+        "description": "The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together."
+    },
+    "replace": {
+        "prefix": "replace",
+        "body": ["replace($1, $2);", "$0"],
+        "description": "The replace() method returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged."
+    },
+    "replaceAll": {
+        "prefix": "replaceAll",
+        "body": ["replaceAll($1, $2);", "$0"],
+        "description": "The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. The original string is left unchanged."
+    },
+    "search": {
+        "prefix": "search",
+        "body": ["search($1);", "$0"],
+        "description": "The search() method executes a search for a match between a regular expression and this String object."
+    },
+    "slice": {
+        "prefix": "slice",
+        "body": ["slice($1);", "$0"],
+        "description": "The slice() method extracts a section of a string and returns it as a new string, without modifying the original string."
+    },
+    "split": {
+        "prefix": "split",
+        "body": ["split($1);", "$0"],
+        "description": "The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array."
+    },
+    "startsWith": {
+        "prefix": "startsWith",
+        "body": ["startsWith($1);", "$0"],
+        "description": "The startsWith() method determines whether a string begins with the characters of a specified string, returning true or false as appropriate."
+    },
+    "substring": {
+        "prefix": "substring",
+        "body": ["substring($1);", "$0"],
+        "description": "The substring() method returns the part of the string between the start and end indexes, or to the end of the string."
+    },
+    "toLocaleLowerCase": {
+        "prefix": "toLocaleLowerCase",
+        "body": ["toLocaleLowerCase($1);", "$0"],
+        "description": "The toLocaleLowerCase() method returns the calling string value converted to lower case, according to any locale-specific case mappings."
+    },
+    "toLocaleUpperCase": {
+        "prefix": "toLocaleUpperCase",
+        "body": ["toLocaleUpperCase($1);", "$0"],
+        "description": "The toLocaleUpperCase() method returns the calling string value converted to upper case, according to any locale-specific case mappings."
+    },
+    "toLowerCase": {
+        "prefix": "toLowerCase",
+        "body": ["toLowerCase()"],
+        "description": "The toLowerCase() method returns the calling string value converted to lower case."
+    },
+    "toString": {
+        "prefix": "toString",
+        "body": ["toString()"],
+        "description": "The toString() method returns a string representing the specified string value."
+    },
+    "toUpperCase": {
+        "prefix": "toUpperCase",
+        "body": ["toUpperCase()"],
+        "description": "The toUpperCase() method returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one)."
+    },
+    "valueOf": {
+        "prefix": "valueOf",
+        "body": ["valueOf()"],
+        "description": "The valueOf() method returns the primitive value of a String object."
+    },
+    "isFinite": {
+        "prefix": "isFinite",
+        "body": ["isFinite($1);", "$0"],
+        "description": "The Number.isFinite() method determines whether the passed value is a finite number — that is, it checks that a given value is a number, and the number is neither positive Infinity, negative Infinity, nor NaN."
+    },
+    "parseFloat": {
+        "prefix": "parseFloat",
+        "body": ["parseFloat($1);", "$0"],
+        "description": "The Number.parseFloat() method parses an argument and returns a floating point number. If a number cannot be parsed from the argument, it returns NaN."
+    },
+    "isNaN": {
+        "prefix": "isNaN",
+        "body": ["isNaN($1);", "$0"],
+        "description": "The Number.isNaN() method determines whether the passed value is the number value NaN, and returns false if the input is not of the Number type. It is a more robust version of the original, global isNaN() function."
+    },
+    "parseInt": {
+        "prefix": "parseInt",
+        "body": ["parseInt($1);", "$0"],
+        "description": "The Number.parseInt() method parses a string argument and returns an integer of the specified radix or base."
+    },
+    "toFixed": {
+        "prefix": "toFixed",
+        "body": ["toFixed($1);", "$0"],
+        "description": "The toFixed() method formats a number using fixed-point notation."
+    },
+    "toLocaleString": {
+        "prefix": "toLocaleString",
+        "body": ["toLocaleString($1);", "$0"],
+        "description": "The toLocaleString() method returns a string with a language-sensitive representation of this number. In implementations with Intl.NumberFormat API support, this method simply calls Intl.NumberFormat."
+    },
+    "apply": {
+        "prefix": "apply",
+        "body": ["apply($1);", "$0"],
+        "description": "The apply() method calls the specified function with a given this value, and arguments provided as an array (or an array-like object)."
+    },
+    "bind": {
+        "prefix": "bind",
+        "body": ["bind($1);", "$0"],
+        "description": "The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called."
+    },
+    "call": {
+        "prefix": "call",
+        "body": ["call($1);", "$0"],
+        "description": "The call() method calls the function with a given this value and arguments provided individually."
+    },
+    "defineProperties": {
+        "prefix": "defineProperties",
+        "body": ["defineProperties($1, $2);", "$0"],
+        "description": ""
+    },
+    "entries": {
+        "prefix": "entries",
+        "body": ["entries($1);", "$0"],
+        "description": "The Object.entries() method returns an array of a given object's own enumerable string-keyed property key-value pairs."
+    },
+    "values": {
+        "prefix": "values",
+        "body": ["values($1);", "$0"],
+        "description": "The Object.values() method returns an array of a given object's own enumerable string-keyed property values."
+    },
+    "focus": {
+        "prefix": "focus",
+        "body": ["focus()"],
+        "description": "The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element that will receive keyboard and similar events by default."
+    },
+    "blur": {
+        "prefix": "blur",
+        "body": ["blur()"],
+        "description": ""
+    },
+    "innerText": {
+        "prefix": "innerText",
+        "body": ["innerText"],
+        "description": "The innerText property of the HTMLElement interface represents the rendered text content of a node and its descendants."
+    },
+    "push": {
+        "prefix": "push",
+        "body": ["push($1);", "$0"],
+        "description": "The push() method adds one or more elements to the end of an array and returns the new length of the array."
+    },
+    "reverse": {
+        "prefix": "reverse",
+        "body": ["reverse();", "$0"],
+        "description": "The reverse() method reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first. In other words, elements order in the array will be turned towards the direction opposite to that previously stated."
+    },
+    "sort": {
+        "prefix": "sort",
+        "body": ["sort($1);", "$0"],
+        "description": "The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values."
+    },
+    "splice": {
+        "prefix": "splice",
+        "body": ["splice($1);", "$0"],
+        "description": "The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice()."
+    },
+    "toJSON": {
+        "prefix": "toJSON",
+        "body": ["toJSON();", "$0"],
+        "description": "The toJSON() method returns a string representation of the Date object."
+    },
+    "toDateString": {
+        "prefix": "toDateString",
+        "body": ["toDateString();", "$0"],
+        "description": ""
+    },
+    "setTime": {
+        "prefix": "setTime",
+        "body": ["setTime($1);", "$0"],
+        "description": "The setTime() method sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC."
+    },
+    "setDate": {
+        "prefix": "setDate",
+        "body": ["setDate($1);", "$0"],
+        "description": "The setDate() method changes the day of the month of a given Date instance, based on local time."
+    }
+}
diff --git a/snippets/javascript/jsdoc.json b/snippets/javascript/jsdoc.json
new file mode 100644
index 00000000..c2e9bcb4
--- /dev/null
+++ b/snippets/javascript/jsdoc.json
@@ -0,0 +1,630 @@
+{
+    "comment": {
+        "prefix": "/**",
+        "body": [
+            "/**",
+            " * ${1:What it does}.",
+            " *",
+            " * @param ${3:name} - ${4:Parameter description.}",
+            " * @returns ${2:Type and description of the returned object.}",
+            " *",
+            " * @example",
+            " * ```",
+            " * ${5:Write me later.}$0",
+            " * ```",
+            " */"
+        ],
+        "description": "A full JSDoc comment with description, parameters, return, and example."
+    },
+    "comment simple": {
+        "prefix": "/*",
+        "body": [
+            "/**",
+            " * ${1:Comment.}$0",
+            " */"
+        ],
+        "description": "A simpple JSDoc comment."
+    },
+    "abstract": {
+        "prefix": "@abstract",
+        "body": [
+            "@abstract$0"
+        ],
+        "description": "This member must be implemented (or overridden) by the inheritor. Synonysm of @virtual."
+    },
+    "virtual": {
+        "prefix": "@virtual",
+        "body": [
+            "@virlual$0"
+        ],
+        "description": "This member must be implemented (or overridden) by the inheritor. Synonysm of @abstract."
+    },
+    "access": {
+        "prefix": "@access",
+        "body": [
+            "@access ${1:private}$0"
+        ],
+        "description": "Specify the access level of this member (private, package-private, public, or protected)."
+    },
+    "alias": {
+        "prefix": "@alias",
+        "body": [
+            "@alias ${1:name}$0"
+        ],
+        "description": "Treat a member as if it had a different name."
+    },
+    "async": {
+        "prefix": "@async",
+        "body": [
+            "@async$0"
+        ],
+        "description": "Indicate that the function is asynchronous."
+    },
+    "augments": {
+        "prefix": "@augments",
+        "body": [
+            "@augments ${1:namepath}$0"
+        ],
+        "description": "The @augments or @extends tag indicates that a symbol inherits from, and potentially adds to, a parent symbol. You can use this tag to document both class-based and prototype-based inheritance. Synonysm of @extends."
+    },
+    "extends": {
+        "prefix": "@extends",
+        "body": [
+            "@extends ${1:namepath}$0"
+        ],
+        "description": "The @augments or @extends tag indicates that a symbol inherits from, and potentially adds to, a parent symbol. You can use this tag to document both class-based and prototype-based inheritance. Synonysm of @augments."
+    },
+    "author": {
+        "prefix": "@author",
+        "body": [
+            "@author ${1:author_name} <${2:author_email}$0>"
+        ],
+        "description": "Identify the author of an item."
+    },
+    "borrows": {
+        "prefix": "@borrows",
+        "body": [
+            "@borrows ${1:that namepath} as ${2:this namepath}$0"
+        ],
+        "description": "The @borrows tag allows you to add documentation for another symbol to your documentation. This tag would be useful if you had more than one way to reference a function, but you didn't want to duplicate the same documentation in two places."
+    },
+    "callback": {
+        "prefix": "@callback",
+        "body": [
+            "@callback ${1:namepath}$0"
+        ],
+        "description": "The @callback tag provides information about a callback function that can be passed to other functions, including the callback's parameters and return value. You can include any of the tags that you can provide for a @method."
+    },
+    "class": {
+        "prefix": "@class",
+        "body": [
+            "@class$0"
+        ],
+        "description": "This function is intended to be called with the \"new\" keyword. Synonysm of @constructor."
+    },
+    "constructor": {
+        "prefix": "@constructor",
+        "body": [
+            "@constructor$0"
+        ],
+        "description": "This function is intended to be called with the \"new\" keyword. Synonysm of @class."
+    },
+    "classdesc": {
+        "prefix": "@classdesc",
+        "body": [
+            "@classdesc ${1:some description}$0"
+        ],
+        "description": "Use the following text to describe the entire class."
+    },
+    "constant": {
+        "prefix": "@constant",
+        "body": [
+            "@constant$0"
+        ],
+        "description": "Document an object as a constant. Synonysm of @const."
+    },
+    "constructs": {
+        "prefix": "@constructs",
+        "body": [
+            "@constructs$0"
+        ],
+        "description": "This function member will be the constructor for the previous class."
+    },
+    "copyright": {
+        "prefix": "@copyright",
+        "body": [
+            "@copyright ${1:some copyright text}$0"
+        ],
+        "description": "Document some copyright information."
+    },
+    "default": {
+        "prefix": "@default",
+        "body": [
+            "@default$0"
+        ],
+        "description": "The @default tag allows you to document the assigned value of a symbol. You can supply this tag with a value yourself or you can allow JSDoc to automatically document the value from the source code -- only possible when the documented symbol is being assigned a single, simple value that is either: a string, a number, a boolean or null. Synonysm of @defaultvalue."
+    },
+    "defaultvalue": {
+        "prefix": "@defaultvalue",
+        "body": [
+            "@defaultvalue$0"
+        ],
+        "description": "The @default tag allows you to document the assigned value of a symbol. You can supply this tag with a value yourself or you can allow JSDoc to automatically document the value from the source code -- only possible when the documented symbol is being assigned a single, simple value that is either: a string, a number, a boolean or null. Synonysm of @default."
+    },
+    "deprecated": {
+        "prefix": "@deprecated",
+        "body": [
+            "@deprecated$0"
+        ],
+        "description": "Document that this is no longer the preferred way."
+    },
+    "description": {
+        "prefix": "@description",
+        "body": [
+            "@description ${1:some description}$0"
+        ],
+        "description": "The @description tag allows you to provide a general description of the symbol you are documenting. The description may include HTML markup. It may also include Markdown formatting if the Markdown plugin is enabled. Synonysm of @desc."
+    },
+    "desc": {
+        "prefix": "@desc",
+        "body": [
+            "@desc ${1:some description}$0"
+        ],
+        "description": "The @description tag allows you to provide a general description of the symbol you are documenting. The description may include HTML markup. It may also include Markdown formatting if the Markdown plugin is enabled. Synonysm of @description."
+    },
+    "enum": {
+        "prefix": "@enum",
+        "body": [
+            "@enum ${1:type}$0"
+        ],
+        "description": "The @enum tag documents a collection of static properties whose values are all of the same type."
+    },
+    "event": {
+        "prefix": "@event",
+        "body": [
+            "@event ${1:class name}#[event]:${2:eventName}$0"
+        ],
+        "description": "Provide an example of how to use a documented item. The text that follows this tag will be displayed as highlighted code."
+    },
+    "example": {
+        "prefix": "@example",
+        "body": [
+            "@example ${1:some example}$0"
+        ],
+        "description": "The @event tag allows you to document an event that can be fired. A typical event is represented by an object with a defined set of properties."
+    },
+    "exports": {
+        "prefix": "@exports",
+        "body": [
+            "@exports ${1:moduleName}$0"
+        ],
+        "description": "Use the @exports tag when documenting JavaScript modules that export anything other than the \"exports\" object or the \"module.exports\" property."
+    },
+    "external": {
+        "prefix": "@external",
+        "body": [
+            "@external ${1:nameOfExternal}$0"
+        ],
+        "description": "The @external tag identifies a class, namespace, or module that is defined outside of the current package. Synonysm of @host."
+    },
+    "host": {
+        "prefix": "@host",
+        "body": [
+            "@host ${1:nameOfExternal}$0"
+        ],
+        "description": "The @external tag identifies a class, namespace, or module that is defined outside of the current package. Synonysm of @external."
+    },
+    "file": {
+        "prefix": "@file",
+        "body": [
+            "@file ${1:some description}$0"
+        ],
+        "description": "The @file tag provides a description for a file. Use the tag in a JSDoc comment at the beginning of the file. Synonysm of @fileoverview and @overview."
+    },
+    "fileoverview": {
+        "prefix": "@fileoverview",
+        "body": [
+            "@fileoverview ${1:some description}$0"
+        ],
+        "description": "The @file tag provides a description for a file. Use the tag in a JSDoc comment at the beginning of the file. Synonysm of @file and @overview."
+    },
+    "overview": {
+        "prefix": "@overview",
+        "body": [
+            "@overview ${1:some description}$0"
+        ],
+        "description": "The @file tag provides a description for a file. Use the tag in a JSDoc comment at the beginning of the file. Synonysm of @file and @fileoverview"
+    },
+    "fires": {
+        "prefix": "@fires",
+        "body": [
+            "@fires ${1:className}#[event:]${2:eventName}$0"
+        ],
+        "description": "Describe the events this method may fire. Synonysm of @emits."
+    },
+    "emits": {
+        "prefix": "@emits",
+        "body": [
+            "@emits ${1:className}#[event:]${2:eventName}$0"
+        ],
+        "description": "Describe the events this method may fire. Synonysm of @fires."
+    },
+    "function": {
+        "prefix": "@function",
+        "body": [
+            "@function$0"
+        ],
+        "description": "This marks an object as being a function, even though it may not appear to be one to the parser. Synonysm of @func and @method."
+    },
+    "func": {
+        "prefix": "@func",
+        "body": [
+            "@func$0"
+        ],
+        "description": "This marks an object as being a function, even though it may not appear to be one to the parser. Synonysm of @function and @method."
+    },
+    "method": {
+        "prefix": "@method",
+        "body": [
+            "@method$0"
+        ],
+        "description": "This marks an object as being a function, even though it may not appear to be one to the parser. Synonysm of @function and @func."
+    },
+    "generator": {
+        "prefix": "@generator",
+        "body": [
+            "@generator$0"
+        ],
+        "description": "Indicate that a function is a generator function."
+    },
+    "global": {
+        "prefix": "@global",
+        "body": [
+            "@global$0"
+        ],
+        "description": "Document a global object."
+    },
+    "hideconstructor": {
+        "prefix": "@hideconstructor",
+        "body": [
+            "@hideconstructor$0"
+        ],
+        "description": "Indicate that the constructor should not be displayed."
+    },
+    "ignore": {
+        "prefix": "@ignore",
+        "body": [
+            "@ignore$0"
+        ],
+        "description": "Omit a symbol from the documentation."
+    },
+    "implements": {
+        "prefix": "@implements",
+        "body": [
+            "@implements$0"
+        ],
+        "description": "This symbol implements an interface."
+    },
+    "inheritdoc": {
+        "prefix": "@inheritdoc",
+        "body": [
+            "@inheritdoc$0"
+        ],
+        "description": "Indicate that a symbol should inherit its parent's documentation."
+    },
+    "inner": {
+        "prefix": "@inner",
+        "body": [
+            "@inner$0"
+        ],
+        "description": "Using the @inner tag will mark a symbol as an inner member of its parent symbol. This means it can be referred to by \"Parent~Child\"."
+    },
+    "instance": {
+        "prefix": "@instance",
+        "body": [
+            "@instance$0"
+        ],
+        "description": "Using the @instance tag will mark a symbol as an instance member of its parent symbol. This means it can be referred to by \"Parent#Child\"."
+    },
+    "interface": {
+        "prefix": "@interface",
+        "body": [
+            "@interface$0"
+        ],
+        "description": "This symbol is an interface that others can implement."
+    },
+    "kind": {
+        "prefix": "@kind",
+        "body": [
+            "@kind ${1:kindName}$0"
+        ],
+        "description": "What kind of symbol is this. Possible values are: class, constant, event, external, file, function, member, mixin, module, namespace, typedef."
+    },
+    "lends": {
+        "prefix": "@lends",
+        "body": [
+            "@lends ${1:namePath}$0"
+        ],
+        "description": "The @lends tag allows you to document all the members of an object literal as if they were members of a symbol with the given name. You might want to do this if you are passing an object literal into a function that creates a named class from its members."
+    },
+    "license": {
+        "prefix": "@license",
+        "body": [
+            "@license ${1:identifier}$0"
+        ],
+        "description": "Identify the license that applies to this code."
+    },
+    "listens": {
+        "prefix": "@listens",
+        "body": [
+            "@listens ${1:eventName}$0"
+        ],
+        "description": "List the events that a symbol listens for."
+    },
+    "member": {
+        "prefix": "@member",
+        "body": [
+            "@member {type}$0"
+        ],
+        "description": "Document a member. Synonysm or @var."
+    },
+    "var": {
+        "prefix": "@var",
+        "body": [
+            "@var {type}$0"
+        ],
+        "description": "Document a member. Synonysm or @member."
+    },
+    "memberof": {
+        "prefix": "@memberof",
+        "body": [
+            "@memberof ${1:parentNamePath}$0"
+        ],
+        "description": "This symbol belongs to a parent symbol."
+    },
+    "mixes": {
+        "prefix": "@mixes",
+        "body": [
+            "@mixes ${1:OtherObjectPath}$0"
+        ],
+        "description": "This object mixes in all the members from another object."
+    },
+    "mixin": {
+        "prefix": "@mixin",
+        "body": [
+            "@mixin ${1:MixinName}$0"
+        ],
+        "description": "Document a mixin object."
+    },
+    "module": {
+        "prefix": "@module",
+        "body": [
+            "@module ${1:myModule}$0"
+        ],
+        "description": "Document a JavaScript module."
+    },
+    "name": {
+        "prefix": "@name",
+        "body": [
+            "@name ${1:namePath}$0"
+        ],
+        "description": "The @name tag forces JSDoc to associate the remainder of the JSDoc comment with the given name, ignoring all surrounding code. This tag is best used in \"virtual comments\" for symbols that are not readily visible in the code, such as methods that are generated at runtime."
+    },
+    "namespace": {
+        "prefix": "@namespace",
+        "body": [
+            "@namespace ${1:someName}$0"
+        ],
+        "description": "The @namespace tag indicates that an object creates a namespace for its members. You can also write a virtual JSDoc comment that defines a namespace used by your code."
+    },
+    "override": {
+        "prefix": "@override",
+        "body": [
+            "@override$0"
+        ],
+        "description": "The @override tag indicates that a symbol overrides a symbol with the same name in a parent class."
+    },
+    "package": {
+        "prefix": "@package",
+        "body": [
+            "@package$0"
+        ],
+        "description": "The @package tag marks a symbol as package-private. Typically, this tag indicates that a symbol is available only to code in the same directory as the source file for this symbol."
+    },
+    "param": {
+        "prefix": "@param",
+        "body": [
+            "@param {${1:type}} ${2:paranName} - ${3:paramDescription}$0"
+        ],
+        "description": "Provides the name, type, and description of a function parameter. Synonysm of @arg and @argument."
+    },
+    "arg": {
+        "prefix": "@arg",
+        "body": [
+            "@arg {${1:type}} ${2:paranName} - ${3:paramDescription}$0"
+        ],
+        "description": "Provides the name, type, and description of a function parameter. Synonysm of @param and @argument."
+    },
+    "argument": {
+        "prefix": "@argument",
+        "body": [
+            "@argument {${1:type}} ${2:paranName} - ${3:paramDescription}$0"
+        ],
+        "description": "Provides the name, type, and description of a function parameter. Synonysm of @param and @arg."
+    },
+    "private": {
+        "prefix": "@private",
+        "body": [
+            "@private$0"
+        ],
+        "description": "Indicate this symbol is meant to be private."
+    },
+    "property": {
+        "prefix": "@property",
+        "body": [
+            "@property {${1:type}} ${2:propertyName.something} - ${3:propertyDescription}$0"
+        ],
+        "description": "The @property tag is a way to easily document a list of static properties of a class, namespace or other object."
+    },
+    "protected": {
+        "prefix": "@protected",
+        "body": [
+            "@protected$0"
+        ],
+        "description": "The @protected tag marks a symbol as protected. Typically, this tag indicates that a symbol is only available, or should only be used, within the current module."
+    },
+    "public": {
+        "prefix": "@publilc",
+        "body": [
+            "@public$0"
+        ],
+        "description": "Indicated this symbol is meant to be public."
+    },
+    "readonly": {
+        "prefix": "@readonly",
+        "body": [
+            "@readonly$0"
+        ],
+        "description": "Indicates this symbol is meant to be read-only."
+    },
+    "requires": {
+        "prefix": "@requires",
+        "body": [
+            "@requires ${1:moduleName}$0"
+        ],
+        "description": "Indicates a required module."
+    },
+    "returns": {
+        "prefix": "@returns",
+        "body": [
+            "@returns ${1:type} ${2:description}$0"
+        ],
+        "description": "Documents the value a function returns. Synonysm of @return."
+    },
+    "return": {
+        "prefix": "@return",
+        "body": [
+            "@return ${1:type} ${2:description}$0"
+        ],
+        "description": "Documents the value a function returns. Synonysm of @returns."
+    },
+    "see": {
+        "prefix": "@see",
+        "body": [
+            "@see ${1:text}$0"
+        ],
+        "description": "Refer to some other documentation for more information. It accepts text or {@link foobar}."
+    },
+    "since": {
+        "prefix": "@since",
+        "body": [
+            "@since ${1:version}$0"
+        ],
+        "description": "Version in which this symbol was added."
+    },
+    "static": {
+        "prefix": "@static",
+        "body": [
+            "@static$0"
+        ],
+        "description": "Indicates this is an static member."
+    },
+    "summary": {
+        "prefix": "@summary",
+        "body": [
+            "@summary ${1:summary goes here}$0"
+        ],
+        "description": "A shorter version of the full description."
+    },
+    "this": {
+        "prefix": "@this",
+        "body": [
+            "@this ${1:namePath}$0"
+        ],
+        "description": "The @this tag indicates what the this keyword refers to when used within another symbol."
+    },
+    "throws": {
+        "prefix": "@throws",
+        "body": [
+            "@throws ${1:errorName} ${2:description}$0"
+        ],
+        "description": "Describe what errors can be thrown. Synonysm of @exception."
+    },
+    "exception": {
+        "prefix": "@exception",
+        "body": [
+            "@exception ${1:errorName} ${2:description}$0"
+        ],
+        "description": "Describe what errors can be thrown. Synonysm of @throws."
+    },
+    "todo": {
+        "prefix": "@todo",
+        "body": [
+            "@todo ${1:text describing thing to do}$0"
+        ],
+        "description": "Documents a task to be completed."
+    },
+    "tutorial": {
+        "prefix": "@tutorial",
+        "body": [
+            "@tutorial$0"
+        ],
+        "description": "Link to a tutorial file."
+    },
+    "type": {
+        "prefix": "@type",
+        "body": [
+            "@type ${1:typeName}$0"
+        ],
+        "description": "Documents the type of the object."
+    },
+    "typedef": {
+        "prefix": "@typedef",
+        "body": [
+            "@typedef ${1:type} ${2:namePath}$0"
+        ],
+        "description": "Documents a custom type definition."
+    },
+    "variation": {
+        "prefix": "@variation",
+        "body": [
+            "@variation ${1:variationNumber}$0"
+        ],
+        "description": "Distinguish different objects with the same name."
+    },
+    "version": {
+        "prefix": "@version",
+        "body": [
+            "@version ${1:versionTag}$0"
+        ],
+        "description": "Documents the version number of an item."
+    },
+    "yields": {
+        "prefix": "@yields",
+        "body": [
+            "@yields {${1:type}} ${2:description}$0"
+        ],
+        "description": "Document the value yielded by a generator function."
+    },
+    "link": {
+        "prefix": "@link",
+        "body": [
+            "@link ${1:namePathOrUrl}$0"
+        ],
+        "description": "Link to another item in the documentation. Synonysm of @linkcode and @linkplain."
+    },
+    "linkcode": {
+        "prefix": "@linkcode",
+        "body": [
+            "@linkcode ${1:namePathOrUrl}$0"
+        ],
+        "description": "Link to another item in the documentation. Synonysm of @link and @linkplain."
+    },
+    "linkplain": {
+        "prefix": "@linkplain",
+        "body": [
+            "@linkplain ${1:namePathOrUrl}$0"
+        ],
+        "description": "Link to another item in the documentation. Synonysm of @link and @linkcode."
+    }
+}
diff --git a/snippets/javascript/next-ts.json b/snippets/javascript/next-ts.json
new file mode 100644
index 00000000..c4a3e8a9
--- /dev/null
+++ b/snippets/javascript/next-ts.json
@@ -0,0 +1,95 @@
+{
+    "import Next.js GetStaticProps type": {
+        "prefix": "igsp",
+        "body": "import { GetStaticProps } from 'next';",
+        "description": "Next.js GetStaticProps type import"
+    },
+    "import Next.js InferGetStaticPropsType": {
+        "prefix": "infg",
+        "body": "import { InferGetStaticPropsType } from 'next'",
+        "description": "Next.js InferGetStaticPropsType import"
+    },
+    "use Next.js InferGetStaticPropsType": {
+        "prefix": "uifg",
+        "body": [
+            "function ${1:${TM_FILENAME_BASE}}({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {",
+            "\treturn $2",
+            "}"
+        ],
+        "description": "use InferGetStaticPropsType snippet"
+    },
+    "Next.js Get initial props outside Component": {
+        "prefix": "gip",
+        "body": [
+            "${1:${TM_FILENAME_BASE}}.getInitialProps = async ({ req }) => {",
+            "\treturn $2",
+            "}"
+        ],
+        "description": "Next.js Get initial props outside Component"
+    },
+    "Next.js getInitialProps() inside Class Component": {
+        "prefix": "cgip",
+        "body": ["static async getInitialProps() {", "\treturn { $1 };", "}"],
+        "description": "Next.js static async getInitialProps() inside Class Component"
+    },
+    "Next.js getStaticProps() export": {
+        "prefix": "gsp",
+        "body": [
+            "export const getStaticProps: GetStaticProps = async (context) => {",
+            "\treturn {",
+            "\t\tprops: {$1}",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js getStaticProps() export"
+    },
+    "Next.js getStaticPaths() export": {
+        "prefix": "gspt",
+        "body": [
+            "export const getStaticPaths: GetStaticPaths = async () => {",
+            "\treturn {",
+            "\t\tpaths: [",
+            "\t\t\t{ params: { $1 }}",
+            "\t\t],",
+            "\t\tfallback: $2",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js pre-renders all the static paths https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation"
+    },
+    "import Next.js GetStaticPaths type": {
+        "prefix": "igspt",
+        "body": "import { GetStaticPaths } from 'next'",
+        "description": "Next.js GetStaticPaths type import"
+    },
+    "Next.js getServerSideProps() export": {
+        "prefix": "gssp",
+        "body": [
+            "export const getServerSideProps: GetServerSideProps = async (context) => {",
+            "\treturn {",
+            "\t\tprops: {$1}",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js getServerSideProps() export https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering"
+    },
+    "import Next.js GetServerSideProps type": {
+        "prefix": "igss",
+        "body": "import { GetServerSideProps } from 'next'",
+        "description": "Next.js GetServerSideProps type import"
+    },
+    "import Next.js InferGetServerSidePropsType": {
+        "prefix": "ifgss",
+        "body": "import { InferGetServerSidePropsType } from 'next'",
+        "description": "Next.js InferGetServerSidePropsType import"
+    },
+    "use Next.js InferGetServerSidePropsType": {
+        "prefix": "ufgss",
+        "body": [
+            "function ${1:${TM_FILENAME_BASE}}({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {",
+            "\treturn $2",
+            "}"
+        ],
+        "description": "use InferGetServerSidePropsType snippet"
+    }
+}
diff --git a/snippets/javascript/next.json b/snippets/javascript/next.json
new file mode 100644
index 00000000..08eb2df6
--- /dev/null
+++ b/snippets/javascript/next.json
@@ -0,0 +1,125 @@
+{
+    "Next.js Get initial props outside Component": {
+        "prefix": "gip",
+        "body": "${1:${TM_FILENAME_BASE}}.getInitialProps = ({ req }) => {\treturn $2}",
+        "description": "Next.js Get initial props outside Component"
+    },
+    "Next.js getInitialProps() inside Class Component": {
+        "prefix": "cgip",
+        "body": ["static async getInitialProps() {", "\treturn { $1 };", "}"],
+        "description": "Next.js static async getInitialProps() inside Class Component"
+    },
+    "Next.js getStaticProps() export": {
+        "prefix": "gsp",
+        "body": [
+            "export async function getStaticProps(context) {",
+            "\treturn {",
+            "\t\tprops: {$1}",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js getStaticProps() export"
+    },
+    "Next.js getStaticPaths() export": {
+        "prefix": "gspt",
+        "body": [
+            "export async function getStaticPaths() {",
+            "\treturn {",
+            "\t\tpaths: [",
+            "\t\t\t{ params: { $1 }}",
+            "\t\t],",
+            "\t\tfallback: $2",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js pre-renders all the static paths https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation"
+    },
+    "Next.js getServerSideProps() export": {
+        "prefix": "gssp",
+        "body": [
+            "export async function getServerSideProps(context) {",
+            "\treturn {",
+            "\t\tprops: {$1}",
+            "\t};",
+            "}"
+        ],
+        "description": "Next.js getServerSideProps() export https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering"
+    },
+    "import Next.js Head": {
+        "prefix": "imh",
+        "body": "import Head from 'next/head';",
+        "description": "Next.js Head import"
+    },
+    "import Next.js Link": {
+        "prefix": "iml",
+        "body": "import Link from 'next/link';",
+        "description": "Next.js Link import"
+    },
+    "Use Next.js Link": {
+        "prefix": "usl",
+        "body": ["<Link href=\"$1\">", "\t<a>", "\t\t$0", "\t</a>", "</Link>"],
+        "description": "Next.js Link Tag with <a>"
+    },
+    "Use Next.js Link With Pathname": {
+        "prefix": "uslp",
+        "body": [
+            "<Link href={{ pathname: \"$1\", query: { queryName: queryValue } }}>",
+            "\t<a>",
+            "\t\t$0",
+            "\t</a>",
+            "</Link>"
+        ],
+        "description": "Next.js Link with Pathname"
+    },
+    "Use Next.js LinkTagWithDynmicRoute": {
+        "prefix": "usld",
+        "body": [
+            "<Link href=\"/[$1]\" as={`/${2:SLUG_NAME}`}>",
+            "\t<a>",
+            "\t\t$0",
+            "\t</a>",
+            "</Link>"
+        ],
+        "description": "Next.js Link Tag with Dynamic Route"
+    },
+    "importNextRouter": {
+        "prefix": "imro",
+        "body": "import Router from 'next/router';",
+        "description": "Next.js Router import"
+    },
+    "Next.js Router from useRouter": {
+        "prefix": "usro",
+        "body": "const router = useRouter();",
+        "description": "Declare Next.js Router from useRouter"
+    },
+    "Next.js query param from useRouter": {
+        "prefix": "nroq",
+        "body": "const { $1 } = router.query;",
+        "description": "Destructure Next.js query param from Router from useRouter"
+    },
+    "importNextRouterWithRouter": {
+        "prefix": "imrow",
+        "body": "import Router, { withRouter } from 'next/router';",
+        "description": "Next.js Router and { withRouter } import"
+    },
+    "importNextUseRouter": {
+        "prefix": "imuro",
+        "body": "import { useRouter } from 'next/router';",
+        "description": "Next.js { useRouter } import"
+    },
+    "Import Next Image component": {
+        "prefix": "imni",
+        "body": "import Image from 'next/image';",
+        "description": "Next.js 10 Image component import"
+    },
+    "Use sized Next Image component": {
+        "prefix": "usim",
+        "body": "<Image alt=\"$1\" src=\"$1\" width=\"$1\" height=\"$1\" />",
+        "description": "Use sized Next Image component"
+    },
+    "Use unsized Next Image component": {
+        "prefix": "usimu",
+        "body": "<Image alt=\"$1\" src=\"$1\" unsized=\"$1\" />",
+        "description": "Use sized Next Image component"
+    }
+}
diff --git a/snippets/javascript/react-es7.json b/snippets/javascript/react-es7.json
new file mode 100644
index 00000000..ee54f252
--- /dev/null
+++ b/snippets/javascript/react-es7.json
@@ -0,0 +1,1575 @@
+{
+    "exportType": {
+        "body": ["export type ${1:first} = {${2:second}}"],
+        "prefix": "exptp"
+    },
+    "exportInterface": {
+        "prefix": "expint",
+        "body": ["export interface ${1:first} {${2:second}}"]
+    },
+    "typescriptReactClassComponent": {
+        "prefix": "tsrcc",
+        "description": "Creates a React component class with ES7 module system and TypeScript interfaces",
+        "body": [
+            "import React, { Component } from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "type State = {}",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
+            "  state = {}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}"
+        ]
+    },
+    "typescriptReactClassExportComponent": {
+        "prefix": "tsrce",
+        "body": [
+            "import React, { Component } from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "type State = {}",
+            "",
+            "class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
+            "  state = {}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React component class with ES7 module system and TypeScript interfaces"
+    },
+    "typescriptReactFunctionalExportComponent": {
+        "prefix": "tsrfce",
+        "body": [
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "function ${1:${TM_FILENAME_BASE}}({}: Props) {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactFunctionalComponent": {
+        "prefix": "tsrfc",
+        "body": [
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "export default function ${1:${TM_FILENAME_BASE}}({}: Props) {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}"
+        ],
+        "description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactArrowFunctionExportComponent": {
+        "prefix": "tsrafce",
+        "body": [
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactArrowFunctionComponent": {
+        "prefix": "tsrafc",
+        "body": [
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}"
+        ],
+        "description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactClassPureComponent": {
+        "prefix": "tsrpc",
+        "body": [
+            "import React, { PureComponent } from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}"
+        ],
+        "description": "Creates a React pure component class with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactClassExportPureComponent": {
+        "prefix": "tsrpce",
+        "body": [
+            "import React, { PureComponent } from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React pure component class with ES7 module system and TypeScript interface"
+    },
+    "typescriptReactClassComponentRedux": {
+        "prefix": "tsrcredux",
+        "body": [
+            "import { connect } from 'react-redux'",
+            "import React, { Component } from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "type State = {}",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
+            "  state = {}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}",
+            "",
+            "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
+        ],
+        "description": "Creates a React component class with connected redux and ES7 module system and TypeScript interfaces"
+    },
+    "typescriptReactNativeArrowFunctionComponent": {
+        "prefix": "tsrnf",
+        "body": [
+            "import { View, Text } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Native Arrow Function Component with ES7 module system in TypeScript"
+    },
+    "typescriptReactNativeArrowFunctionComponentWithStyles": {
+        "prefix": "tsrnfs",
+        "body": [
+            "import { StyleSheet, Text, View } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "type Props = {}",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}",
+            "",
+            "const styles = StyleSheet.create({})"
+        ],
+        "description": "Creates a React Native Arrow Function Component with ES7 module system, TypeScript interface and StyleSheet"
+    },
+    "reactArrowFunctionComponent": {
+        "prefix": "rafc",
+        "body": [
+            "import React from 'react'",
+            "",
+            "export const ${1:${TM_FILENAME_BASE}} = () => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            ""
+        ],
+        "description": "Creates a React Arrow Function Component with ES7 module system"
+    },
+    "reactArrowFunctionComponentWithPropTypes": {
+        "prefix": "rafcp",
+        "body": [
+            "import React from 'react'",
+            "import PropTypes from 'prop-types'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = props => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "${1:${TM_FILENAME_BASE}}.propTypes = {}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Arrow Function Component with ES7 module system with PropTypes"
+    },
+    "reactArrowFunctionExportComponent": {
+        "prefix": "rafce",
+        "body": [
+            "import React from 'react'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = () => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Arrow Function Component with ES7 module system"
+    },
+    "reactClassComponent": {
+        "prefix": "rcc",
+        "body": [
+            "import React, { Component } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Creates a React component class with ES7 module system"
+    },
+    "reactClassComponentPropTypes": {
+        "prefix": "rccp",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React, { Component } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  static propTypes = {${2:second}: ${3:third}}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Creates a React component class with PropTypes and ES7 module system"
+    },
+    "reactClassComponentRedux": {
+        "prefix": "rcredux",
+        "body": [
+            "import React, { Component } from 'react'",
+            "import { connect } from 'react-redux'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}",
+            "",
+            "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
+        ],
+        "description": "Creates a React component class with connected redux and ES7 module system"
+    },
+    "reactClassComponentReduxPropTypes": {
+        "prefix": "rcreduxp",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React, { Component } from 'react'",
+            "import { connect } from 'react-redux'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  static propTypes = {",
+            "    ${2:second}: ${3:third}",
+            "  }",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}",
+            "",
+            "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
+        ],
+        "description": "Creates a React component class with PropTypes with connected redux and ES7 module system"
+    },
+    "reactClassExportComponent": {
+        "prefix": "rce",
+        "body": [
+            "import React, { Component } from 'react'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React component class with ES7 module system"
+    },
+    "reactClassExportComponentWithPropTypes": {
+        "prefix": "rcep",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React, { Component } from 'react'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  static propTypes = {}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React component class with ES7 module system"
+    },
+    "reactClassExportPureComponent": {
+        "prefix": "rpce",
+        "body": [
+            "import React, { PureComponent } from 'react'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React pure component class with ES7 module system export"
+    },
+    "reactClassPureComponent": {
+        "prefix": "rpc",
+        "body": [
+            "import React, { PureComponent } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Creates a React pure component class with ES7 module system"
+    },
+    "reactClassPureComponentWithPropTypes": {
+        "prefix": "rpcp",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React, { PureComponent } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
+            "  static propTypes = {}",
+            "",
+            "  render() {",
+            "    return (",
+            "      <div>${1:first}</div>",
+            "    )",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Creates a React component class with ES7 module system"
+    },
+    "reactFunctionMemoComponent": {
+        "prefix": "rmc",
+        "body": [
+            "import React, { memo } from 'react'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = memo(() => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "})",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Memo Function Component with ES7 module system"
+    },
+    "reactFunctionMemoComponentWithPropTypes": {
+        "prefix": "rmcp",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React, { memo } from 'react'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = memo((props) => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "})",
+            "",
+            "${1:${TM_FILENAME_BASE}}.propTypes = {}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Memo Function Component with ES7 module system with PropTypes"
+    },
+    "reactFunctionalComponent": {
+        "prefix": "rfc",
+        "body": [
+            "import React from 'react'",
+            "",
+            "export default function ${1:${TM_FILENAME_BASE}}() {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            ""
+        ],
+        "description": "Creates a React Functional Component with ES7 module system"
+    },
+    "reactFunctionalViteComponent": {
+        "prefix": "rfcv",
+        "body": [
+            "export default function ${1:${TM_FILENAME_BASE}}() {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            ""
+        ],
+        "description": "Creates a React Functional Component with ES7 module system, compatible with Vite"
+    },
+    "reactFunctionalComponentRedux": {
+        "prefix": "rfcredux",
+        "body": [
+            "import React from 'react'",
+            "import { connect } from 'react-redux'",
+            "",
+            "export const ${1:${TM_FILENAME_BASE}} = (props) => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}",
+            "",
+            "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
+        ],
+        "description": "Creates a React functional component with connected redux and ES7 module system"
+    },
+    "reactFunctionalComponentReduxPropTypes": {
+        "prefix": "rfcreduxp",
+        "body": [
+            "import PropTypes from 'prop-types'",
+            "import React from 'react'",
+            "import { connect } from 'react-redux'",
+            "",
+            "export const ${1:${TM_FILENAME_BASE}} = (props) => {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "${1:${TM_FILENAME_BASE}}.propTypes = {",
+            "  ${2:second}: PropTypes.${3:third}",
+            "}",
+            "",
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}",
+            "",
+            "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
+        ],
+        "description": "DEPRECATED: Creates a React functional component with PropTypes with connected redux and ES7 module system"
+    },
+    "reactFunctionalComponentWithPropTypes": {
+        "prefix": "rfcp",
+        "body": [
+            "import React from 'react'",
+            "import PropTypes from 'prop-types'",
+            "",
+            "function ${1:${TM_FILENAME_BASE}}(props) {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "${1:${TM_FILENAME_BASE}}.propTypes = {}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}",
+            ""
+        ],
+        "description": "Creates a React Functional Component with ES7 module system with PropTypes"
+    },
+    "reactFunctionalExportComponent": {
+        "prefix": "rfce",
+        "body": [
+            "import React from 'react'",
+            "",
+            "function ${1:${TM_FILENAME_BASE}}() {",
+            "  return (",
+            "    <div>${1:first}</div>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ],
+        "description": "Creates a React Functional Component with ES7 module system"
+    },
+    "consoleAssert": {
+        "prefix": "cas",
+        "body": ["console.assert(${1:first}, ${2:second})"],
+        "description": "If the specified expression is false, the message is written to the console along with a stack trace"
+    },
+    "consoleClear": {
+        "prefix": "ccl",
+        "body": ["console.clear()"],
+        "description": "Clears the console"
+    },
+    "consoleCount": {
+        "prefix": "cco",
+        "body": ["console.count(${1:first})"],
+        "description": "Writes the the number of times that count() has been invoked at the same line and with the same label"
+    },
+    "consoleDir": {
+        "prefix": "cdi",
+        "body": ["console.dir(${1:first})"],
+        "description": "Prints a JavaScript representation of the specified object"
+    },
+    "consoleError": {
+        "prefix": "cer",
+        "body": ["console.error(${1:first})"],
+        "description": "Displays a message in the console and also includes a stack trace from where the method was called"
+    },
+    "consoleGroup": {
+        "prefix": "cgr",
+        "body": ["console.group('${1:first}')"],
+        "description": "Groups and indents all following output by an additional level, until console.groupEnd() is called."
+    },
+    "consoleGroupEnd": {
+        "prefix": "cge",
+        "body": ["console.groupEnd()"],
+        "description": "Closes out the corresponding console.group()."
+    },
+    "consoleLog": {
+        "prefix": "clg",
+        "body": ["console.log(${1:first})"],
+        "description": "Displays a message in the console"
+    },
+    "consoleTrace": {
+        "prefix": "ctr",
+        "body": ["console.trace(${1:first})"],
+        "description": "Prints a stack trace from the point where the method was called"
+    },
+    "consoleLogObject": {
+        "prefix": "clo",
+        "body": ["console.log('${1:first}', ${1:first})"],
+        "description": "Logs property with name."
+    },
+    "consoleLogJson": {
+        "prefix": "clj",
+        "body": [
+            "console.log('${1:first}', JSON.stringify(${1:first}, null, 2))"
+        ],
+        "description": "Logs stringified JSON property with name."
+    },
+    "consoleTime": {
+        "prefix": "ctm",
+        "body": ["console.time('${1:first}')"],
+        "description": "Console time wrapper"
+    },
+    "consoleTimeEnd": {
+        "prefix": "cte",
+        "body": ["console.timeEnd('${1:first}')"],
+        "description": "Console time end wrapper"
+    },
+    "consoleWarn": {
+        "prefix": "cwa",
+        "body": ["console.warn(${1:first})"],
+        "description": "Displays a message in the console but also displays a yellow warning icon along with the logged message"
+    },
+    "consoleInfo": {
+        "prefix": "cin",
+        "body": ["console.info(${1:first})"],
+        "description": "Displays a message in the console but also displays a blue information icon along with the logged message"
+    },
+    "consoleTable": {
+        "prefix": "ctl",
+        "body": ["console.table([${1:first}])"],
+        "description": "Logs table to console"
+    },
+    "useCallback": {
+        "prefix": "useCallbackSnippet",
+        "body": [
+            "useCallback(",
+            "  () => {",
+            "    ${1:first}",
+            "  },",
+            "  [${2:second}],",
+            ")",
+            ""
+        ]
+    },
+    "useContext": {
+        "prefix": "useContextSnippet",
+        "body": ["const ${1:first} = useContext(${2:second})"]
+    },
+    "useEffect": {
+        "prefix": "useEffectSnippet",
+        "body": [
+            "useEffect(() => {",
+            "  ${1:first}",
+            "",
+            "  return () => {",
+            "    ${2:second}",
+            "  }",
+            "}, [${3:third}])",
+            ""
+        ]
+    },
+    "useImperativeHandle": {
+        "prefix": "useImperativeHandleSnippet",
+        "body": [
+            "useImperativeHandle(",
+            "  ${1:first},",
+            "  () => {",
+            "    ${2:second}",
+            "  },",
+            "  [${3:third}],",
+            ")"
+        ]
+    },
+    "useLayoutEffect": {
+        "prefix": "useLayoutEffectSnippet",
+        "body": [
+            "useLayoutEffect(() => {",
+            "  ${1:first}",
+            "",
+            "  return () => {",
+            "    ${2:second}",
+            "  };",
+            "}, [${3:third}])"
+        ]
+    },
+    "useMemo": {
+        "prefix": "useMemoSnippet",
+        "body": ["useMemo(() => ${1:first}, [${2:second}])"]
+    },
+    "useReducer": {
+        "prefix": "useReducerSnippet",
+        "body": [
+            "const [state, dispatch] = useReducer(${1:first}, ${2:second}, ${3:third})"
+        ]
+    },
+    "useRef": {
+        "prefix": "useRefSnippet",
+        "body": ["const ${1:first} = useRef(${2:second})"]
+    },
+    "useState": {
+        "prefix": "useStateSnippet",
+        "body": [
+            "const [${1:first}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:second})"
+        ]
+    },
+    "importAs": {
+        "prefix": "ima",
+        "body": ["import { ${2:second} as ${3:third} } from '${1:first}'"]
+    },
+    "importBrowserRouter": {
+        "prefix": "imbr",
+        "body": ["import { BrowserRouter as Router } from 'react-router-dom'"]
+    },
+    "importBrowserRouterWithRouteAndNavLink": {
+        "prefix": "imrr",
+        "body": [
+            "import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'",
+            ""
+        ]
+    },
+    "importDestructing": {
+        "prefix": "imd",
+        "body": ["import { ${2:second} } from '${1:first}'"]
+    },
+    "importEverything": {
+        "prefix": "ime",
+        "body": ["import * as ${2:second} from '${1:first}'"]
+    },
+    "importNoModuleName": {
+        "prefix": "imn",
+        "body": ["import '${1:first}'"]
+    },
+    "importPropTypes": {
+        "prefix": "impt",
+        "body": ["import PropTypes from 'prop-types'"]
+    },
+    "importReact": {
+        "prefix": "imr",
+        "body": ["import React from 'react'"]
+    },
+    "importReactDom": {
+        "prefix": "imrd",
+        "body": ["import ReactDOM from 'react-dom'"]
+    },
+    "importReactWithComponent": {
+        "prefix": "imrc",
+        "body": ["import React, { Component } from 'react'"]
+    },
+    "importReactWithComponentAndPropTypes": {
+        "prefix": "imrcp",
+        "body": [
+            "import React, { Component } from 'react'",
+            "import PropTypes from 'prop-types'",
+            ""
+        ]
+    },
+    "importReactWithMemo": {
+        "prefix": "imrm",
+        "body": ["import React, { memo } from 'react'"]
+    },
+    "importReactWithMemoAndPropTypes": {
+        "prefix": "imrmp",
+        "body": [
+            "import React, { memo } from 'react'",
+            "import PropTypes from 'prop-types'",
+            ""
+        ]
+    },
+    "importReactWithPureComponent": {
+        "prefix": "imrpc",
+        "body": ["import React, { PureComponent } from 'react'"]
+    },
+    "importReactWithPureComponentAndPropTypes": {
+        "prefix": "imrpcp",
+        "body": [
+            "import React, { PureComponent } from 'react'",
+            "import PropTypes from 'prop-types'",
+            ""
+        ]
+    },
+    "importRouterLink": {
+        "prefix": "imbrl",
+        "body": ["import { Link } from 'react-router-dom'"]
+    },
+    "importRouterNavLink": {
+        "prefix": "imbrnl",
+        "body": ["import { NavLink } from 'react-router-dom'"]
+    },
+    "importRouterSetup": {
+        "prefix": "imbrc",
+        "body": [
+            "import { Route, Switch, NavLink, Link } from 'react-router-dom'"
+        ]
+    },
+    "importRouterSwitch": {
+        "prefix": "imbrs",
+        "body": ["import { Switch } from 'react-router-dom'"]
+    },
+    "import": {
+        "prefix": "imp",
+        "body": ["import ${2:second} from '${1:first}'"]
+    },
+    "propTypeArray": {
+        "prefix": "pta",
+        "body": ["PropTypes.array"],
+        "description": "Array prop type"
+    },
+    "propTypeArrayRequired": {
+        "prefix": "ptar",
+        "body": ["PropTypes.array.isRequired"],
+        "description": "Array prop type required"
+    },
+    "propTypeBool": {
+        "prefix": "ptb",
+        "body": ["PropTypes.bool"],
+        "description": "Bool prop type"
+    },
+    "propTypeBoolRequired": {
+        "prefix": "ptbr",
+        "body": ["PropTypes.bool.isRequired"],
+        "description": "Bool prop type required"
+    },
+    "propTypeFunc": {
+        "prefix": "ptf",
+        "body": ["PropTypes.func"],
+        "description": "Func prop type"
+    },
+    "propTypeFuncRequired": {
+        "prefix": "ptfr",
+        "body": ["PropTypes.func.isRequired"],
+        "description": "Func prop type required"
+    },
+    "propTypeNumber": {
+        "prefix": "ptn",
+        "body": ["PropTypes.number"],
+        "description": "Number prop type"
+    },
+    "propTypeNumberRequired": {
+        "prefix": "ptnr",
+        "body": ["PropTypes.number.isRequired"],
+        "description": "Number prop type required"
+    },
+    "propTypeObject": {
+        "prefix": "pto",
+        "body": ["PropTypes.object"],
+        "description": "Object prop type"
+    },
+    "propTypeObjectRequired": {
+        "prefix": "ptor",
+        "body": ["PropTypes.object.isRequired"],
+        "description": "Object prop type required"
+    },
+    "propTypeString": {
+        "prefix": "pts",
+        "body": ["PropTypes.string"],
+        "description": "String prop type"
+    },
+    "propTypeStringRequired": {
+        "prefix": "ptsr",
+        "body": ["PropTypes.string.isRequired"],
+        "description": "String prop type required"
+    },
+    "propTypeNode": {
+        "prefix": "ptnd",
+        "body": ["PropTypes.node"],
+        "description": "Anything that can be rendered: numbers, strings, elements or an array"
+    },
+    "propTypeNodeRequired": {
+        "prefix": "ptndr",
+        "body": ["PropTypes.node.isRequired"],
+        "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+    },
+    "propTypeElement": {
+        "prefix": "ptel",
+        "body": ["PropTypes.element"],
+        "description": "React element prop type"
+    },
+    "propTypeElementRequired": {
+        "prefix": "ptelr",
+        "body": ["PropTypes.element.isRequired"],
+        "description": "React element prop type required"
+    },
+    "propTypeInstanceOf": {
+        "prefix": "pti",
+        "body": ["PropTypes.instanceOf($0)"],
+        "description": "Is an instance of a class prop type"
+    },
+    "propTypeInstanceOfRequired": {
+        "prefix": "ptir",
+        "body": ["PropTypes.instanceOf($0).isRequired"],
+        "description": "Is an instance of a class prop type required"
+    },
+    "propTypeEnum": {
+        "prefix": "pte",
+        "body": ["PropTypes.oneOf(['$0'])"],
+        "description": "Prop type limited to specific values by treating it as an enum"
+    },
+    "propTypeEnumRequired": {
+        "prefix": "pter",
+        "body": ["PropTypes.oneOf(['$0']).isRequired"],
+        "description": "Prop type limited to specific values by treating it as an enum required"
+    },
+    "propTypeOneOfType": {
+        "prefix": "ptet",
+        "body": ["PropTypes.oneOfType([", "  $0", "])"],
+        "description": "An object that could be one of many types"
+    },
+    "propTypeOneOfTypeRequired": {
+        "prefix": "ptetr",
+        "body": ["PropTypes.oneOfType([", "  $0", "]).isRequired"],
+        "description": "An object that could be one of many types required"
+    },
+    "propTypeArrayOf": {
+        "prefix": "ptao",
+        "body": ["PropTypes.arrayOf($0)"],
+        "description": "An array of a certain type"
+    },
+    "propTypeArrayOfRequired": {
+        "prefix": "ptaor",
+        "body": ["PropTypes.arrayOf($0).isRequired"],
+        "description": "An array of a certain type required"
+    },
+    "propTypeObjectOf": {
+        "prefix": "ptoo",
+        "body": ["PropTypes.objectOf($0)"],
+        "description": "An object with property values of a certain type"
+    },
+    "propTypeObjectOfRequired": {
+        "prefix": "ptoor",
+        "body": ["PropTypes.objectOf($0).isRequired"],
+        "description": "An object with property values of a certain type required"
+    },
+    "propTypeShape": {
+        "prefix": "ptsh",
+        "body": ["PropTypes.shape({", "  $0", "})"],
+        "description": "An object taking on a particular shape"
+    },
+    "propTypeShapeRequired": {
+        "prefix": "ptshr",
+        "body": ["PropTypes.shape({", "  $0", "}).isRequired"],
+        "description": "An object taking on a particular shape required"
+    },
+    "propTypeExact": {
+        "prefix": "ptex",
+        "body": ["PropTypes.exact({", "  $0", "})"],
+        "description": "An object with warnings on extra properties"
+    },
+    "propTypeExactRequired": {
+        "prefix": "ptexr",
+        "body": ["PropTypes.exact({", "  $0", "}).isRequired"],
+        "description": "An object with warnings on extra properties required"
+    },
+    "propTypeAny": {
+        "prefix": "ptany",
+        "body": ["PropTypes.any"],
+        "description": "Any prop type"
+    },
+    "reactNativeComponent": {
+        "prefix": "rnc",
+        "body": [
+            "import { Text, View } from 'react-native'",
+            "import React, { Component } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <View>",
+            "        <Text>${1:first}</Text>",
+            "      </View>",
+            "    )",
+            "  }",
+            "}"
+        ]
+    },
+    "reactNativeComponentExport": {
+        "prefix": "rnce",
+        "body": [
+            "import { Text, View } from 'react-native'",
+            "import React, { Component } from 'react'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <View>",
+            "        <Text>${1:first}</Text>",
+            "      </View>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ]
+    },
+    "reactNativeComponentWithStyles": {
+        "prefix": "rncs",
+        "body": [
+            "import { Text, StyleSheet, View } from 'react-native'",
+            "import React, { Component } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends Component {",
+            "  render() {",
+            "    return (",
+            "      <View>",
+            "        <Text>${1:first}</Text>",
+            "      </View>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "const styles = StyleSheet.create({})"
+        ]
+    },
+    "reactNativeFunctionalComponent": {
+        "prefix": "rnf",
+        "body": [
+            "import { View, Text } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "export default function ${1:${TM_FILENAME_BASE}}() {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}"
+        ]
+    },
+    "reactNativeFunctionalComponentWithStyles": {
+        "prefix": "rnfs",
+        "body": [
+            "import { StyleSheet, Text, View } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "export default function ${1:${TM_FILENAME_BASE}}() {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}",
+            "",
+            "const styles = StyleSheet.create({})"
+        ]
+    },
+    "reactNativeFunctionalExportComponent": {
+        "prefix": "rnfe",
+        "body": [
+            "import { View, Text } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = () => {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ]
+    },
+    "reactNativeFunctionalExportComponentWithStyles": {
+        "prefix": "rnfes",
+        "body": [
+            "import { StyleSheet, Text, View } from 'react-native'",
+            "import React from 'react'",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = () => {",
+            "  return (",
+            "    <View>",
+            "      <Text>${1:first}</Text>",
+            "    </View>",
+            "  )",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}",
+            "",
+            "const styles = StyleSheet.create({})"
+        ]
+    },
+    "reactNativeImport": {
+        "prefix": "imrn",
+        "body": ["import { ${1:first} } from 'react-native'"]
+    },
+    "reactNativePureComponent": {
+        "prefix": "rnpc",
+        "body": [
+            "import { Text, View } from 'react-native'",
+            "import React, { PureComponent } from 'react'",
+            "",
+            "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
+            "  render() {",
+            "    return (",
+            "      <View>",
+            "        <Text>${1:first}</Text>",
+            "      </View>",
+            "    )",
+            "  }",
+            "}"
+        ]
+    },
+    "reactNativePureComponentExport": {
+        "prefix": "rnpce",
+        "body": [
+            "import { Text, View } from 'react-native'",
+            "import React, { PureComponent } from 'react'",
+            "",
+            "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
+            "  render() {",
+            "    return (",
+            "      <View>",
+            "        <Text>${1:first}</Text>",
+            "      </View>",
+            "    )",
+            "  }",
+            "}",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}"
+        ]
+    },
+    "reactNativeStyles": {
+        "prefix": "rnstyle",
+        "body": ["const styles = StyleSheet.create({${1:first}})"]
+    },
+    "importReduxConnect": {
+        "prefix": "redux",
+        "body": ["import { connect } from 'react-redux'"]
+    },
+    "reduxAction": {
+        "prefix": "rxaction",
+        "body": [
+            "export const ${1:first} = (payload) => ({",
+            "  type: ${2:second},",
+            "  payload",
+            "})",
+            ""
+        ]
+    },
+    "reduxConst": {
+        "prefix": "rxconst",
+        "body": ["export const ${1:first} = '${1:first}'"]
+    },
+    "reduxReducer": {
+        "prefix": "rxreducer",
+        "body": [
+            "const initialState = {}",
+            "",
+            "export default (state = initialState, { type, payload }) => {",
+            "  switch (type) {",
+            "",
+            "  case ${1:first}:",
+            "    return { ...state, ...payload }",
+            "",
+            "  default:",
+            "    return state",
+            "  }",
+            "}",
+            ""
+        ]
+    },
+    "reduxSelector": {
+        "prefix": "rxselect",
+        "body": [
+            "import { createSelector } from 'reselect'",
+            "",
+            "export const ${1:first} = state => state.${2:second}"
+        ]
+    },
+    "reduxSlice": {
+        "prefix": "rxslice",
+        "body": [
+            "import { createSlice } from '@reduxjs/toolkit'",
+            "",
+            "const initialState = {",
+            "",
+            "}",
+            "",
+            "const ${1:${TM_FILENAME_BASE}} = createSlice({",
+            "  name: ${2:second},",
+            "  initialState,",
+            "  reducers: {}",
+            "});",
+            "",
+            "export const {} = ${1:${TM_FILENAME_BASE}}.actions",
+            "",
+            "export default ${1:${TM_FILENAME_BASE}}.reducer"
+        ]
+    },
+    "mappingToProps": {
+        "prefix": "reduxmap",
+        "body": [
+            "const mapStateToProps = (state) => ({})",
+            "",
+            "const mapDispatchToProps = {}"
+        ]
+    },
+    "describeBlock": {
+        "prefix": "desc",
+        "body": ["describe('${1:first}', () => { ${2:second} })"],
+        "description": "Testing `describe` block"
+    },
+    "itAsyncBlock": {
+        "prefix": "tita",
+        "body": ["it('should ${1:first}', async () => { ${2:second} })"],
+        "description": "Testing asynchronous `it` block"
+    },
+    "itBlock": {
+        "prefix": "tit",
+        "body": ["it('should ${1:first}', () => { ${2:second} })"],
+        "description": "Testing `it` block"
+    },
+    "setupReactComponentTestWithRedux": {
+        "prefix": "srtest",
+        "body": [
+            "import React from 'react'",
+            "import renderer from 'react-test-renderer'",
+            "import { Provider } from 'react-redux'",
+            "",
+            "import store from '~/store'",
+            "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'",
+            "",
+            "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
+            "  const defaultProps = {}",
+            "  const wrapper = renderer.create(",
+            "    <Provider store={store}>",
+            "     <${1:${TM_FILENAME_BASE}} {...defaultProps} />",
+            "    </Provider>,",
+            "  )",
+            "",
+            "  test('render', () => {",
+            "    expect(wrapper).toMatchSnapshot()",
+            "  })",
+            "})"
+        ],
+        "description": "Create test component"
+    },
+    "setupReactNativeTest": {
+        "prefix": "sntest",
+        "body": [
+            "import 'react-native'",
+            "import React from 'react'",
+            "import renderer from 'react-test-renderer'",
+            "",
+            "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'",
+            "",
+            "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
+            "  const defaultProps = {}",
+            "  const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)",
+            "",
+            "  test('render', () => {",
+            "    expect(wrapper).toMatchSnapshot()",
+            "  })",
+            "})"
+        ]
+    },
+    "setupReactNativeTestWithRedux": {
+        "prefix": "snrtest",
+        "body": [
+            "import 'react-native'",
+            "import React from 'react'",
+            "import renderer from 'react-test-renderer'",
+            "import { Provider } from 'react-redux'",
+            "",
+            "import store from '~/store'",
+            "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'",
+            "",
+            "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
+            "  const defaultProps = {}",
+            "  const wrapper = renderer.create(",
+            "    <Provider store={store}>",
+            "      <${1:${TM_FILENAME_BASE}} {...defaultProps} />",
+            "    </Provider>,",
+            "  )",
+            "",
+            "  test('render', () => {",
+            "    expect(wrapper).toMatchSnapshot()",
+            "  })",
+            "})"
+        ]
+    },
+    "setupReactTest": {
+        "prefix": "stest",
+        "body": [
+            "import React from 'react'",
+            "import renderer from 'react-test-renderer'",
+            "",
+            "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'",
+            "",
+            "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
+            "  const defaultProps = {}",
+            "  const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)",
+            "",
+            "  test('render', () => {",
+            "    expect(wrapper).toMatchSnapshot()",
+            "  })",
+            "})"
+        ]
+    },
+    "testAsyncBlock": {
+        "prefix": "testa",
+        "body": ["test('should ${1:first}', async () => { ${2:second} })"],
+        "description": "Testing `asynchronous test` block"
+    },
+    "testBlock": {
+        "prefix": "test",
+        "body": ["test('should ${1:first}', () => { ${2:second} })"],
+        "description": "Testing `test` block"
+    },
+    "exportDefault": {
+        "prefix": "exp",
+        "body": ["export default ${1:first}"]
+    },
+    "exportDestructing": {
+        "prefix": "exd",
+        "body": ["export { ${2:second} } from '${1:first}'"]
+    },
+    "exportAs": {
+        "prefix": "exa",
+        "body": ["export { ${2:second} as ${3:third} } from '${1:first}'"]
+    },
+    "exportNamedFunction": {
+        "prefix": "enf",
+        "body": ["export const ${1:first} = (${2:second}) => {${3:third}}"],
+        "description": "Export named function"
+    },
+    "exportDefaultFunction": {
+        "prefix": "edf",
+        "body": ["export default (${1:first}) => {${2:second}}"],
+        "description": "Export default function"
+    },
+    "exportDefaultNamedFunction": {
+        "prefix": "ednf",
+        "body": [
+            "export default function ${1:first}(${2:second}) {${3:third}}"
+        ],
+        "description": "Export default named function"
+    },
+    "method": {
+        "prefix": "met",
+        "body": ["${1:first} = (${2:second}) => {${3:third}}"],
+        "description": "Creates a method inside a class"
+    },
+    "propertyGet": {
+        "prefix": "pge",
+        "body": ["get ${1:first}() {", "  return this.${2:second}", "}"],
+        "description": "Creates a getter property inside a class"
+    },
+    "propertySet": {
+        "prefix": "pse",
+        "body": ["set ${1:first}(${2:second}) {${3:third}}"],
+        "description": "Creates a setter property inside a class"
+    },
+    "forEach": {
+        "prefix": "fre",
+        "body": ["${1:first}.forEach(${2:second} => {${3:third}})"],
+        "description": "Creates a forEach statement"
+    },
+    "forOf": {
+        "prefix": "fof",
+        "body": ["for(let ${1:first} of ${2:second}) {${3:third}}"],
+        "description": "Iterating over property names of iterable objects"
+    },
+    "forIn": {
+        "prefix": "fin",
+        "body": ["for(let ${1:first} in ${2:second}) {${3:third}}"],
+        "description": "Iterating over property values of iterable objects"
+    },
+    "anonymousFunction": {
+        "prefix": "anfn",
+        "body": ["(${1:first}) => { ${2:second} }"],
+        "description": "Creates an anonymous function"
+    },
+    "namedFunction": {
+        "prefix": "nfn",
+        "body": ["const ${1:first} = (${2:second}) => { ${3:third} }"],
+        "description": "Creates a named function"
+    },
+    "destructingObject": {
+        "prefix": "dob",
+        "body": ["const {${2:second}} = ${1:first}"],
+        "description": "Creates and assigns a local variable using object destructing"
+    },
+    "destructingArray": {
+        "prefix": "dar",
+        "body": ["const [${2:second}] = ${1:first}"],
+        "description": "Creates and assigns a local variable using array destructing"
+    },
+    "setInterval": {
+        "prefix": "sti",
+        "body": ["setInterval(() => { ${1:first} }, ${2:second})"],
+        "description": "Executes the given function at specified intervals"
+    },
+    "setTimeOut": {
+        "prefix": "sto",
+        "body": ["setTimeout(() => { ${1:first} }, ${2:second})"],
+        "description": "Executes the given function after the specified delay"
+    },
+    "promise": {
+        "prefix": "prom",
+        "body": ["return new Promise((resolve, reject) => { ${1:first} })"],
+        "description": "Creates and returns a new Promise in the standard ES7 syntax"
+    },
+    "destructProps": {
+        "prefix": "cp",
+        "body": ["const { ${1:first} } = this.props"],
+        "description": "Creates and assigns a local variable using props destructing"
+    },
+    "destructState": {
+        "prefix": "cs",
+        "body": ["const { ${1:first} } = this.state"],
+        "description": "Creates and assigns a local variable using state destructing"
+    },
+    "classConstructor": {
+        "prefix": "rconst",
+        "body": [
+            "constructor(props) {",
+            "  super(props)",
+            "",
+            "  this.state = {",
+            "     ${1:first}",
+            "  }",
+            "}"
+        ],
+        "description": "Adds a default constructor for it('', () => {})the class that contains props as arguments"
+    },
+    "emptyState": {
+        "prefix": "est",
+        "body": ["state = { ${1:first} }"],
+        "description": "Creates empty state object. To be used in a constructor."
+    },
+    "componentDidMount": {
+        "prefix": "cdm",
+        "body": ["componentDidMount() { ${1:first} }"],
+        "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+    },
+    "shouldComponentUpdate": {
+        "prefix": "scu",
+        "body": ["shouldComponentUpdate(nextProps, nextState) { ${1:first} }"],
+        "description": "Invoked before rendering when new props or state are being received. "
+    },
+    "componentDidUpdate": {
+        "prefix": "cdup",
+        "body": ["componentDidUpdate(prevProps, prevState) { ${1:first}} "],
+        "description": "Invoked immediately after the component's updates are flushed to the DOM."
+    },
+    "componentWillUnmount": {
+        "prefix": "cwun",
+        "body": ["componentWillUnmount() {${1:first} }"],
+        "description": "Invoked immediately before a component is unmounted from the DOM."
+    },
+    "getDerivedStateFromProps": {
+        "prefix": "gdsfp",
+        "body": ["static getDerivedStateFromProps(props, state) {${1:first}}"],
+        "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates."
+    },
+    "getSnapshotBeforeUpdate": {
+        "prefix": "gsbu",
+        "body": [
+            "getSnapshotBeforeUpdate = (prevProps, prevState) => {${1:first}}"
+        ],
+        "description": "Called right before mutations are made (e.g. before the DOM is updated)"
+    },
+    "createContext": {
+        "prefix": "rcontext",
+        "body": ["const ${1:first} = React.createContext()"],
+        "description": "Create React context"
+    },
+    "createRef": {
+        "prefix": "cref",
+        "body": ["this.${1:first}Ref = React.createRef()"],
+        "description": "Create ref statement used inside constructor"
+    },
+    "componentSetStateObject": {
+        "prefix": "sst",
+        "body": ["this.setState({${1:first}})"],
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentSetStateFunc": {
+        "prefix": "ssf",
+        "body": ["this.setState((state, props) => { return { ${1:first} }})"],
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentProps": {
+        "prefix": "props",
+        "body": ["this.props.${1:first}"],
+        "description": "Access component's props"
+    },
+    "componentState": {
+        "prefix": "state",
+        "body": ["this.state.${1:first}"]
+    },
+    "bindThis": {
+        "prefix": "bnd",
+        "body": ["this.${1:first} = this.${1:first}.bind(this)"],
+        "description": "Binds this to a method"
+    },
+    "commentBigBlock": {
+        "prefix": "cmmb",
+        "body": ["/**", " * ${1:first}", " */"]
+    },
+    "hocComponentWithRedux": {
+        "prefix": "hocredux",
+        "body": [
+            "import React from 'react'",
+            "import { connect } from 'react-redux'",
+            "import PropTypes from 'prop-types'",
+            "",
+            "export const mapStateToProps = state => ({})",
+            "",
+            "export const mapDispatchToProps = {}",
+            "",
+            "export const ${1:first} = (WrappedComponent) => {",
+            "  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />",
+            "",
+            "  hocComponent.propTypes = {}",
+            "",
+            "  return hocComponent",
+            "}",
+            "",
+            "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:first}(WrapperComponent))",
+            ""
+        ]
+    },
+    "hocComponent": {
+        "prefix": "hoc",
+        "body": [
+            "import React from 'react'",
+            "import PropTypes from 'prop-types'",
+            "",
+            "export default (WrappedComponent) => {",
+            "  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />",
+            "",
+            "  hocComponent.propTypes = {}",
+            "",
+            "  return hocComponent",
+            "}",
+            ""
+        ]
+    },
+    "typeofSnippet": {
+        "prefix": "tpf",
+        "body": ["typeof ${1:first}"]
+    }
+}
diff --git a/snippets/javascript/react-native-ts.json b/snippets/javascript/react-native-ts.json
new file mode 100644
index 00000000..aaf0c311
--- /dev/null
+++ b/snippets/javascript/react-native-ts.json
@@ -0,0 +1,437 @@
+{
+    "statefulComponent": {
+        "prefix": "rnc",
+        "body": [
+            "import React, { Component } from 'react';",
+            "",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "export default class ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} extends Component {",
+            "  render() {",
+            "    return <View />;",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Create React Native Stateful Component"
+    },
+    "statelessComponent": {
+        "prefix": "rnsc",
+        "body": [
+            "import React from 'react';",
+            "",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} = () => <View />;",
+            "",
+            "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};",
+            ""
+        ],
+        "description": "Create React Native Stateless Component"
+    },
+    "componentFunctional": {
+        "prefix": "rnfc",
+        "body": [
+            "import React from 'react';",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "export default function ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}() {",
+            "  return (",
+            "    <View />",
+            "  );",
+            "}",
+            ""
+        ],
+        "description": "Create React Native Functional Component"
+    },
+    "componentFunctionalTypescript": {
+        "prefix": "rnfcc",
+        "body": [
+            "import React from 'react';",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}: React.FC = () => {",
+            "  return <View />;",
+            "}",
+            "",
+            "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};"
+        ],
+        "description": "Create React Native TypeScript Functional Component"
+    },
+    "styles": {
+        "prefix": "styled-rn",
+        "body": [
+            "import styled from 'styled-components/native';",
+            "",
+            "export const ${1:Container} = styled.${2:View}`",
+            "  ${3}",
+            "`;",
+            ""
+        ],
+        "description": "Create React Native Styled Components file"
+    },
+    "StyleSheet": {
+        "prefix": "rn-stylesheet",
+        "body": [
+            "const ${1:styles} = StyleSheet.create({",
+            "    ${2:container}: {",
+            "        ${3}",
+            "    },",
+            "});",
+            ""
+        ],
+        "description": "Create React Native Styled Components StyleSheet"
+    },
+    "justifyContent": {
+        "prefix": "just",
+        "body": "justifyContent: '${1:center}',",
+        "description": "justifyContent"
+    },
+    "alignItems": {
+        "prefix": "align",
+        "body": "alignItems: '${1:center}',",
+        "description": "alignItems"
+    },
+    "alignSelf": {
+        "prefix": "align",
+        "body": "alignSelf: '${1:center}',",
+        "description": "alignSelf"
+    },
+    "alignContent": {
+        "prefix": "align",
+        "body": "alignContent: '${1}',",
+        "description": "alignContent"
+    },
+    "aspectRatio": {
+        "prefix": "as",
+        "body": "aspectRatio: '${1}',",
+        "description": "aspectRatio"
+    },
+    "borderBottomWidth": {
+        "prefix": "bor",
+        "body": "borderBottomWidth: ${1},",
+        "description": "borderBottomWidth"
+    },
+    "borderLeftWidth": {
+        "prefix": "bor",
+        "body": "borderLeftWidth: ${1},",
+        "description": "borderLeftWidth"
+    },
+    "borderRightWidth": {
+        "prefix": "bor",
+        "body": "borderRightWidth: ${1},",
+        "description": "borderRightWidth"
+    },
+    "borderTopWidth": {
+        "prefix": "bor",
+        "body": "borderTopWidth: ${1},",
+        "description": "borderTopWidth"
+    },
+    "borderWidth": {
+        "prefix": "bor",
+        "body": "borderWidth: ${1},",
+        "description": "borderWidth"
+    },
+    "borderColor": {
+        "prefix": "bor",
+        "body": "borderColor: ${1},",
+        "description": "borderColor"
+    },
+    "borderRadius": {
+        "prefix": "bor",
+        "body": "borderRadius: ${1},",
+        "description": "borderRadius"
+    },
+    "borderLeftColor": {
+        "prefix": "bor",
+        "body": "borderLeftColor: ${1},",
+        "description": "borderLeftColor"
+    },
+    "borderRightColor": {
+        "prefix": "bor",
+        "body": "borderRightColor: ${1},",
+        "description": "borderRightColor"
+    },
+    "borderTopColor": {
+        "prefix": "bor",
+        "body": "borderTopColor: ${1},",
+        "description": "borderTopColor"
+    },
+    "borderBottomColor": {
+        "prefix": "bor",
+        "body": "borderBottomColor: ${1},",
+        "description": "borderBottomColor"
+    },
+    "borderBottomLeftRadius": {
+        "prefix": "bor",
+        "body": "borderBottomLeftRadius: ${1},",
+        "description": "borderBottomLeftRadius"
+    },
+    "borderBottomRightRadius": {
+        "prefix": "bor",
+        "body": "borderBottomRightRadius: ${1},",
+        "description": "borderBottomRightRadius"
+    },
+    "borderTopLeftRadius": {
+        "prefix": "bor",
+        "body": "borderTopLeftRadius: ${1},",
+        "description": "borderTopLeftRadius"
+    },
+    "borderTopRightRadius": {
+        "prefix": "bor",
+        "body": "borderTopRightRadius: ${1},",
+        "description": "borderTopRightRadius"
+    },
+    "backgroundColor": {
+        "prefix": "bac",
+        "body": "backgroundColor: ${1},",
+        "description": "backgroundColor"
+    },
+    "display": {
+        "prefix": "di",
+        "body": "display: '${1:none}',",
+        "description": "display"
+    },
+    "opacity": {
+        "prefix": "op",
+        "body": "opacity: ${1},",
+        "description": "opacity"
+    },
+    "shadowColor": {
+        "prefix": "sha",
+        "body": "shadowColor: '${1:none}',",
+        "description": "shadowColor"
+    },
+    "shadowOffset": {
+        "prefix": "sha",
+        "body": "shadowOffset: ${1},",
+        "description": "shadowOffset"
+    },
+    "shadowOpacity": {
+        "prefix": "sha",
+        "body": "shadowOpacity: ${1},",
+        "description": "shadowOpacity"
+    },
+    "shadowRadius": {
+        "prefix": "sha",
+        "body": "shadowRadius: ${1},",
+        "description": "shadowRadius"
+    },
+    "elevation": {
+        "prefix": "e",
+        "body": "elevation: ${1},",
+        "description": "elevation"
+    },
+    "flex": {
+        "prefix": "flex",
+        "body": "flex: ${1},",
+        "description": "flex"
+    },
+    "flexBasis": {
+        "prefix": "flex",
+        "body": "flexBasis: '${1}',",
+        "description": "flexBasis"
+    },
+    "flexDirection": {
+        "prefix": "flex",
+        "body": "flexDirection: '${1:column}',",
+        "description": "flexDirection"
+    },
+    "flexGrow": {
+        "prefix": "flex",
+        "body": "flexGrow: '${1}',",
+        "description": "flexGrow"
+    },
+    "flexShrink": {
+        "prefix": "flex",
+        "body": "flexShrink: '${1}',",
+        "description": "flexShrink"
+    },
+    "flexWrap": {
+        "prefix": "flex",
+        "body": "flexWrap: '${1}',",
+        "description": "flexWrap"
+    },
+    "fontSize": {
+        "prefix": "fo",
+        "body": "fontSize: ${1},",
+        "description": "fontSize"
+    },
+    "fontStyle": {
+        "prefix": "fo",
+        "body": "fontStyle: '${1:normal}',",
+        "description": "fontStyle"
+    },
+    "fontFamily": {
+        "prefix": "fo",
+        "body": "fontFamily: '${1}',",
+        "description": "fontFamily"
+    },
+    "fontWeight": {
+        "prefix": "fo",
+        "body": "fontWeight: '${1:normal}',",
+        "description": "fontWeight"
+    },
+    "height": {
+        "prefix": "h",
+        "body": "height: ${1},",
+        "description": "height"
+    },
+    "left": {
+        "prefix": "l",
+        "body": "left: ${1},",
+        "description": "left"
+    },
+    "margin": {
+        "prefix": "mar",
+        "body": "margin: '${1}',",
+        "description": "margin"
+    },
+    "marginBottom": {
+        "prefix": "mar",
+        "body": "marginBottom: ${1},",
+        "description": "marginBottom"
+    },
+    "marginHorizontal": {
+        "prefix": "mar",
+        "body": "marginHorizontal: '${1}',",
+        "description": "marginHorizontal"
+    },
+    "marginLeft": {
+        "prefix": "mar",
+        "body": "marginLeft: ${1},",
+        "description": "marginLeft"
+    },
+    "marginRight": {
+        "prefix": "mar",
+        "body": "marginRight: ${1},",
+        "description": "marginRight"
+    },
+    "marginTop": {
+        "prefix": "mar",
+        "body": "marginTop: ${1},",
+        "description": "marginTop"
+    },
+    "marginVertical": {
+        "prefix": "mar",
+        "body": "marginVertical: '${1}',",
+        "description": "marginVertical"
+    },
+    "maxHeight": {
+        "prefix": "max",
+        "body": "maxHeight: ${1},",
+        "description": "maxHeight"
+    },
+    "maxWidth": {
+        "prefix": "max",
+        "body": "maxWidth: ${1},",
+        "description": "maxWidth"
+    },
+    "minHeight": {
+        "prefix": "min",
+        "body": "minHeight: ${1},",
+        "description": "minHeight"
+    },
+    "minWidth": {
+        "prefix": "min",
+        "body": "minWidth: ${1},",
+        "description": "minWidth"
+    },
+    "overflow": {
+        "prefix": "over",
+        "body": "overflow: '${1}',",
+        "description": "overflow"
+    },
+    "padding": {
+        "prefix": "padding",
+        "body": "padding: ${1},",
+        "description": "padding"
+    },
+    "paddingBottom": {
+        "prefix": "padding",
+        "body": "paddingBottom: ${1},",
+        "description": "paddingBottom"
+    },
+    "paddingHorizontal": {
+        "prefix": "padding",
+        "body": "paddingHorizontal: ${1},",
+        "description": "paddingHorizontal"
+    },
+    "paddingLeft": {
+        "prefix": "padding",
+        "body": "paddingLeft: ${1},",
+        "description": "paddingLeft"
+    },
+    "paddingRight": {
+        "prefix": "padding",
+        "body": "paddingRight: ${1},",
+        "description": "paddingRight"
+    },
+    "paddingTop": {
+        "prefix": "padding",
+        "body": "paddingTop: ${1},",
+        "description": "paddingTop"
+    },
+    "paddingVertical": {
+        "prefix": "padding",
+        "body": "paddingVertical: ${1},",
+        "description": "paddingVertical"
+    },
+    "position": {
+        "prefix": "pos",
+        "body": "position: ${1},",
+        "description": "position"
+    },
+    "right": {
+        "prefix": "ri",
+        "body": "right: ${1},",
+        "description": "right"
+    },
+    "top": {
+        "prefix": "top",
+        "body": "top: ${1},",
+        "description": "top"
+    },
+    "width": {
+        "prefix": "w",
+        "body": "width: ${1},",
+        "description": "width"
+    },
+    "zIndex": {
+        "prefix": "z",
+        "body": "zIndex: ${1},",
+        "description": "zIndex"
+    },
+    "api": {
+        "prefix": "api",
+        "body": [
+            "import axios from 'axios';",
+            "",
+            "const api = axios.create({",
+            "  baseURL: ${1},",
+            "});",
+            "",
+            "export default api;",
+            ""
+        ],
+        "description": "Create Axios Configuration file"
+    },
+    "region": {
+        "prefix": "region",
+        "body": ["//#region ${1}", "${2}", "//#endregion"],
+        "description": "Create region"
+    },
+    "regionStartEnd": {
+        "prefix": "#regionStartEnd",
+        "body": ["//#region ${1}", "${2}", "//#endregion"],
+        "description": "Create region"
+    }
+}
diff --git a/snippets/javascript/react-native.json b/snippets/javascript/react-native.json
new file mode 100644
index 00000000..918183fb
--- /dev/null
+++ b/snippets/javascript/react-native.json
@@ -0,0 +1,468 @@
+{
+    "statefulComponent": {
+        "prefix": "rnc",
+        "body": [
+            "import React, { Component } from 'react';",
+            "",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "export default class ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} extends Component {",
+            "  render() {",
+            "    return <View />;",
+            "  }",
+            "}",
+            ""
+        ],
+        "description": "Create React Native Stateful Component"
+    },
+    "statefulReduxComponent": {
+        "prefix": "rnrc",
+        "body": [
+            "import React, { Component } from 'react';",
+            "",
+            "import { View } from 'react-native';",
+            "",
+            "import { bindActionCreators } from 'redux';",
+            "import { connect } from 'react-redux';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "class ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} extends Component {",
+            "  render() {",
+            "    return <View />;",
+            "  }",
+            "}",
+            "",
+            "const mapStateToProps = state => ({});",
+            "",
+            "// const mapDispatchToProps = dispatch =>",
+            "//   bindActionCreators(Actions, dispatch);",
+            "",
+            "export default connect(",
+            "  mapStateToProps,",
+            "  // mapDispatchToProps",
+            ")(${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}});",
+            ""
+        ],
+        "description": "Create React Native Stateful Redux Component"
+    },
+    "statelessComponent": {
+        "prefix": "rnsc",
+        "body": [
+            "import React from 'react';",
+            "",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} = () => <View />;",
+            "",
+            "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};",
+            ""
+        ],
+        "description": "Create React Native Stateless Component"
+    },
+    "componentFunctional": {
+        "prefix": "rnfc",
+        "body": [
+            "import React from 'react';",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "export default function ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}() {",
+            "  return (",
+            "    <View />",
+            "  );",
+            "}",
+            ""
+        ],
+        "description": "Create React Native Functional Component"
+    },
+    "componentFunctionalTypescript": {
+        "prefix": "rnfcc",
+        "body": [
+            "import React from 'react';",
+            "import { View } from 'react-native';",
+            "",
+            "// import { Container } from './styles';",
+            "",
+            "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}} = () => {",
+            "  return <View />;",
+            "}",
+            "",
+            "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};"
+        ],
+        "description": "Create React Native Functional Component"
+    },
+    "styles": {
+        "prefix": "styled-rn",
+        "body": [
+            "import styled from 'styled-components/native';",
+            "",
+            "export const ${1:Container} = styled.${2:View}`",
+            "  ${3}",
+            "`;",
+            ""
+        ],
+        "description": "Create React Native Styled Components file"
+    },
+    "StyleSheet": {
+        "prefix": "rn-stylesheet",
+        "body": [
+            "const ${1:styles} = StyleSheet.create({",
+            "    ${2:container}: {",
+            "        ${3}",
+            "    },",
+            "});",
+            ""
+        ],
+        "description": "Create React Native Styled Components StyleSheet"
+    },
+    "justifyContent": {
+        "prefix": "just",
+        "body": "justifyContent: '${1:center}',",
+        "description": "justifyContent"
+    },
+    "alignItems": {
+        "prefix": "align",
+        "body": "alignItems: '${1:center}',",
+        "description": "alignItems"
+    },
+    "alignSelf": {
+        "prefix": "align",
+        "body": "alignSelf: '${1:center}',",
+        "description": "alignSelf"
+    },
+    "alignContent": {
+        "prefix": "align",
+        "body": "alignContent: '${1}',",
+        "description": "alignContent"
+    },
+    "aspectRatio": {
+        "prefix": "as",
+        "body": "aspectRatio: '${1}',",
+        "description": "aspectRatio"
+    },
+    "borderBottomWidth": {
+        "prefix": "bor",
+        "body": "borderBottomWidth: ${1},",
+        "description": "borderBottomWidth"
+    },
+    "borderLeftWidth": {
+        "prefix": "bor",
+        "body": "borderLeftWidth: ${1},",
+        "description": "borderLeftWidth"
+    },
+    "borderRightWidth": {
+        "prefix": "bor",
+        "body": "borderRightWidth: ${1},",
+        "description": "borderRightWidth"
+    },
+    "borderTopWidth": {
+        "prefix": "bor",
+        "body": "borderTopWidth: ${1},",
+        "description": "borderTopWidth"
+    },
+    "borderWidth": {
+        "prefix": "bor",
+        "body": "borderWidth: ${1},",
+        "description": "borderWidth"
+    },
+    "borderColor": {
+        "prefix": "bor",
+        "body": "borderColor: ${1},",
+        "description": "borderColor"
+    },
+    "borderRadius": {
+        "prefix": "bor",
+        "body": "borderRadius: ${1},",
+        "description": "borderRadius"
+    },
+    "borderLeftColor": {
+        "prefix": "bor",
+        "body": "borderLeftColor: ${1},",
+        "description": "borderLeftColor"
+    },
+    "borderRightColor": {
+        "prefix": "bor",
+        "body": "borderRightColor: ${1},",
+        "description": "borderRightColor"
+    },
+    "borderTopColor": {
+        "prefix": "bor",
+        "body": "borderTopColor: ${1},",
+        "description": "borderTopColor"
+    },
+    "borderBottomColor": {
+        "prefix": "bor",
+        "body": "borderBottomColor: ${1},",
+        "description": "borderBottomColor"
+    },
+    "borderBottomLeftRadius": {
+        "prefix": "bor",
+        "body": "borderBottomLeftRadius: ${1},",
+        "description": "borderBottomLeftRadius"
+    },
+    "borderBottomRightRadius": {
+        "prefix": "bor",
+        "body": "borderBottomRightRadius: ${1},",
+        "description": "borderBottomRightRadius"
+    },
+    "borderTopLeftRadius": {
+        "prefix": "bor",
+        "body": "borderTopLeftRadius: ${1},",
+        "description": "borderTopLeftRadius"
+    },
+    "borderTopRightRadius": {
+        "prefix": "bor",
+        "body": "borderTopRightRadius: ${1},",
+        "description": "borderTopRightRadius"
+    },
+    "backgroundColor": {
+        "prefix": "bac",
+        "body": "backgroundColor: ${1},",
+        "description": "backgroundColor"
+    },
+    "display": {
+        "prefix": "di",
+        "body": "display: '${1:none}',",
+        "description": "display"
+    },
+    "opacity": {
+        "prefix": "op",
+        "body": "opacity: ${1},",
+        "description": "opacity"
+    },
+    "shadowColor": {
+        "prefix": "sha",
+        "body": "shadowColor: '${1:none}',",
+        "description": "shadowColor"
+    },
+    "shadowOffset": {
+        "prefix": "sha",
+        "body": "shadowOffset: ${1},",
+        "description": "shadowOffset"
+    },
+    "shadowOpacity": {
+        "prefix": "sha",
+        "body": "shadowOpacity: ${1},",
+        "description": "shadowOpacity"
+    },
+    "shadowRadius": {
+        "prefix": "sha",
+        "body": "shadowRadius: ${1},",
+        "description": "shadowRadius"
+    },
+    "elevation": {
+        "prefix": "e",
+        "body": "elevation: ${1},",
+        "description": "elevation"
+    },
+    "flex": {
+        "prefix": "flex",
+        "body": "flex: ${1},",
+        "description": "flex"
+    },
+    "flexBasis": {
+        "prefix": "flex",
+        "body": "flexBasis: '${1}',",
+        "description": "flexBasis"
+    },
+    "flexDirection": {
+        "prefix": "flex",
+        "body": "flexDirection: '${1:column}',",
+        "description": "flexDirection"
+    },
+    "flexGrow": {
+        "prefix": "flex",
+        "body": "flexGrow: '${1}',",
+        "description": "flexGrow"
+    },
+    "flexShrink": {
+        "prefix": "flex",
+        "body": "flexShrink: '${1}',",
+        "description": "flexShrink"
+    },
+    "flexWrap": {
+        "prefix": "flex",
+        "body": "flexWrap: '${1}',",
+        "description": "flexWrap"
+    },
+    "fontSize": {
+        "prefix": "fo",
+        "body": "fontSize: ${1},",
+        "description": "fontSize"
+    },
+    "fontStyle": {
+        "prefix": "fo",
+        "body": "fontStyle: '${1:normal}',",
+        "description": "fontStyle"
+    },
+    "fontFamily": {
+        "prefix": "fo",
+        "body": "fontFamily: '${1}',",
+        "description": "fontFamily"
+    },
+    "fontWeight": {
+        "prefix": "fo",
+        "body": "fontWeight: '${1:normal}',",
+        "description": "fontWeight"
+    },
+    "height": {
+        "prefix": "h",
+        "body": "height: ${1},",
+        "description": "height"
+    },
+    "left": {
+        "prefix": "l",
+        "body": "left: ${1},",
+        "description": "left"
+    },
+    "margin": {
+        "prefix": "mar",
+        "body": "margin: '${1}',",
+        "description": "margin"
+    },
+    "marginBottom": {
+        "prefix": "mar",
+        "body": "marginBottom: ${1},",
+        "description": "marginBottom"
+    },
+    "marginHorizontal": {
+        "prefix": "mar",
+        "body": "marginHorizontal: '${1}',",
+        "description": "marginHorizontal"
+    },
+    "marginLeft": {
+        "prefix": "mar",
+        "body": "marginLeft: ${1},",
+        "description": "marginLeft"
+    },
+    "marginRight": {
+        "prefix": "mar",
+        "body": "marginRight: ${1},",
+        "description": "marginRight"
+    },
+    "marginTop": {
+        "prefix": "mar",
+        "body": "marginTop: ${1},",
+        "description": "marginTop"
+    },
+    "marginVertical": {
+        "prefix": "mar",
+        "body": "marginVertical: '${1}',",
+        "description": "marginVertical"
+    },
+    "maxHeight": {
+        "prefix": "max",
+        "body": "maxHeight: ${1},",
+        "description": "maxHeight"
+    },
+    "maxWidth": {
+        "prefix": "max",
+        "body": "maxWidth: ${1},",
+        "description": "maxWidth"
+    },
+    "minHeight": {
+        "prefix": "min",
+        "body": "minHeight: ${1},",
+        "description": "minHeight"
+    },
+    "minWidth": {
+        "prefix": "min",
+        "body": "minWidth: ${1},",
+        "description": "minWidth"
+    },
+    "overflow": {
+        "prefix": "over",
+        "body": "overflow: '${1}',",
+        "description": "overflow"
+    },
+    "padding": {
+        "prefix": "padding",
+        "body": "padding: ${1},",
+        "description": "padding"
+    },
+    "paddingBottom": {
+        "prefix": "padding",
+        "body": "paddingBottom: ${1},",
+        "description": "paddingBottom"
+    },
+    "paddingHorizontal": {
+        "prefix": "padding",
+        "body": "paddingHorizontal: ${1},",
+        "description": "paddingHorizontal"
+    },
+    "paddingLeft": {
+        "prefix": "padding",
+        "body": "paddingLeft: ${1},",
+        "description": "paddingLeft"
+    },
+    "paddingRight": {
+        "prefix": "padding",
+        "body": "paddingRight: ${1},",
+        "description": "paddingRight"
+    },
+    "paddingTop": {
+        "prefix": "padding",
+        "body": "paddingTop: ${1},",
+        "description": "paddingTop"
+    },
+    "paddingVertical": {
+        "prefix": "padding",
+        "body": "paddingVertical: ${1},",
+        "description": "paddingVertical"
+    },
+    "position": {
+        "prefix": "pos",
+        "body": "position: ${1},",
+        "description": "position"
+    },
+    "right": {
+        "prefix": "ri",
+        "body": "right: ${1},",
+        "description": "right"
+    },
+    "top": {
+        "prefix": "top",
+        "body": "top: ${1},",
+        "description": "top"
+    },
+    "width": {
+        "prefix": "w",
+        "body": "width: ${1},",
+        "description": "width"
+    },
+    "zIndex": {
+        "prefix": "z",
+        "body": "zIndex: ${1},",
+        "description": "zIndex"
+    },
+    "api": {
+        "prefix": "api",
+        "body": [
+            "import axios from 'axios';",
+            "",
+            "const api = axios.create({",
+            "  baseURL: ${1},",
+            "});",
+            "",
+            "export default api;",
+            ""
+        ],
+        "description": "Create Axios Configuration file"
+    },
+    "region": {
+        "prefix": "region",
+        "body": ["//#region ${1}", "${2}", "//#endregion"],
+        "description": "Create region"
+    },
+    "regionStartEnd": {
+        "prefix": "#regionStartEnd",
+        "body": ["//#region ${1}", "${2}", "//#endregion"],
+        "description": "Create region"
+    }
+}
diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json
new file mode 100644
index 00000000..ff02f6b1
--- /dev/null
+++ b/snippets/javascript/react-ts.json
@@ -0,0 +1,375 @@
+{
+    "destructuring of props": {
+        "prefix": "dp",
+        "body": ["const { ${1:name} } = this.props"]
+    },
+    "destructuring of state": {
+        "prefix": "ds",
+        "body": ["const { ${1:name} } = this.state"]
+    },
+    "reactClassCompoment": {
+        "prefix": "rcc",
+        "body": "import React, { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nexport default ${1}",
+        "description": "Creates a React component class"
+    },
+    "reactJustClassCompoment": {
+        "prefix": "rcjc",
+        "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n",
+        "description": "Creates a React component class"
+    },
+    "reactClassCompomentPropTypes": {
+        "prefix": "rccp",
+        "body": "import React, { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes"
+    },
+    "reactClassCompomentWithMethods": {
+        "prefix": "rcfc",
+        "body": "import React, { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes and all lifecycle methods"
+    },
+    "reactFunctionComponent": {
+        "prefix": "rfc",
+        "body": "import React from 'react'\n\nexport const ${TM_FILENAME_BASE} = (props : {}) => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "Creates a React functional component without PropTypes"
+    },
+    "reactFunctionComponentWithEmotion": {
+        "prefix": "rfce",
+        "body": "import { css } from '@emotion/core'\nimport React from 'react'\n\nexport const ${TM_FILENAME_BASE} = (props: {}) => {\n\treturn (\n\t\t<div css={css``}>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "Creates a React functional component with emotion import"
+    },
+    "classConstructor": {
+        "prefix": "con",
+        "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props as arguments"
+    },
+    "classConstructorContext": {
+        "prefix": "conc",
+        "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props and context as arguments"
+    },
+    "componentWillMount": {
+        "prefix": "cwm",
+        "body": "\ncomponentWillMount () {\n\t$0\n}\n",
+        "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
+    },
+    "componentDidMount": {
+        "prefix": "cdm",
+        "body": "componentDidMount () {\n\t$0\n}\n",
+        "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+    },
+    "componentWillReceiveProps": {
+        "prefix": "cwr",
+        "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
+        "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
+    },
+    "componentGetDerivedStateFromProps": {
+        "prefix": "cgd",
+        "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+    },
+    "shouldComponentUpdate": {
+        "prefix": "scu",
+        "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked before rendering when new props or state are being received. "
+    },
+    "componentWillUpdate": {
+        "prefix": "cwup",
+        "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked immediately before rendering when new props or state are being received."
+    },
+    "componentDidUpdate": {
+        "prefix": "cdup",
+        "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked immediately after the component's updates are flushed to the DOM."
+    },
+    "componentWillUnmount": {
+        "prefix": "cwun",
+        "body": "componentWillUnmount () {\n\t$0\n}\n",
+        "description": "Invoked immediately before a component is unmounted from the DOM."
+    },
+    "componentRender": {
+        "prefix": "ren",
+        "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "When called, it should examine this.props and this.state and return a single child element."
+    },
+    "componentSetStateObject": {
+        "prefix": "sst",
+        "body": "this.setState($0)",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentSetStateFunc": {
+        "prefix": "ssf",
+        "body": "this.setState((state, props) => { return { $0 }})\n",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentProps": {
+        "prefix": "tp",
+        "body": "this.props.$0",
+        "description": "Access component's props"
+    },
+    "componentState": {
+        "prefix": "ts",
+        "body": "this.state.$0",
+        "description": "Access component's state"
+    },
+    "propTypes": {
+        "prefix": "rpt",
+        "body": "$1.propTypes = {\n\t$2\n}",
+        "description": "Creates empty propTypes declaration"
+    },
+    "propTypeArray": {
+        "prefix": "pta",
+        "body": "PropTypes.array,",
+        "description": "Array prop type"
+    },
+    "propTypeArrayRequired": {
+        "prefix": "ptar",
+        "body": "PropTypes.array.isRequired,",
+        "description": "Array prop type required"
+    },
+    "propTypeBool": {
+        "prefix": "ptb",
+        "body": "PropTypes.bool,",
+        "description": "Bool prop type"
+    },
+    "propTypeBoolRequired": {
+        "prefix": "ptbr",
+        "body": "PropTypes.bool.isRequired,",
+        "description": "Bool prop type required"
+    },
+    "propTypeFunc": {
+        "prefix": "ptf",
+        "body": "PropTypes.func,",
+        "description": "Func prop type"
+    },
+    "propTypeFuncRequired": {
+        "prefix": "ptfr",
+        "body": "PropTypes.func.isRequired,",
+        "description": "Func prop type required"
+    },
+    "propTypeNumber": {
+        "prefix": "ptn",
+        "body": "PropTypes.number,",
+        "description": "Number prop type"
+    },
+    "propTypeNumberRequired": {
+        "prefix": "ptnr",
+        "body": "PropTypes.number.isRequired,",
+        "description": "Number prop type required"
+    },
+    "propTypeObject": {
+        "prefix": "pto",
+        "body": "PropTypes.object,",
+        "description": "Object prop type"
+    },
+    "propTypeObjectRequired": {
+        "prefix": "ptor",
+        "body": "PropTypes.object.isRequired,",
+        "description": "Object prop type required"
+    },
+    "propTypeString": {
+        "prefix": "pts",
+        "body": "PropTypes.string,",
+        "description": "String prop type"
+    },
+    "propTypeStringRequired": {
+        "prefix": "ptsr",
+        "body": "PropTypes.string.isRequired,",
+        "description": "String prop type required"
+    },
+    "propTypeNode": {
+        "prefix": "ptnd",
+        "body": "PropTypes.node,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array"
+    },
+    "propTypeNodeRequired": {
+        "prefix": "ptndr",
+        "body": "PropTypes.node.isRequired,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+    },
+    "propTypeElement": {
+        "prefix": "ptel",
+        "body": "PropTypes.element,",
+        "description": "React element prop type"
+    },
+    "propTypeElementRequired": {
+        "prefix": "ptelr",
+        "body": "PropTypes.element.isRequired,",
+        "description": "React element prop type required"
+    },
+    "propTypeInstanceOf": {
+        "prefix": "pti",
+        "body": "PropTypes.instanceOf($0),",
+        "description": "Is an instance of a class prop type"
+    },
+    "propTypeInstanceOfRequired": {
+        "prefix": "ptir",
+        "body": "PropTypes.instanceOf($0).isRequired,",
+        "description": "Is an instance of a class prop type required"
+    },
+    "propTypeEnum": {
+        "prefix": "pte",
+        "body": "PropTypes.oneOf(['$0']),",
+        "description": "Prop type limited to specific values by treating it as an enum"
+    },
+    "propTypeEnumRequired": {
+        "prefix": "pter",
+        "body": "PropTypes.oneOf(['$0']).isRequired,",
+        "description": "Prop type limited to specific values by treating it as an enum required"
+    },
+    "propTypeOneOfType": {
+        "prefix": "ptet",
+        "body": "PropTypes.oneOfType([\n\t$0\n]),",
+        "description": "An object that could be one of many types"
+    },
+    "propTypeOneOfTypeRequired": {
+        "prefix": "ptetr",
+        "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
+        "description": "An object that could be one of many types required"
+    },
+    "propTypeArrayOf": {
+        "prefix": "ptao",
+        "body": "PropTypes.arrayOf($0),",
+        "description": "An array of a certain type"
+    },
+    "propTypeArrayOfRequired": {
+        "prefix": "ptaor",
+        "body": "PropTypes.arrayOf($0).isRequired,",
+        "description": "An array of a certain type required"
+    },
+    "propTypeObjectOf": {
+        "prefix": "ptoo",
+        "body": "PropTypes.objectOf($0),",
+        "description": "An object with property values of a certain type"
+    },
+    "propTypeObjectOfRequired": {
+        "prefix": "ptoor",
+        "body": "PropTypes.objectOf($0).isRequired,",
+        "description": "An object with property values of a certain type required"
+    },
+    "propTypeShape": {
+        "prefix": "ptsh",
+        "body": "PropTypes.shape({\n\t$0\n}),",
+        "description": "An object taking on a particular shape"
+    },
+    "propTypeShapeRequired": {
+        "prefix": "ptshr",
+        "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
+        "description": "An object taking on a particular shape required"
+    },
+    "jsx element": {
+        "prefix": "j",
+        "body": "<${1:elementName}>\n\t$0\n</${1}>",
+        "description": "an element"
+    },
+    "jsx element self closed": {
+        "prefix": "jc",
+        "body": "<${1:elementName} />",
+        "description": "an element self closed"
+    },
+    "jsx elements map": {
+        "prefix": "jm",
+        "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
+        "description": "an element self closed"
+    },
+    "jsx elements map with return": {
+        "prefix": "jmr",
+        "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
+        "description": "an element self closed"
+    },
+    "jsx element wrap selection": {
+        "prefix": "jsx wrap selection with element",
+        "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
+        "description": "an element"
+    },
+    "useState": {
+        "prefix": "us",
+        "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+        "description": "React useState() hook"
+    },
+    "useEffect": {
+        "prefix": "ue",
+        "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+        "description": "React useEffect() hook"
+    },
+    "useEffect with cleanup": {
+        "prefix": "uec",
+        "body": [
+            "useEffect(() => {",
+            "\t$1",
+            "\n\treturn () => {",
+            "\t\t$2",
+            "\t}",
+            "}, [${3:dependencies}])$0"
+        ],
+        "description": "React useEffect() hook with a cleanup function"
+    },
+    "createContext": {
+        "prefix": "cc",
+        "body": [
+            "export const $1 = createContext<$2>(",
+            "\t(null as any) as $2",
+            ")"
+        ],
+        "description": "creates a react context"
+    },
+    "useContext": {
+        "prefix": "uc",
+        "body": ["const $1 = useContext($2)$0"],
+        "description": "React useContext() hook"
+    },
+    "useRef": {
+        "prefix": "ur",
+        "body": ["const ${1:elName}El = useRef(null)$0"],
+        "description": "React useRef() hook"
+    },
+    "useCallback": {
+        "prefix": "ucb",
+        "body": [
+            "const ${1:memoizedCallback} = useCallback(",
+            "\t() => {",
+            "\t\t${2:doSomething}(${3:a}, ${4:b})",
+            "\t},",
+            "\t[${5:a}, ${6:b}],",
+            ")$0"
+        ],
+        "description": "React useCallback() hook"
+    },
+    "useMemo": {
+        "prefix": "ume",
+        "body": [
+            "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+        ],
+        "description": "React useMemo() hook"
+    },
+    "createReactHook": {
+        "prefix": "crh",
+        "body": [ "export const use$0 = () => {", "", "}" ],
+        "description": "Create React Hook"
+    },
+    "createReactHookWithName": {
+        "prefix": "crhn",
+        "body": [  "export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"],
+        "description": "Create React Hook using File name" 
+    },
+    "describeBlock": {
+        "prefix": "desc",
+        "body": ["describe('$1', () => {", "  $0", "})", ""],
+        "description": "Testing `describe` block"
+    },
+    "testBlock": {
+        "prefix": "test",
+        "body": ["test('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `test` block"
+    },
+    "itBlock": {
+        "prefix": "tit",
+        "body": ["it('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `it` block"
+    },
+    "itAsyncBlock": {
+        "prefix": "tita",
+        "body": ["it('should $1', async () => {", "  $0", "})", ""],
+        "description": "Testing async `it` block"
+    }
+}
diff --git a/snippets/javascript/react.json b/snippets/javascript/react.json
new file mode 100644
index 00000000..b51c5847
--- /dev/null
+++ b/snippets/javascript/react.json
@@ -0,0 +1,370 @@
+{
+    "destructuring of props": {
+        "prefix": "dp",
+        "body": ["const { ${1:name} } = this.props"]
+    },
+    "destructuring of state": {
+        "prefix": "ds",
+        "body": ["const { ${1:name} } = this.state"]
+    },
+    "if falsy return null": {
+        "prefix": "ifr",
+        "body": "if (!${1:condition}) {\n\treturn null\n}"
+    },
+    "reactClassCompoment": {
+        "prefix": "rcc",
+        "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nexport default ${1}",
+        "description": "Creates a React component class"
+    },
+    "reactJustClassCompoment": {
+        "prefix": "rcjc",
+        "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n",
+        "description": "Creates a React component class"
+    },
+    "reactClassCompomentPropTypes": {
+        "prefix": "rccp",
+        "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes"
+    },
+    "reactClassCompomentWithMethods": {
+        "prefix": "rcfc",
+        "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes and all lifecycle methods"
+    },
+    "reactFunctionComponent": {
+        "prefix": "rfc",
+        "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}",
+        "description": "Creates a React function component without PropTypes"
+    },
+    "reactFunctionComponentWithCustomName": {
+        "prefix": "rfcn",
+        "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${1:functionname}",
+        "description": "Creates a React function component with custom name"
+    },
+    "reactFunctionComponentWithEmotion": {
+        "prefix": "rfce",
+        "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div css={css``}>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "Creates a React functional component with emotion"
+    },
+    "reactStatelessProps": {
+        "prefix": "rfcp",
+        "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}",
+        "description": "Creates a React function component with PropTypes"
+    },
+    "classConstructor": {
+        "prefix": "con",
+        "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props as arguments"
+    },
+    "classConstructorContext": {
+        "prefix": "conc",
+        "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props and context as arguments"
+    },
+    "componentWillMount": {
+        "prefix": "cwm",
+        "body": "\ncomponentWillMount () {\n\t$0\n}\n",
+        "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
+    },
+    "componentDidMount": {
+        "prefix": "cdm",
+        "body": "componentDidMount () {\n\t$0\n}\n",
+        "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+    },
+    "componentWillReceiveProps": {
+        "prefix": "cwr",
+        "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
+        "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
+    },
+    "componentGetDerivedStateFromProps": {
+        "prefix": "cgd",
+        "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+    },
+    "shouldComponentUpdate": {
+        "prefix": "scu",
+        "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked before rendering when new props or state are being received. "
+    },
+    "componentWillUpdate": {
+        "prefix": "cwup",
+        "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked immediately before rendering when new props or state are being received."
+    },
+    "componentDidUpdate": {
+        "prefix": "cdup",
+        "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked immediately after the component's updates are flushed to the DOM."
+    },
+    "componentWillUnmount": {
+        "prefix": "cwun",
+        "body": "componentWillUnmount () {\n\t$0\n}\n",
+        "description": "Invoked immediately before a component is unmounted from the DOM."
+    },
+    "componentRender": {
+        "prefix": "ren",
+        "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "When called, it should examine this.props and this.state and return a single child element."
+    },
+    "componentSetStateObject": {
+        "prefix": "sst",
+        "body": "this.setState($0)",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentSetStateFunc": {
+        "prefix": "ssf",
+        "body": "this.setState((state, props) => { return { $0 }})\n",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentProps": {
+        "prefix": "tp",
+        "body": "this.props.$0",
+        "description": "Access component's props"
+    },
+    "componentState": {
+        "prefix": "ts",
+        "body": "this.state.$0",
+        "description": "Access component's state"
+    },
+    "propTypes": {
+        "prefix": "rpt",
+        "body": "$1.propTypes = {\n\t$2\n}",
+        "description": "Creates empty propTypes declaration"
+    },
+    "propTypeArray": {
+        "prefix": "pta",
+        "body": "PropTypes.array,",
+        "description": "Array prop type"
+    },
+    "propTypeArrayRequired": {
+        "prefix": "ptar",
+        "body": "PropTypes.array.isRequired,",
+        "description": "Array prop type required"
+    },
+    "propTypeBool": {
+        "prefix": "ptb",
+        "body": "PropTypes.bool,",
+        "description": "Bool prop type"
+    },
+    "propTypeBoolRequired": {
+        "prefix": "ptbr",
+        "body": "PropTypes.bool.isRequired,",
+        "description": "Bool prop type required"
+    },
+    "propTypeFunc": {
+        "prefix": "ptf",
+        "body": "PropTypes.func,",
+        "description": "Func prop type"
+    },
+    "propTypeFuncRequired": {
+        "prefix": "ptfr",
+        "body": "PropTypes.func.isRequired,",
+        "description": "Func prop type required"
+    },
+    "propTypeNumber": {
+        "prefix": "ptn",
+        "body": "PropTypes.number,",
+        "description": "Number prop type"
+    },
+    "propTypeNumberRequired": {
+        "prefix": "ptnr",
+        "body": "PropTypes.number.isRequired,",
+        "description": "Number prop type required"
+    },
+    "propTypeObject": {
+        "prefix": "pto",
+        "body": "PropTypes.object,",
+        "description": "Object prop type"
+    },
+    "propTypeObjectRequired": {
+        "prefix": "ptor",
+        "body": "PropTypes.object.isRequired,",
+        "description": "Object prop type required"
+    },
+    "propTypeString": {
+        "prefix": "pts",
+        "body": "PropTypes.string,",
+        "description": "String prop type"
+    },
+    "propTypeStringRequired": {
+        "prefix": "ptsr",
+        "body": "PropTypes.string.isRequired,",
+        "description": "String prop type required"
+    },
+    "propTypeNode": {
+        "prefix": "ptnd",
+        "body": "PropTypes.node,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array"
+    },
+    "propTypeNodeRequired": {
+        "prefix": "ptndr",
+        "body": "PropTypes.node.isRequired,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+    },
+    "propTypeElement": {
+        "prefix": "ptel",
+        "body": "PropTypes.element,",
+        "description": "React element prop type"
+    },
+    "propTypeElementRequired": {
+        "prefix": "ptelr",
+        "body": "PropTypes.element.isRequired,",
+        "description": "React element prop type required"
+    },
+    "propTypeInstanceOf": {
+        "prefix": "pti",
+        "body": "PropTypes.instanceOf($0),",
+        "description": "Is an instance of a class prop type"
+    },
+    "propTypeInstanceOfRequired": {
+        "prefix": "ptir",
+        "body": "PropTypes.instanceOf($0).isRequired,",
+        "description": "Is an instance of a class prop type required"
+    },
+    "propTypeEnum": {
+        "prefix": "pte",
+        "body": "PropTypes.oneOf(['$0']),",
+        "description": "Prop type limited to specific values by treating it as an enum"
+    },
+    "propTypeEnumRequired": {
+        "prefix": "pter",
+        "body": "PropTypes.oneOf(['$0']).isRequired,",
+        "description": "Prop type limited to specific values by treating it as an enum required"
+    },
+    "propTypeOneOfType": {
+        "prefix": "ptet",
+        "body": "PropTypes.oneOfType([\n\t$0\n]),",
+        "description": "An object that could be one of many types"
+    },
+    "propTypeOneOfTypeRequired": {
+        "prefix": "ptetr",
+        "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
+        "description": "An object that could be one of many types required"
+    },
+    "propTypeArrayOf": {
+        "prefix": "ptao",
+        "body": "PropTypes.arrayOf($0),",
+        "description": "An array of a certain type"
+    },
+    "propTypeArrayOfRequired": {
+        "prefix": "ptaor",
+        "body": "PropTypes.arrayOf($0).isRequired,",
+        "description": "An array of a certain type required"
+    },
+    "propTypeObjectOf": {
+        "prefix": "ptoo",
+        "body": "PropTypes.objectOf($0),",
+        "description": "An object with property values of a certain type"
+    },
+    "propTypeObjectOfRequired": {
+        "prefix": "ptoor",
+        "body": "PropTypes.objectOf($0).isRequired,",
+        "description": "An object with property values of a certain type required"
+    },
+    "propTypeShape": {
+        "prefix": "ptsh",
+        "body": "PropTypes.shape({\n\t$0\n}),",
+        "description": "An object taking on a particular shape"
+    },
+    "propTypeShapeRequired": {
+        "prefix": "ptshr",
+        "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
+        "description": "An object taking on a particular shape required"
+    },
+    "jsx element": {
+        "prefix": "j",
+        "body": "<${1:elementName}>\n\t$0\n</${1}>",
+        "description": "an element"
+    },
+    "jsx element self closed": {
+        "prefix": "jc",
+        "body": "<${1:elementName} />",
+        "description": "an element self closed"
+    },
+    "jsx elements map": {
+        "prefix": "jm",
+        "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
+        "description": "an element self closed"
+    },
+    "jsx elements map with return": {
+        "prefix": "jmr",
+        "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
+        "description": "an element self closed"
+    },
+    "jsx element wrap selection": {
+        "prefix": "jsx wrap selection with element",
+        "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
+        "description": "an element"
+    },
+    "useState": {
+        "prefix": "us",
+        "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+        "description": "React useState() hook"
+    },
+    "useEffect": {
+        "prefix": "ue",
+        "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+        "description": "React useEffect() hook"
+    },
+    "useEffect with return": {
+        "prefix": "uer",
+        "body": [
+            "useEffect(() => {",
+            "\t$1",
+            "\n\treturn () => {",
+            "\t\t$2",
+            "\t}",
+            "}, [${3:dependencies}])$0"
+        ],
+        "description": "React useEffect() hook with return statement"
+    },
+    "useContext": {
+        "prefix": "uc",
+        "body": ["const $1 = useContext($2)$0"],
+        "description": "React useContext() hook"
+    },
+    "useRef": {
+        "prefix": "ur",
+        "body": ["const ${1:elName}El = useRef(null)$0"],
+        "description": "React useContext() hook"
+    },
+    "useCallback": {
+        "prefix": "ucb",
+        "body": [
+            "const ${1:memoizedCallback} = useCallback(",
+            "\t() => {",
+            "\t\t${2:doSomething}(${3:a}, ${4:b})",
+            "\t},",
+            "\t[${5:a}, ${6:b}],",
+            ")$0"
+        ],
+        "description": "React useCallback() hook"
+    },
+    "useMemo": {
+        "prefix": "ume",
+        "body": [
+            "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+        ],
+        "description": "React useMemo() hook"
+    },
+    "describeBlock": {
+        "prefix": "desc",
+        "body": ["describe('$1', () => {", "  $0", "})", ""],
+        "description": "Testing `describe` block"
+    },
+    "testBlock": {
+        "prefix": "test",
+        "body": ["test('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `test` block"
+    },
+    "itBlock": {
+        "prefix": "tit",
+        "body": ["it('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `it` block"
+    },
+    "itAsyncBlock": {
+        "prefix": "tita",
+        "body": ["it('should $1', async () => {", "  $0", "})", ""],
+        "description": "Testing async `it` block"
+    }
+}
diff --git a/snippets/javascript/tsdoc.json b/snippets/javascript/tsdoc.json
new file mode 100644
index 00000000..5dfe2def
--- /dev/null
+++ b/snippets/javascript/tsdoc.json
@@ -0,0 +1,213 @@
+{
+    "comment": {
+        "prefix": "/**",
+        "body": [
+            "/**",
+            " * ${1:What it does.}",
+            " *",
+            " * @param ${3:name} - ${4:Parameter description.}",
+            " * @returns ${2:Type and description of the returned object.}",
+            " *",
+            " * @example",
+            " * ```",
+            " * ${5:Write me later.}$0",
+            " * ```",
+            " */"
+        ],
+        "description": "A full TSDoc comment with description, parameters, return, and example."
+    },
+    "comment simple": {
+        "prefix": "/*",
+        "body": [
+            "/**", 
+            " * ${1:Comment.}$0", 
+            " */"
+        ],
+        "description": "A simple TSDoc comment."
+    },
+    "alpha": {
+        "prefix": "@alpha",
+        "body": ["@alpha$0"],
+        "description": "This tag can be used to indicate that the associated member is intended to eventually be used by third-party developers but is not yet stable enough to conform to semantic versioning requirements."
+    },
+    "beta": {
+        "prefix": "@beta",
+        "body": ["@beta$0"],
+        "description": "This tag can be used to indicate that the associated member is intended to eventually be used by third-party developers but is not yet stable enough to conform to semantic versioning requirements."
+    },
+    "category": {
+        "prefix": "@category",
+        "body": ["@category$0"],
+        "description": "The @category tag can be used to place several related API items under a common header when listed in a page's index. It may be specified multiple times to list a reflection under several headings."
+    },
+    "defaultValue": {
+        "prefix": "@defaultValue",
+        "body": ["@defaultValue$0"],
+        "description": "The @defaultValue tag can be used to document the default value for an accessor or property."
+    },
+    "deprecated": {
+        "prefix": "@deprecated",
+        "body": ["@deprecated$0"],
+        "description": "nThe @deprecated tag indicates that a declaration should not be used and may be removed in a future release."
+    },
+    "enum": {
+        "prefix": "@enum",
+        "body": ["@enum$0"],
+        "description": "If present on an object with string or number literal values, TypeDoc will convert the variable as an enumeration instead of a variable."
+    },
+    "event": {
+        "prefix": "@event",
+        "body": ["@event$0"],
+        "description": "The @event tag is used to mark a reflection as belonging in the \"Events\" group. It is equivalent to specifying @group Events in the comment."
+    },
+    "eventProperty": {
+        "prefix": "@eventProperty",
+        "body": ["@eventProperty$0"],
+        "description": "The @eventProperty tag is used to mark a reflection as belonging in the \"Events\" group. It is equivalent to specifying @group Events in the comment."
+    },
+    "example": {
+        "prefix": "@example",
+        "body": ["@example", "* ```", "* ${1:write me later.}$0", "* ```"],
+        "description": "The example tag indicates that the following text is an example of how to use the function."
+    },
+    "experimental": {
+        "prefix": "@experimental",
+        "body": ["@experimental$0"],
+        "description": "This tag can be used to indicate that the associated member is intended to eventually be used by third-party developers but is not yet stable enough to conform to semantic versioning requirements."
+    },
+    "group": {
+        "prefix": "@group",
+        "body": ["@group$0"],
+        "description": "The @group tag can be used to place several related API items under a common header when listed in a page's index. It may be specified multiple times to list a reflection under several headings."
+    },
+    "ignore": {
+        "prefix": "@ignore",
+        "body": ["@ignore$0"],
+        "description": "Reflections marked with the @hidden tag will be removed from the documentation. It is equivalent to the @ignore JSDoc tag."
+    },
+    "inheritDoc": {
+        "prefix": "@inheritDoc",
+        "body": ["@inheritDoc$0"],
+        "description": "The @inheritDoc tag is used to create a reflection's documentation by copying it from another reflection. The tag has the form {@inheritDoc ref} where ref is a declaration reference."
+    },
+    "interface": {
+        "prefix": "@interface",
+        "body": ["@interface$0"],
+        "description": "If present on a type alias, will cause it to be converted as an interface. This will result in all \"dynamic\" properties being expanded to real properties."
+    },
+    "internal": {
+        "prefix": "@internal",
+        "body": ["@internal$0"],
+        "description": "The @internal tag indicates that a reflection is not intended to be used by API consumers. API items annotated with @internal may be removed from the generated documentation by specifying the --excludeInternal option."
+    },
+    "label": {
+        "prefix": "@label",
+        "body": ["@label$0"],
+        "description": "The @label tag can be used to give an overloaded signature a name that it can be referenced with via a declaration reference."
+    },
+    "link": {
+        "prefix": "@link",
+        "body": ["@link$0"],
+        "description": "The @link tag is used to refer to another documented declaration. The tag has the form of {@link myDeclaration}."
+    },
+    "module": {
+        "prefix": "@module",
+        "body": ["@module$0"],
+        "description": "The @module tag is used to mark a comment as referring to a file rather than the declaration following it. It may optionally be used to rename a module whose name TypeDoc guesses incorrectly."
+    },
+    "overload": {
+        "prefix": "@overload",
+        "body": ["@overload$0"],
+        "description": "The @overload tag is recognized for use in JavaScript projects which can use it to declare overloads since TypeScript 5.0. It is automatically removed from the rendered documentation with the --excludeTags option."
+    },
+    "override": {
+        "prefix": "@override",
+        "body": ["@override$0"],
+        "description": "TypeDoc parses the @override tag for compatibility with TSDoc, but does not attach any meaning to it's use."
+    },
+    "packageDocumentation": {
+        "prefix": "@packageDocumentation",
+        "body": ["@packageDocumentation$0"],
+        "description": "The @packageDocumentation tag is used to mark a comment as referring to a file rather than the declaration following it. The TypeDoc specific @module tag can be used for the same purpose when semantically clearer."
+    },
+    "param": {
+        "prefix": "@param",
+        "body": ["@param$0"],
+        "description": "The @param tag is used to document a parameter of a function or method."
+    },
+    "private": {
+        "prefix": "@private",
+        "body": ["@private$0"],
+        "description": "This tag should generally not be used and may be removed in a future release. The @private tag overrides the visibility of a reflection to be private."
+    },
+    "privateRemarks": {
+        "prefix": "@privateRemarks",
+        "body": ["@privateRemarks$0"],
+        "description": "The @privateRemarks tag can be used to include documentation text that should not be included in the generated API reference."
+    },
+    "property": {
+        "prefix": "@property",
+        "body": ["@property$0"],
+        "description": "The @property (or @prop) tag can be used to add a comment to a child of the current reflection. It is intended for use with the @namespace and @interface tags which might not have convenient places to include comments for each member."
+    },
+    "protected": {
+        "prefix": "@protected",
+        "body": ["@protected$0"],
+        "description": "This tag should generally not be used and may be removed in a future release. The @protected tag overrides the visibility of a reflection to be protected."
+    },
+    "public": {
+        "prefix": "@public",
+        "body": ["@public$0"],
+        "description": "This tag should generally not be used. The @public tag overrides the visibility of a reflection to be public. This does not strictly conform to the TSDoc specification, which treats member visibility and release visibility separately."
+    },
+    "readonly": {
+        "prefix": "@readonly",
+        "body": ["@readonly$0"],
+        "description": "The @readonly tag indicates that a reflection should be documented as non-writable, even if writable according to TypeScript."
+    },
+    "remarks": {
+        "prefix": "@remarks",
+        "body": ["@remarks$0"],
+        "description": "The @remarks tag can be used to separate the summary section of a documentation content from additional detailed information. At most one @remarks block is permitted in a comment. Unlike most tags, the @remarks tag will be copied if {@inheritDoc} is used in a comment."
+    },
+    "returns": {
+        "prefix": "@returns",
+        "body": ["@returns$0"],
+        "description": "The @returns tag can be used to document the return value of a function. At most one @returns tag should be present in a comment."
+    },
+    "satisfies": {
+        "prefix": "@satisfies",
+        "body": ["@satisfies$0"],
+        "description": "This tag is recognized for parity with TypeScript 5.0's @satisfies Support in JSDoc."
+    },
+    "sealed": {
+        "prefix": "@sealed",
+        "body": ["@sealed$0"],
+        "description": "TypeDoc parses the @sealed tag for compatibility with TSDoc, but does not attach any meaning to it's use."
+    },
+    "see": {
+        "prefix": "@see",
+        "body": ["@see$0"],
+        "description": "The @see tag can be used to create a list of references for other resources related to this export."
+    },
+    "template": {
+        "prefix": "@template",
+        "body": ["@template$0"],
+        "description": "The @template tag is used to document a type parameter of a function, method, class, interface or type alias. It is used like \"@template {string} T - the identity type \""
+    },
+    "throws": {
+        "prefix": "@throws",
+        "body": ["@throws$0"],
+        "description": "The @throws tag can be used to document an exception that can be thrown by a function or method."
+    },
+    "typeParam": {
+        "prefix": "@typeParam",
+        "body": ["@typeParam$0"],
+        "description": "The @typeParam tag is used to document a type parameter of a function, method, class, interface or type alias. TypeDoc recognizes the @template tag as an alias of @typeParam."
+    },
+    "virtual": {
+        "prefix": "@virtual",
+        "body": ["@virtual$0"],
+        "description": "TypeDoc parses the @virtual tag for compatibility with TSDoc, but does not attach any meaning to it's use."
+    }
+}
diff --git a/snippets/javascript/typescript.json b/snippets/javascript/typescript.json
new file mode 100644
index 00000000..29b447a8
--- /dev/null
+++ b/snippets/javascript/typescript.json
@@ -0,0 +1,220 @@
+{
+    "Constructor": {
+        "prefix": "ctor",
+        "body": [
+            "/**",
+            " *",
+            " */",
+            "constructor() {",
+            "\tsuper();",
+            "\t$0",
+            "}"
+        ],
+        "description": "Constructor"
+    },
+    "Class Definition": {
+        "prefix": "class",
+        "body": [
+            "class ${1:name} {",
+            "\tconstructor(${2:parameters}) {",
+            "\t\t$0",
+            "\t}",
+            "}"
+        ],
+        "description": "Class Definition"
+    },
+    "Interface Definition": {
+        "prefix": "iface",
+        "body": ["interface ${1:name} {", "\t$0", "}"],
+        "description": "Interface Definition"
+    },
+    "Public Method Definition": {
+        "prefix": "public method",
+        "body": [
+            "/**",
+            " * ${1:name}",
+            " */",
+            "public ${1:name}() {",
+            "\t$0",
+            "}"
+        ],
+        "description": "Public Method Definition"
+    },
+    "Private Method Definition": {
+        "prefix": "private method",
+        "body": ["private ${1:name}() {", "\t$0", "}"],
+        "description": "Private Method Definition"
+    },
+    "Import external module.": {
+        "prefix": "import statement",
+        "body": ["import { $0 } from \"${1:module}\";"],
+        "description": "Import external module."
+    },
+    "Property getter": {
+        "prefix": "get",
+        "body": [
+            "",
+            "public get ${1:value}() : ${2:string} {",
+            "\t${3:return $0}",
+            "}",
+            ""
+        ],
+        "description": "Property getter"
+    },
+    "Log to the console": {
+        "prefix": "log",
+        "body": ["console.log($1);", "$0"],
+        "description": "Log to the console"
+    },
+    "Log warning to console": {
+        "prefix": "warn",
+        "body": ["console.warn($1);", "$0"],
+        "description": "Log warning to the console"
+    },
+    "Log error to console": {
+        "prefix": "error",
+        "body": ["console.error($1);", "$0"],
+        "description": "Log error to the console"
+    },
+    "Define a full property": {
+        "prefix": "prop",
+        "body": [
+            "",
+            "private _${1:value} : ${2:string};",
+            "public get ${1:value}() : ${2:string} {",
+            "\treturn this._${1:value};",
+            "}",
+            "public set ${1:value}(v : ${2:string}) {",
+            "\tthis._${1:value} = v;",
+            "}",
+            ""
+        ],
+        "description": "Define a full property"
+    },
+    "Triple-slash reference": {
+        "prefix": "ref",
+        "body": ["/// <reference path=\"$1\" />", "$0"],
+        "description": "Triple-slash reference"
+    },
+    "Property setter": {
+        "prefix": "set",
+        "body": [
+            "",
+            "public set ${1:value}(v : ${2:string}) {",
+            "\tthis.$3 = v;",
+            "}",
+            ""
+        ],
+        "description": "Property setter"
+    },
+    "Throw Exception": {
+        "prefix": "throw",
+        "body": ["throw \"$1\";", "$0"],
+        "description": "Throw Exception"
+    },
+    "For Loop": {
+        "prefix": "for",
+        "body": [
+            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
+            "\tconst ${3:element} = ${2:array}[${1:index}];",
+            "\t$0",
+            "}"
+        ],
+        "description": "For Loop"
+    },
+    "For-Each Loop using =>": {
+        "prefix": "foreach =>",
+        "body": ["${1:array}.forEach(${2:element} => {", "\t$0", "});"],
+        "description": "For-Each Loop using =>"
+    },
+    "For-In Loop": {
+        "prefix": "forin",
+        "body": [
+            "for (const ${1:key} in ${2:object}) {",
+            "\tif (${2:object}.hasOwnProperty(${1:key})) {",
+            "\t\tconst ${3:element} = ${2:object}[${1:key}];",
+            "\t\t$0",
+            "\t}",
+            "}"
+        ],
+        "description": "For-In Loop"
+    },
+    "For-Of Loop": {
+        "prefix": "forof",
+        "body": ["for (const ${1:iterator} of ${2:object}) {", "\t$0", "}"],
+        "description": "For-Of Loop"
+    },
+    "For-Await-Of Loop": {
+        "prefix": "forawaitof",
+        "body": [
+            "for await (const ${1:iterator} of ${2:object}) {",
+            "\t$0",
+            "}"
+        ],
+        "description": "For-Await-Of Loop"
+    },
+    "Function Statement": {
+        "prefix": "function",
+        "body": ["function ${1:name}(${2:params}:${3:type}) {", "\t$0", "}"],
+        "description": "Function Statement"
+    },
+    "If Statement": {
+        "prefix": "if",
+        "body": ["if (${1:condition}) {", "\t$0", "}"],
+        "description": "If Statement"
+    },
+    "If-Else Statement": {
+        "prefix": "ifelse",
+        "body": ["if (${1:condition}) {", "\t$2", "} else {", "\t$0", "}"],
+        "description": "If-Else Statement"
+    },
+    "New Statement": {
+        "prefix": "new",
+        "body": ["const ${1:name} = new ${2:type}(${3:arguments});$0"],
+        "description": "New Statement"
+    },
+    "Switch Statement": {
+        "prefix": "switch",
+        "body": [
+            "switch (${1:key}) {",
+            "\tcase ${2:value}:",
+            "\t\t$0",
+            "\t\tbreak;",
+            "",
+            "\tdefault:",
+            "\t\tbreak;",
+            "}"
+        ],
+        "description": "Switch Statement"
+    },
+    "While Statement": {
+        "prefix": "while",
+        "body": ["while (${1:condition}) {", "\t$0", "}"],
+        "description": "While Statement"
+    },
+    "Do-While Statement": {
+        "prefix": "dowhile",
+        "body": ["do {", "\t$0", "} while (${1:condition});"],
+        "description": "Do-While Statement"
+    },
+    "Try-Catch Statement": {
+        "prefix": "trycatch",
+        "body": ["try {", "\t$0", "} catch (${1:error}) {", "\t", "}"],
+        "description": "Try-Catch Statement"
+    },
+    "Set Timeout Function": {
+        "prefix": "settimeout",
+        "body": ["setTimeout(() => {", "\t$0", "}, ${1:timeout});"],
+        "description": "Set Timeout Function"
+    },
+    "Region Start": {
+        "prefix": "#region",
+        "body": ["//#region $0"],
+        "description": "Folding Region Start"
+    },
+    "Region End": {
+        "prefix": "#endregion",
+        "body": ["//#endregion"],
+        "description": "Folding Region End"
+    }
+}
diff --git a/snippets/python/comprehension.json b/snippets/python/comprehension.json
new file mode 100644
index 00000000..778c1561
--- /dev/null
+++ b/snippets/python/comprehension.json
@@ -0,0 +1,47 @@
+{
+    "List comprehension": {
+        "prefix": "lc",
+        "body": "[${3:value} for ${2:value} in ${1:iterable}]$0",
+        "description": "List comprehension for creating a list based on existing lists."
+    },
+    "List comprehension if else": {
+        "prefix": "lcie",
+        "body": "[${3:value} if ${4:condition} else ${5:condition} for ${2:value} in ${1:iterable}]$0",
+        "description": "List comprehension for creating a list based on existing lists, with conditional if-else statement."
+    },
+    "List comprehension if filter": {
+        "prefix": "lci",
+        "body": "[${3:value} for ${2:value} in ${1:iterable} if ${4:condition}$0]",
+        "description": "List comprehension for creating a list based on existing lists, with conditional if statement."
+    },
+    "Dictionary comprehension": {
+        "prefix": "dc",
+        "body": "{${4:key}: ${5:value} for ${2:key}, ${3:value} in ${1:iterable}}$0",
+        "description": "Handy and faster way to create dictionaries based on existing dictionaries."
+    },
+    "Dictionary comprehension if filter": {
+        "prefix": "dci",
+        "body": "{${4:key}: ${5:value} for ${2:key}, ${3:value} in ${1:iterable} if ${6:condition}}$0",
+        "description": "Handy and faster way to create dictionaries based on existing dictionaries, with conditional if statement."
+    },
+    "Set comprehension": {
+        "prefix": "sc",
+        "body": "{${3:value} for ${2:value} in ${1:iterable}}$0",
+        "description": "Create a set based on existing iterables."
+    },
+    "Set Comprehension if filter": {
+        "prefix": "sci",
+        "body": "{${3:value} for ${2:value} in ${1:iterable} if ${4:condition}}$0",
+        "description": "Create a set based on existing iterables, with condition if statement."
+    },
+    "Generator comprehension": {
+        "prefix": "gc",
+        "body": "(${3:key} for ${2:value} in ${1:iterable})$0",
+        "description": "Create a generator based on existing iterables."
+    },
+    "Generator comprehension if filter": {
+        "prefix": "gci",
+        "body": "(${3:key} for ${2:value} in ${1:iterable} if ${4:condition})$0",
+        "description": "Create a generator based on existing iterables, with condition if statement."
+    }
+}
diff --git a/snippets/python/debug.json b/snippets/python/debug.json
new file mode 100644
index 00000000..c9f593f1
--- /dev/null
+++ b/snippets/python/debug.json
@@ -0,0 +1,44 @@
+{
+    "PDB set trace": {
+        "prefix": "pdb",
+        "body": "__import__('pdb').set_trace()$0",
+        "description": "Code snippet for pdb debug"
+    },
+    "iPDB set trace": {
+        "prefix": "ipdb",
+        "body": "__import__('ipdb').set_trace()$0",
+        "description": "Code snippet for ipdb debug"
+    },
+    "rPDB set trace": {
+        "prefix": "rpdb",
+        "body": "import rpdb2; rpdb2.start_embedded_debugger('${1:debug_password}')$0"
+    },
+    "PuDB set trace": {
+        "prefix": "pudb",
+        "body": "import pudb; pudb.set_trace()$0",
+        "description": "Code snippet for pudb debug"
+    },
+    "IPython set trace": {
+        "prefix": "ipydb",
+        "body": "from IPython import embed; embed()$0"
+    },
+    "Celery set trace": {
+        "prefix": "rdb",
+        "body": "from celery.contrib import rdb; rdb.set_trace()$0",
+        "description": "Code snippet for celery remote debugger breakpoint"
+    },
+    "Pretty print": {
+        "prefix": "pprint",
+        "body": "__import__('pprint').pprint(${1:expression})$0"
+    },
+    "debugpy remote attach": {
+        "prefix": "debugpy",
+        "body": [
+            "import debugpy, platform",
+            "debugpy.listen((platform.node(), ${1:5678}))",
+            "print(f\"debugpy listening on {platform.node()}:$1\", flush=True)",
+            "debugpy.wait_for_client()$0"
+        ],
+        "description": "Code snippet for debugpy remote attach"
+    }
+}
diff --git a/snippets/python/pydoc.json b/snippets/python/pydoc.json
new file mode 100644
index 00000000..63f4369e
--- /dev/null
+++ b/snippets/python/pydoc.json
@@ -0,0 +1,160 @@
+{
+    "comment": {
+        "prefix": "###",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Args:",
+            "    ${4:argument_name}: ${5:type and description.}",
+            "",
+            "Returns:",
+            "    ${3:type and description of the returned object.}",
+            "",
+            "Example:",
+            "    # ${6:Description of my example.}",
+            "    ${7:use_it_this_way(arg1, arg2)}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for functions and methods, including short summary, details, args, returns, and examples. This docstring is an synonym of \"\"\"function."
+    },
+    "comment simple": {
+        "prefix": "##",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "\"\"\""
+        ],
+        "description": "A simple Python docstring comment. Useful when you prefer to add the docstrings manually on functions."
+    },    
+    "module docstring": {
+        "prefix": "###module",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Examples:",
+            "    # ${3:Description of my example.}",
+            "    ${4:use_it_this_way(arg1, arg2)}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for modules, including a one-line summary, details, and example."
+    },
+    "test module docstring": {
+        "prefix": "###test",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "\"\"\""
+        ],
+        "description": "Module-level docstrings for test files are not required. They should be included only when there is additional information that can be provided.\n\nExamples include some specifics on how the test should be run, an explanation of an unusual setup pattern, dependency on the external environment, and so on. Docstrings that do not provide any new information should not be used, such as \"\"\"Tests for foo.bar.\"\"\""
+    },
+    "function docstring": {
+        "prefix": "###function",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Args:",
+            "    ${4:argument_name}: ${5:type and description.}",
+            "",
+            "Returns:",
+            "    ${3:type and description of the returned object.}",
+            "",
+            "Example:",
+            "    # ${6:Description of my example.}",
+            "    ${7:use_it_this_way(arg1, arg2)}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for functions and methods, including short summary, details, args, returns, and example."
+    },
+    "function docstring typed": {
+        "prefix": "###function_typed",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Args:",
+            "    ${5:argument_name} (${6:type}): ${7:description.}",
+            "",
+            "Returns:",
+            "    ${3:type}: {4:Description of the returned object.}",
+            "",
+            "Example:",
+            "    # ${8:Description of my example.}",
+            "    ${9:use_it_this_way(arg1, arg2)}",
+            "\"\"\""
+        ],
+        "description": "Alternative Python docstring for functions and methods, with a different type syntax. Some teams prefer it."
+    },
+    "generator docstring": {
+        "prefix": "###generator",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Args:",
+            "    ${4:argument_name}: ${5:type and description.}",
+            "",
+            "Yields:",
+            "    ${3:type and description of the yielded object.}",
+            "",
+            "Example:",
+            "    # ${6:Description of my example.}",
+            "    ${7:use_it_this_way(arg1, arg2)}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for generator methods, including a one-line summary, details, parameters, yields, and example. It is the same, but it has yields instead of returns."
+    },
+    "class docstring": {
+        "prefix": "###class",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Attributes:",
+            "    ${3:attribute_name}: ${4:type and description.}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for classes, including a one-line summary, details, attributes, and returns."
+    },
+    "exception docstring": {
+        "prefix": "###exception",
+        "body": [
+            "\"\"\"",
+            "${1:A one-line summary.}",
+            "",
+            "${2:Detailed description.}$0",
+            "",
+            "Attributes:",
+            "    ${3:attribute_name}: ${4:type and description.}",
+            "\"\"\""
+        ],
+        "description": "A Python docstring for exceptions, including a one-line summary, description, and attributes."
+    },
+    "raises docstring": {
+        "prefix": "###raises",
+        "body": [
+            "Raises:",
+            "    ${1:ErrorName}: ${2:Error description.}$0"
+        ],
+        "description": "A Python docstring for methods when we want to be exclicit about the errors it Raises. Use it only when is relevant."
+    }
+
+}
diff --git a/snippets/python/python.json b/snippets/python/python.json
new file mode 100644
index 00000000..eae0151f
--- /dev/null
+++ b/snippets/python/python.json
@@ -0,0 +1,234 @@
+{
+    "#!/usr/bin/env pythonX": {
+        "prefix": "#env",
+        "body": "#!/usr/bin/env python$0",
+        "description": "Shebang line for the first python in PATH"
+    },
+    "pyright ignore line": {
+        "prefix": "#ignore",
+        "body": "# pyright: ignore[$0]",
+        "description": "Ignore specific line diagnostic in pyright (ignore all is unsafe)"
+    },
+    "Multiline string": {
+        "prefix": "#",
+        "body": ["\"\"\"$0", "\"\"\""],
+        "description": "Snippet to avoid autopair plugin annoyances when typing multiple \""
+    },
+    "One-line multiline string": {
+        "prefix": "##",
+        "body": "\"\"\"$0\"\"\"",
+        "description": "Snippet to avoid autopair plugin annoyances when typing multiple \""
+    },
+    "self": {
+        "prefix": "s",
+        "body": "self.$0",
+        "description": "Snippet to reference the self property in an object"
+    },
+    "__magic__": {
+        "prefix": "__",
+        "body": "__${1:init}__$0",
+        "description": "Create magic method"
+    },
+    "if __name__ == __main__": {
+        "prefix": "ifmain",
+        "body": ["if __name__ == \"__main__\":", "\t${1:main()}"],
+        "description": "Execute code if the file is executed directly"
+    },
+    "import": {
+        "prefix": "import",
+        "body": "import ${1:datetime}",
+        "description": "Import a package or module"
+    },
+    "from ... import ...": {
+        "prefix": "fromim",
+        "body": "from ${1:pathlib} import ${2:Path}",
+        "description": "Import individual objects directly into the caller’s symbol table"
+    },
+    "if": {
+        "prefix": "if",
+        "body": ["if ${1:condition}:", "\t${2:pass}"],
+        "description": "if statement"
+    },
+    "elif": {
+        "prefix": "elif",
+        "body": ["elif ${1:expression}:", "\t${2:pass}"],
+        "description": "elif statement"
+    },
+    "else": {
+        "prefix": "else",
+        "body": ["else:", "\t${1:pass}"],
+        "description": "else statement"
+    },
+    "if/else": {
+        "prefix": "ifelse",
+        "body": ["if ${1:condition}:", "\t${2:pass}", "else:", "\t${3:pass}"],
+        "description": "if statement with else"
+    },
+    "match/case": {
+        "prefix": "match",
+        "body": [
+            "match ${1:expression}:",
+            "\tcase ${2:pattern}:",
+            "\t\t${3:pass}"
+        ],
+        "description": "match/case statements"
+    },
+    "case": {
+        "prefix": "case",
+        "body": ["case ${2:pattern}:", "\t${3:pass}"],
+        "description": "case block"
+    },
+    "case wildcard": {
+        "prefix": "casew",
+        "body": ["case _:", "\t${1:pass}"],
+        "description": "case wildcard block if other cases fail"
+    },
+    "while": {
+        "prefix": "while",
+        "body": ["while ${1:condition}:", "\t${2:pass}"],
+        "description": "while loop"
+    },
+    "for": {
+        "prefix": "for",
+        "body": ["for ${1:value} in ${2:iterable}:", "\t${3:pass}"],
+        "description": "for loop"
+    },
+    "for w/ range": {
+        "prefix": "forr",
+        "body": ["for ${1:value} in range($2):", "\t${3:pass}"],
+        "description": "for loop that iterates over range of integers"
+    },
+    "with": {
+        "prefix": "with",
+        "body": ["with ${1:expression} as ${2:target}:", "\t${3:pass}"],
+        "description": "'with' statement"
+    },
+    "lambda": {
+        "prefix": "lambda",
+        "body": ["lambda ${1:parameter_list}: ${2:expression}"],
+        "description": "lambda statement"
+    },
+    "Function": {
+        "prefix": "def",
+        "body": ["def ${1:fname}($2):", "\t${3:pass}"],
+        "description": "Function definition"
+    },
+    "Function w/ return type": {
+        "prefix": "deft",
+        "body": ["def ${1:fname}($2) -> ${3:None}:", "\t${4:pass}"],
+        "description": "Function definition with return type"
+    },
+    "class": {
+        "prefix": "class",
+        "body": ["class ${1:classname}:", "\t${2:pass}"],
+        "description": "Class definition"
+    },
+    "Derived class": {
+        "prefix": "classd",
+        "body": ["class ${1:classname}($2):", "\t${3:pass}"],
+        "description": "Class definition with inheritance"
+    },
+    "class template": {
+        "prefix": "classi",
+        "body": [
+            "class ${1:ClassName}($2):",
+            "\t\"\"\"${3:docstring for $1.}\"\"\"",
+            "\tdef __init__(self, ${4:arg}):",
+            "\t\t${5:super($1, self).__init__()}",
+            "\t\tself.$4 = $4$0"
+        ],
+        "description": "Class definition template"
+    },
+    "Method": {
+        "prefix": "defs",
+        "body": ["def ${1:mname}(self$2):", "\t${3:pass}"],
+        "description": "Class method definition"
+    },
+    "Method w/ return type": {
+        "prefix": "defst",
+        "body": ["def ${1:mname}(self$2) -> ${3:None}:", "\t${4:pass}"],
+        "description": "Class method definition"
+    },
+    "property template": {
+        "prefix": "property",
+        "body": [
+            "@property",
+            "def ${1:pname}(self):",
+            "\t\"\"\"${2:The $1 property.}\"\"\"",
+            "\t${3:return self._$1}",
+            "",
+            "@${4:$1}.setter",
+            "def ${5:$1}(self, value):",
+            "\t${6:self._$1} = value"
+        ],
+        "description": "New property: get and set via decorator"
+    },
+    "except": {
+        "prefix": "except",
+        "body": ["except$1:", "\t${2:pass}"],
+        "description": "except statement"
+    },
+    "except as": {
+        "prefix": "exceptas",
+        "body": ["except ${1:Exception} as ${2:e}:", "\t${3:raise $2}"],
+        "description": "'except as' statement"
+    },
+    "try/except": {
+        "prefix": "try",
+        "body": [
+            "try:",
+            "\t${1:pass}",
+            "except ${2:Exception} as ${3:e}:",
+            "\t${4:raise $3}"
+        ],
+        "description": "try/except blocks"
+    },
+    "try/except/else": {
+        "prefix": "trya",
+        "body": [
+            "try:",
+            "\t${1:pass}",
+            "except ${2:Exception} as ${3:e}:",
+            "\t${4:raise $3}",
+            "else:",
+            "\t${5:pass}"
+        ],
+        "description": "try/except/else blocks"
+    },
+    "try/except/finally": {
+        "prefix": "tryf",
+        "body": [
+            "try:",
+            "\t${1:pass}",
+            "except ${2:Exception} as ${3:e}:",
+            "\t${4:raise $3}",
+            "finally:",
+            "\t${5:pass}"
+        ],
+        "description": "try/except/finally blocks"
+    },
+    "try/except/else/finally": {
+        "prefix": "tryef",
+        "body": [
+            "try:",
+            "\t${1:pass}",
+            "except${2: ${3:Exception} as ${4:e}}:",
+            "\t${5:raise}",
+            "else:",
+            "\t${6:pass}",
+            "finally:",
+            "\t${7:pass}"
+        ],
+        "description": "try/except/else/finally blocks"
+    },
+    "Jupyter cell": {
+        "prefix": "#cell",
+        "body": "# %%",
+        "description": "Add a new cell"
+    },
+    "Jupyter markdown cell": {
+        "prefix": "#mark",
+        "body": "# %% [markdown]",
+        "description": "Add a new markdown cell"
+    }
+}
diff --git a/snippets/python/unittest.json b/snippets/python/unittest.json
new file mode 100644
index 00000000..23bd58ea
--- /dev/null
+++ b/snippets/python/unittest.json
@@ -0,0 +1,54 @@
+{
+    "Assert equal": {
+        "prefix": "ase",
+        "body": "self.assertEqual(${1:expected}, ${2:actual}${3:, '${4:message}'})$0"
+    },
+    "Assert not equal": {
+        "prefix": "asne",
+        "body": "self.assertNotEqual(${1:expected}, ${2:actual}${3:, '${4:message}'})$0"
+    },
+    "Assert raises": {
+        "prefix": "asr",
+        "body": "self.assertRaises(${1:exception}, ${2:callable}, ${3:args})$0"
+    },
+    "Assert True": {
+        "prefix": "ast",
+        "body": "self.assertTrue(${1:actual}${2:, '${3:message}'})$0"
+    },
+    "Assert False": {
+        "prefix": "asf",
+        "body": "self.assertFalse(${1:actual}${2:, '${3:message}'})$0"
+    },
+    "Assert is": {
+        "prefix": "asi",
+        "body": "self.assertIs(${1:expected}, ${2:actual}${3:, '${4:message}'})$0"
+    },
+    "Assert is not": {
+        "prefix": "asint",
+        "body": "self.assertIsNot(${1:expected}, ${2:actual}${3:, '${4:message}'})$0"
+    },
+    "Assert is None": {
+        "prefix": "asino",
+        "body": "self.assertIsNone(${1:actual}${2:, '${3:message}'})$0"
+    },
+    "Assert is not None": {
+        "prefix": "asinno",
+        "body": "self.assertIsNotNone(${1:actual}${2:, '${3:message}'})$0"
+    },
+    "Assert in": {
+        "prefix": "asin",
+        "body": "self.assertIn(${1:needle}, ${2:haystack}${3:, '${4:message}'})$0"
+    },
+    "Assert not in": {
+        "prefix": "asni",
+        "body": "self.assertNotIn(${1:needle}, ${2:haystack}${3:, '${4:message}'})$0"
+    },
+    "Assert": {
+        "prefix": "as",
+        "body": "self.assert_(${1:boolean expression}${2:, '${3:message}'})$0"
+    },
+    "Fail (a test)": {
+        "prefix": "fail",
+        "body": "self.fail('${1:message}')$0"
+    }
+}