VSCode Essentials Snippets

A collection of essentials snippets for Visual Studio Code.

Snippets are generated with 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 文章与代码索引矩阵中查看文章与项目源代码等更详细的目录导航信息。最后，你也可以关注微信公众号：『某熊的技术之路』以获取最新资讯。