Proposal [ Fluent RN / React Web ]- VS Code Snippets Extension

[rohanprasadofficial]

Goal

Improve the developer experience by providing fluent snippets to the developers.

• [x] I am willing to submit a PR

Motivation

While developing applications we have been evolving a lot on the developer experience and tooling and with code editors like VS Code which have capability of adding custom extension to ease the development process. Most of the developer use VS Code when developing Javascript/Typescript applications , be it React or React Native because it provides great experience and when writing Fluent code , custom snippets would help a lot in the process.

Code Snippets Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

Proposal

Creating an VS Code Extension as snippets which user can install and use snippets to generate and write code fast. These could be expanded through the FURN and Fluent Web repo both , as they serve JavaScript/Typescript code. This can be extended to other platforms as well but doesn't seem Android/iOS development much with VS Code over Android Studio or XCode.

An example below , here developer is writing the code and they just type furn-avatar (auto suggestion kicks in already :) )

https://user-images.githubusercontent.com/30728574/195035271-515dd0d6-b6b9-4f68-88cf-fc80ea92efc0.mov

Files

Files with the extension will be targeted : .ts .tsx .js .jsx

Where does this go ?

As we have already created few apps like fluent-tester, component-generator : we can add this extension here as well. apps/fluent-vs-code-extension

How it works ?

It's simple , i mean too simple - We just need to maintain a json file with key value pair packed a an extension , that's it.
Eg :

"FURN Avatar":{ 
        "prefix": "furn-avatar",
        "body": [
            "<Avatar",
            "\tactive=${1:'unset'}",
                "\tactiveAppearance=${2:'ring'}",
                "\tsize=${3:'24'}",
                "\tname=\"Satya Nadella\"",
                "\tshape=${4: 'square'}",
                "\taccessibilityLabel=\"Photo of Satya Nadella\"",
                "\tbadge={{ status: 'available', outOfOffice , accessibilityLabel: 'available' }}",
                "\timageUrl={satyaPhotoUrl}",
                "\tavatarColor={'brass'}",
            "/>"
        ],
        "description": "FURN Avatar Component"
    },

PS : already done a POC on my end with it , once the extension is structured well i can make PR.

[rohanprasadofficial]

cc : @behowell for Fluent Web

[Dewsk]

I really like this idea - Is there a convenient mechanism to protect the key-value pair definitions with some type checking to make sure none of these decay if there is an API change?

[rurikoaraki]

I really like this idea - Is there a convenient mechanism to protect the key-value pair definitions with some type checking to make sure none of these decay if there is an API change?

Yeah it'd be really neat if the JSON file could be codegened somehow so we don't need to manually maintain them

[rohanprasadofficial]

Yup , make sense. I will explore few options to use the types file and other approaches on how we can populate the props value maybe , we can always write script on the codegen the json values.