Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>VSCode Snippets & Tasks for Docs and DevelopmentNew to Visual Studio Code? Get it now.
VSCode Snippets & Tasks for Docs and Development

VSCode Snippets & Tasks for Docs and Development

wx-chevalier

|
85 installs
| (0) | Free
A collection of essentials snippets for Visual Studio Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VSCode Essentials Snippets

A collection of essentials snippets for Visual Studio Code.

Preview

Snippets are generated with snippet-generator.

snippet-generator

Installation

  1. Install Visual Studio Code
  2. Launch Visual Studio Code
  3. Choose Extensions from menu
  4. Search for @m-fe/vscode-snippets
  5. Click Install to install it
  6. Click Reload to reload the Code

Usage

Type part of a snippet, press enter and the snippet unfolnds. For snippets in markdown format you need to press ctrl+space (Windows / Linux) or cmd+space (OSX).

Angular snippets

TypeScript snippets

Snippet Content
ng-class Angular Class
ng-component Angular Component
ng-component-input Angular Component with Input
ng-directive Angular Directive
ng-enum Angular Enum
ng-guard Angular Guard
ng-interface Angular Interface
ng-module Angular Module
ng-pipe Angular Pipe
ng-service Angular Service

RxJS Snippets

Snippet Content
rx-extensions RxJS Extensions import
rx-observable RxJS Observable import
rx-subject RxJS Subject import
rx-subject-behavior RxJS BehaviorSubject import
rx-subject-replay RxJS ReplaySubject import
rx-add-observable RxJS add observable import
rx-add-operator RxJS add operator import

HTML snipppets

Snippet Content
ng-ngFor Angular *ngFor
ng-ngIf Angular *ngIf
ng-ngModel Angular ngModel
ng-routerLink Angular routerLink
ng-routerLink-param Angular routerLink with a route parameter
ng-select select control with ngModel
ng-pre Angular pre with json

Continuous Integration snippets

Snippet Content
ci-appveyor AppVeyor configuration file
ci-circle Circle configuration file
ci-travis Travis configuration file

Git snippets

Snippet Content
gitattributes .gitattributes file with eol=lf
gitattributes-archives Set archives as binary
gitattributes-documents Set documents as binary
gitattributes-executables Set executables as binary
gitattributes-fonts Set fonts as binary
gitattributes-graphics Set graphics as binary
CHANGELOG A CHANGELOG.md template
README A README.md template

Lint snippets

Snippet Content
eslint ESLint configuration file
eslintignore ESLint ignore file

Project snippets

Snippet Content
editorconfig EditorConfig file
npmrc npm configuration file
package package.json file

Development

Install dependencies

  1. Install Node.js and npm
  2. Install Visual Studio Code

Run

Clone the repo

$ git clone https://github.com/wx-chevalier/dd-vscode-snippets.git

Install vsce

$ npm install -g vsce

Build the extension file

$ vsce package

# or

$ npm run build

Install the extension from a package file (.vsix)

  1. Launch Visual Studio Code
  2. Choose Extensions from menu
  3. Click More > Install from VSIX...
  4. Select the file @m-fe/vscode-snippets-x.x.x.vsix
  5. Click Reload Now to reload the Code

Publish

Install vsce

$ npm install -g vsce

Create a publisher

$ vsce create-publisher <publisher-name>

Login

$ vsce login <publisher-name>

Publish

$ vsce publish

For more detailed information about publish: Publishing Extensions.

About

License

MIT

Home & More | 延伸阅读

技术视野

您可以通过以下导航来在 Gitbook 中阅读笔者的系列文章,涵盖了技术资料归纳、编程语言与理论、Web 与大前端、服务端开发与基础架构、云计算与大数据、数据科学与人工智能、产品设计等多个领域:

  • 知识体系:《Awesome Lists | CS 资料集锦》、《Awesome CheatSheets | 速学速查手册》、《Awesome Interviews | 求职面试必备》、《Awesome RoadMaps | 程序员进阶指南》、《Awesome MindMaps | 知识脉络思维脑图》、《Awesome-CS-Books | 开源书籍(.pdf)汇总》

  • 编程语言:《编程语言理论》、《Java 实战》、《JavaScript 实战》、《Go 实战》、《Python 实战》、《Rust 实战》

  • 软件工程、模式与架构:《编程范式与设计模式》、《数据结构与算法》、《软件架构设计》、《整洁与重构》、《研发方式与工具》

  • Web 与大前端:《现代 Web 全栈开发与工程架构》、《数据可视化》、《iOS》、《Android》、《混合开发与跨端应用》

  • 服务端开发实践与工程架构:《服务端基础》、《微服务与云原生》、《测试与高可用保障》、《DevOps》、《Spring》、《信息安全与渗透测试》

  • 分布式基础架构:《分布式系统》、《分布式计算》、《数据库》、《网络》、《虚拟化与云计算》、《Linux 与操作系统》

  • 数据科学,人工智能与深度学习:《数理统计》、《数据分析》、《机器学习》、《深度学习》、《自然语言处理》、《工具与工程化》、《行业应用》

  • 产品设计与用户体验:《产品设计》、《交互体验》、《项目管理》

  • 行业应用:《行业迷思》、《功能域》、《电子商务》、《智能制造》

此外,你还可前往 xCompass 交互式地检索、查找需要的文章/链接/书籍/课程;或者在 MATRIX 文章与代码索引矩阵中查看文章与项目源代码等更详细的目录导航信息。最后,你也可以关注微信公众号:『某熊的技术之路』以获取最新资讯。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft