{"id":16454199,"url":"https://github.com/zrna/javascript-vscode-extension","last_synced_at":"2026-05-07T05:38:20.266Z","repository":{"id":202140964,"uuid":"168544932","full_name":"Zrna/javascript-vscode-extension","owner":"Zrna","description":"\u003c/\u003e Visual Studio Code extension for JavaScript, TypeScript, ReactJS and Redux","archived":false,"fork":false,"pushed_at":"2020-11-08T19:05:33.000Z","size":25,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-09T14:36:39.799Z","etag":null,"topics":["extension","javascript","react-redux","reactjs","redux","snippets","typescript","visual-studio-code"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=lzrnic.javascript-vscode-extension","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zrna.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-01-31T15:10:13.000Z","updated_at":"2023-03-29T03:02:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"387c22b4-9d60-46b8-9784-1ace7637d4dc","html_url":"https://github.com/Zrna/javascript-vscode-extension","commit_stats":null,"previous_names":["zrna/javascript-vscode-extension"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zrna%2Fjavascript-vscode-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zrna%2Fjavascript-vscode-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zrna%2Fjavascript-vscode-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zrna%2Fjavascript-vscode-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zrna","download_url":"https://codeload.github.com/Zrna/javascript-vscode-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240934412,"owners_count":19880991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extension","javascript","react-redux","reactjs","redux","snippets","typescript","visual-studio-code"],"created_at":"2024-10-11T10:18:22.369Z","updated_at":"2026-05-07T05:38:20.238Z","avatar_url":"https://github.com/Zrna.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS/TS/ReactJS/Redux snippets\n\nThis extension provides snippets for JavaScript, TypeScript, ReactJS and Redux which will help you with everyday needs for commands.\n\n![Version](https://vsmarketplacebadge.apphb.com/version-short/lzrnic.javascript-vscode-extension.svg)\n\n![Downloads](https://vsmarketplacebadge.apphb.com/downloads-short/lzrnic.javascript-vscode-extension.svg)\n\nHere is direct link to marketplace [JS/TS/ReactJS/Redux snippets](https://marketplace.visualstudio.com/items?itemName=lzrnic.javascript-vscode-extension)\n\nMore snippets will come soon!\n\n## Supported\n\n- JavaScript (.js and .jsx)\n- React JS\n- TypeScript (.ts and .tsx)\n- Redux\n- Redux Toolkit\n\n## Release Notes\n\nCurrent version is 1.0.4 [08 Nov 2020]\n\n## Author\n\nLuka Zrnić\n\n## Basic Methods\n\n| Prefix    | Description                                             |\n| --------- | ------------------------------------------------------- |\n| `csl→`    | Creates default `console.log(value);`                   |\n| `cse→`    | Creates default `console.error(value);`                 |\n| `cslt→`   | Creates default `console.log('text', value);` with text |\n| `func→`   | Creates default function                                |\n| `fp1→`    | Creates function with **1** parameter                   |\n| `fp2→`    | Creates function with **2** parameters                  |\n| `arrf→`   | Creates default arrow function                          |\n| `afp1→`   | Creates arrow function with **1** parameter             |\n| `afp2→`   | Creates arrow function with **2** parameters            |\n| `objC→`   | Creates `const object` with one _name:value_ pair       |\n| `objL→`   | Creates `let object` with one _name:value_ pair         |\n| `objV→`   | Creates `var object` with one _name:value_ pair         |\n| `ifs→`    | Creates _if_ statement                                  |\n| `ifel→`   | Creates _if/else_ statement                             |\n| `ifelif→` | Creates _if/else if/else_ statement                     |\n| `swca→`   | Switch case with _2 cases_                              |\n| `floop→`  | Creates default _for_ loop                              |\n| `wloop→`  | Creates default _while_ loop                            |\n| `dwloop→` | Creates default _do/while_ loop                         |\n\n## Redux\n\n| Prefix  | Description                     |\n| ------- | ------------------------------- |\n| `rdat→` | Creates `const` for Action type |\n| `rdac→` | Creates Redux Action            |\n| `rdr→`  | Creates Redux Reducer           |\n| `rdcr→` | Creates Redux Combine Reducers  |\n| `rds→`  | Creates Redux Store             |\n\n### react-redux\n\n| Prefix    | Description                                                |\n| --------- | ---------------------------------------------------------- |\n| `imrrdc→` | `import { connect } from 'react-redux';`                   |\n| `imrrdp→` | `import { Provider } from 'react-redux';`                  |\n| `mstp→`   | Creates `const mapStateToProps = (state) =\u003e { ... }`       |\n| `mdtp→`   | Creates `const mapDispatchToProps = (dispatch) =\u003e { ... }` |\n\n## React\n\n| Prefix   | Description                                                             |\n| -------- | ----------------------------------------------------------------------- |\n| `imr→`   | `import React from 'react';`                                            |\n| `imrd→`  | `import ReactDOM from 'react-dom';`                                     |\n| `imrc→`  | `import React, { Component } from 'react';`                             |\n| `imcc→`  | `import ComponentName from 'ComponentLocation';`                        |\n| `imrpc→` | `import React, { PureComponent } from 'react';`                         |\n| `cst→`   | `state = { key: value }`                                                |\n| `cdm→`   | `componentDidMount = () =\u003e { // do something }`                         |\n| `cwm→`   | `componentWillMount = () =\u003e { // do something }`                        |\n| `cwun→`  | `componentWillUnmount = () =\u003e { // do something }`                      |\n| `cwrp→`  | `componentWillReceiveProps = (nextProps) =\u003e { // do something }`        |\n| `scup→`  | `shouldComponentUpdate = (nextProps, nextState) =\u003e { // do something }` |\n| `cwup→`  | `componentWillUpdate = (nextProps, nextState) =\u003e { // do something }`   |\n| `cdup→`  | `componentDidUpdate = (prevProps, prevState) =\u003e { // do something }`    |\n\n## React Hooks\n\n| Prefix   | Description                                                         |\n| -------- | ------------------------------------------------------------------- |\n| `rush→`  | `const [name, setName] = useState();`                               |\n| `rueh→`  | `useEffect(() =\u003e { });`                                             |\n| `rurh→`  | `const refName = useRef();`                                         |\n| `ruch→`  | `const value = useContext();`                                       |\n| `rumh→`  | `const memoizedValue = useMemo(() =\u003e computeExpensiveValue(), []);` |\n| `rucbh→` | `const name = useCallback(() =\u003e { }, []);`                          |\n| `rudbh→` | `useDebugValue(value);`                                             |\n\n## React Components\n\n### Class Component\n\n### `rcc`\n\n```javascript\nimport React, { Component } from 'react';\n\nclass CLassName extends Component {\n  render() {\n    return \u003cdiv\u003e \u003c/div\u003e;\n  }\n}\n\nexport default ClassName;\n```\n\n### Functional Component\n\n### `rfc`\n\n```javascript\nimport React from 'react';\n\nconst ComponentName = () =\u003e {\n  return \u003cdiv\u003e \u003c/div\u003e;\n};\n\nexport default ComponentName;\n```\n\n## Redux Toolkit\n\n### Create Action\n\n### `rtca`\n\n```javascript\nimport { createAction } from '@reduxjs/toolkit';\n\nconst name = createAction('action/type');\n```\n\n### Create Reducer\n\n### `rtcr`\n\n```javascript\nimport { createAction, createReducer } from '@reduxjs/toolkit';\n\nconst name = createAction('action/type');\n\nconst initialState = {};\n\nconst reducerName = createReducer(initialState, builder =\u003e {\n  builder.addCase(name, (state, action) =\u003e {\n    // ...\n  });\n});\n```\n\n### Create Slice\n\n### `rtcs`\n\n```javascript\nimport { createSlice } from '@reduxjs/toolkit';\n\nconst initialState = {};\n\nexport const sliceName = createSlice({\n  name: 'name',\n  initialState,\n  reducers: {\n    name: (state, action) =\u003e {\n      // ...\n    },\n  },\n});\n\nexport const { name } = sliceName.actions;\n\nexport default sliceName.reducer;\n```\n\n### Configure Store\n\n### `rts`\n\n```javascript\nimport { configureStore } from '@reduxjs/toolkit';\n\nimport reducer from 'location';\n\nexport default configureStore({\n  reducerName: reducer,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzrna%2Fjavascript-vscode-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzrna%2Fjavascript-vscode-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzrna%2Fjavascript-vscode-extension/lists"}