Giter VIP home page Giter VIP logo

manuelgil / extension-starter-kit Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 185 KB

This is a starter kit for creating a new extension for Visual Studio Code. It includes a basic structure and configuration to start developing a new extension.

Home Page: https://vsxpert.com/

License: MIT License

TypeScript 91.09% Shell 0.16% JavaScript 5.21% CSS 3.54%
extension folder-structure starter starter-kit starter-project starter-template structure vscode vscode-extension vscode-plugin boilerplate boilerplate-template boilerplates develop template template-plugin template-project template-repository

extension-starter-kit's Introduction

VS Code Extension - Starter Kit

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating GitHub Repo stars GitHub license

This is a starter kit for creating a new extension for Visual Studio Code. It includes a basic structure and configuration to start developing a new extension.

Table of Contents

Features

  • Basic configuration for the development environment
    • .editorconfig - Editor configuration
    • .eslintignore - ESLint ignore file
    • .eslintrc.json - ESLint configuration file
    • .linstagedrc - Lint-staged configuration file
    • .nvmrc - Node version manager configuration file
    • .prettierrc - Prettier configuration file
    • commitlint.config.js - Commit lint configuration file
    • package.json - Package configuration to manage dependencies
    • tsconfig.json - TypeScript configuration to compile the source code
  • Basic structure for a new extension
    • app - Source code to develop the extension
      • configs - Configuration files and constants
      • controllers - Controllers to listen to commands
      • helpers - Helper functions with common tasks
      • models - Models to represent data
      • providers - Providers to provide data
      • services - Services to provide functionality
    • test - Test files to test the extension
  • JSON Schema validations for workspace settings
    • settings.schema.json - JSON schema for the workspace settings
  • Helper functions to get started with the extension
    • command.helper.ts - Helper functions to create a new command
    • data.helper.ts - Helper functions to create a new data provider
    • dialog.helper.ts - Helper functions to create a new dialog
    • filesystem.helper.ts - Helper functions to create a new file system provider
    • inflection.helper.ts - Helper functions to create a new inflection provider
    • number.helper.ts - Helper functions to create a new number provider
    • security.helper.ts - Helper functions to create a new security provider
    • text.helper.ts - Helper functions to create a new text provider
  • Basic commands to get started with the extension
    • extension.ts - Main file to run the extension
    • example.controller.ts - Example controller with basic commands
  • Basic views to get started with the extension
    • providers - Providers for the extension views
      • feedback.provider.ts - Provides feedback to the user
      • listFiles.provider.ts - Provides a list of files from the workspace
      • color.provider.ts - Provides a color picker to the user
  • Basic OpenAI integration to get started with the extension
    • openai - OpenAI integration and chat provider
      • openai.service.ts - OpenAI service to interact with the API
      • chat.provider.ts - Provides chat functionality to the user

Prerequisites

You need to have node and npm installed on your system to run the examples. It is recommended to use the node version used for VS Code development itself which is documented here

Getting Started

To get started with the extension, follow these steps:

  1. Clone the repository

    git clone
    cd extension-starter-kit
    npm install
    code .
  2. Press F5 to open a new instance of Visual Studio Code with the extension running in debug mode

  3. Open the command palette and run the My Extension: Hello World command

  4. The extension will display a message in the output window

For more information, see the official documentation

Customization

To customize the extension, follow these steps:

  1. Update multiple instances of the following items in bulk:

    • extensionIdentifier - Replace with your extension identifier, e.g. fileManager
    • extension-starter-kit - Replace with your extension name, e.g. vscode-file-manager
    • My Extension - Replace with your extension display name, e.g. VS Code File Manager
    • githubUsername - Replace with your GitHub githubUsername, e.g. ManuelGil
    • extensionPublisher - Replace with your extension publisher, e.g. imgildev
  2. Change the LICENSE file with your extension information

  3. Remove the unnecessary files and folders

  4. Add the necessary files and folders

  5. Update the src/app/configs/constants.config.ts and src/app/configs/extension.config.ts file with your extension information

  6. Update the src/app/controllers/feedback.controller.ts file with your extension information

  7. Update the src/extension.ts file with your extension information

  8. Update the settings.schema.json file with your extension information

  9. Update the package.json file with your extension information

  10. Update the README.md file with your extension information

For more information, see the official documentation

Running the documentation

To run the documentation, execute the following command in the terminal:

npm run compodoc

This will generate the documentation in the compodoc folder.

For more information, see the official documentation

Building the extension

To build the extension, execute the following command in the terminal:

vsce package

This will create a .vsix file in the root of the project.

For more information, see the official documentation

Publishing the extension

To publish the extension, execute the following command in the terminal:

vsce publish

This will open a new instance of Visual Studio Code with the extension running in debug mode.

For more information, see the official documentation

Follow Me

If you enjoy using Auto Barrel, consider following me for updates on this and future projects:

GitHub followers X (formerly Twitter) Follow

VSXpert Template

This extension was created using VSXpert, a template that helps you create Visual Studio Code extensions with ease. VSXpert provides a simple and easy-to-use structure to get you started quickly.

Contributing

Auto Barrel is open-source software, and we welcome contributions from the community. If you'd like to contribute, please fork the GitHub repository and submit a pull request with your changes.

Before contributing, please read our Contribution Guidelines for instructions on coding standards, testing, and more.

Code of Conduct

We are committed to providing a friendly, safe, and welcoming environment for all, regardless of gender, sexual orientation, disability, ethnicity, religion, or similar personal characteristic. Please review our Code of Conduct before participating in our community.

Changelog

For a complete list of changes, see the CHANGELOG.md

Authors

See also the list of contributors who participated in this project.

License

This extension is licensed under the MIT License. See the MIT License for details.

extension-starter-kit's People

Contributors

manuelgil avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.