Let's see some best VS code extensions for web development to Improve your Productivity.
Step to install vs code extension :
Open VS Code Quick Open (Ctrl+P) -> Paste the ${vs-code-cmd} and press enter.
1)Data Preview
- Data Preview helps with Data viewing, slicing, charting, dicing, and exporting.
- Data Preview supports JSON, YAML, Apache Arrow, Avro, Parquet & Excel data files.
- Data Preview supports Data Grid Sorting & Filtering.
- We can preview data in Basic Charts like bar charts, line, area, scatter, OHCL Chart, and more.
- Data preview support multiple Spreadsheets Data Preview for excel files.
- We can export the data as JSON, YAML, Apache Arrow, Avro, Parquet, etc.
Demo :
Installation & Docs :
Installation cmd : ext install RandomFractalsInc.vscode-data-preview
Extension Link: https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview
GitHub Repo : https://github.com/RandomFractals/vscode-data-preview
2)Draw.io Integration
- Draw.io Integration helps create flowcharts, process diagrams, org charts, and more.
- Draw.io Integration is an unofficial version of Draw.io or diagrams.
- Draw.io Integration allows to edit .drawio, .dio, .drawio.svg or .drawio.png files.
- Draw.io Integration supports offline.
- Mulitple Draw.io themes are available. We can use them.
- Draw.io Integration support collaboratively edits a diagram with others by using live share extension.
- Draw.io Integrate Code Link Feature
Demo :
Installation & Docs :
Installation cmd : ext install hediet.vscode-drawio
Extension Link: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
GitHub Repo :https://github.com/hediet/vscode-drawio
3)Swagger Viewer
- Swagger Viewer helps to preview your swagger file inside VS Code.
- Swagger Viewer supports both Swagger 2.0 and OpenAPI.
- Swagger Viewer supports both JSON and YAML files.
- Swagger Viewer supports the live-reload ( when your change file. It automatically updates swagger preview).
- To run swagger viewer in external browser Shift + Alt + P
Demo :
Installation & Docs :
Installation cmd : ext install Arjun.swagger-viewer
Extension Link: https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer
GitHub Repo : https://github.com/arjun-g/vs-swagger-viewer
4)Diff
- Diff is a VS Code extension that helps to compare the two different files.
Demo :
Installation & Docs :
Installation cmd : ext install fabiospampinato.vscode-diff
Extension Link: https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-diff
GitHub Repo : https://github.com/fabiospampinato/vscode-diff
5)Live HTML Previewer
- Live HTML Previewer helps to run your HTML files inside VS Code.
- Live HTML Previewer removes the context of switching between VS Code and Browser.
- Live HTML Previewer does not support javascript.
- Live HTML Previewer use-full for developing UI
Demo :
Installation & Docs :
Installation cmd : ext install hdg.live-html-previewer
Extension Link: https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer
GitHub Repo : https://github.com/HarshdeepGupta/live-html-preview
I think this information is helpful to you.
Thanks for reading - Don't Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
Best Visual Studio Code Extensions - Part 8
Best Visual Studio Code Extensions - Part 7
Best Visual Studio Code Extensions - Part 5
Best Visual Studio Code Extensions - Part 4
Best Visual Studio Code Extensions - Part 3
Best Visual Studio Code Extensions - Part 2
Best Visual Studio Code Extensions - Part 1
Best IDE / Editor Web Development
Best 5 Angular UI component library
Why JavaScript most popular ?
👌
ReplyDeleteSuper 💫
ReplyDelete👏👏
ReplyDelete👏👏👏👏👏
ReplyDelete