how to enable .Net 6.0 hot reload in Visual Studio Code?

 Hot Reload is a cool feature in .Net 6. we can easily enable this feature in Visual Studio Code with executing the following command 

dotnet watch run 

then we do not have to rerun the dotnet run to recompile the whole application to see the change immediatley.

 

Visual Studio Code Settings for fullstack devleopment

 here are some of settings from my own personal favoriate

  //custom settings

    "editor.mouseWheelZoom": true,

    "workbench.activityBar.visible": true,

    "workbench.editor.showTabs": false,

    "workbench.sideBar.locataion": "right",

    "editor.minimap.enabled": false,

    "zenMode.centerLayout": true,

    "workbench.iconTheme": "vscode-great-icons",

    "workbench.sideBar.location": "right"

best visual studio extension for react developer

 if you are a React developer, you definitely like to have the following extension install in your visual studio. these extensions will easily help you on React application development.

• Auto Rename Tag
• Bracket Pair Colorizer
• ES7 React/Redux/React-Native/JS snippets
• Highlight Matching Tag
• Indent-Raibow
• Tabnine AI Code Completion, autocomplete JavaScript, Python, TypeScript, PHP, Go, Java, Ruby, C/C++, HTML/CSS, C#, Rust, SQL, Bash, Kotlin, React, Swift, Scala, Sass, Perl, Objective C, Node JS, Matla
• Quokka
• Paste JSON as code

How to configure the development tools for React Development?

The React development tools provide a small number of configuration options, which will allow us to configure the environment variables for the specific project.

here is the steps  for setting for the configuration.

1. create a .env.local file in the project folder.

2. add options to the file. I only add three options to the setting file

REACT_EDITOR will specific the editor  for the feature that opens the code file when you click on a stack trace in the browser. it is very convenient for tracing the error from browser to the code editor.

PORT :specify the port for the project being host.

HTTPS: will have SSL enable if it is true.

REACT_EDITOR=code
PORT=3500

HTTPS=true

How to add Open Folder in Visual Studio Code?

It is quite convenient to have a Open Folder in Visual Studio Code in the Popup Context Menu
































we can simply right click the selected folder and click on it, then the visual studio code will be launch and project will be loade.

here is the link to show you how to do so

I copied the code from the below link in case the author remove the this blog content
(you will have to create a reg file and save it, then click on the reg file, it will automatically install and update)

Windows Registry Editor Version 5.00
; Open files
 [HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
    @="Edit with VS Code"
    "Icon"="C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe,0"
    [HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
    @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""
    ; This will make it appear when you right click ON a folder
    ; The "Icon" line can be removed if you don't want the icon to appear
    [HKEY_CLASSES_ROOT\Directory\shell\vscode]
    @="Open Folder as VS Code Project"
    "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"
    [HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
    @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""
    ; This will make it appear when you right click INSIDE a folder
    ; The "Icon" line can be removed if you don't want the icon to appear
    [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
    @="Open Folder as VS Code Project"
    "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"
    [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
    @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""


http://thisdavej.com/right-click-on-windows-folder-and-open-with-visual-studio-code/

TypeScript should be main programming Language of the future of Office 365 Development

the main reason to support this claim

one, we use typescript to develpment client solution with sharepont page framework development.

https://github.com/SharePoint/sp-dev-docs/wiki


two we use typescript in to bulid custom PowerBI solution to visualize the data. you can use typescript to bulid your custom visual PowerBI from scratch.

https://powerbi.microsoft.com/en-us/documentation/powerbi-custom-visuals/

How to add a new web part to the existing sharepoint page framewrok project?

it is a straight forward task to add new web part to the current working project.


first, launch the CMD window, and go to your current working project folder.



second. run yo @microsoft/sharepoint and create a new second web part, named secondWebPart.



third run gulp serve to launch the workbench page and clicked the plus sign to add new web part the page. the secondApp web part is shown next to the httpsApp web part.













so we can have multiple web parts under one project.

Quick Tips on Development with Sharepoint Page Framework Preview using Visual Code

1. Generated the Sharepoint Page project under the Sharepoint Page Framework

  yo @microsoft/sharepoint

2. Debug the Project with Gulp run time

   Gulp Serve

3. Reference external reources manually

•    go to the config folder, 
•    open the config.json file
•   under the externals section add one entry like  a reference to jquery in the CDN  with key "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
• use Import to add the reference the library in WebPart.ts  type script object 

         Import 'jquery'



4. Debug the project with Chrome in Visual Code

•      installed the Debugger for Chrome extension
•      run Gulp Serve to start the work process
•    select Debug from View Menu
•   click on the Start Button from Debug to launch the Chrome Browser  

 



5.  Load local javascript file. which is located at src\webparts\YourProjectNameFolder
   
open the type script object, add the following line to include the javascript in the load

 public render(): void {
      require('./yourJavascriptFileNameWithoutFileExtension');
  }