VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. Few VS Code extensions that will make you a more productive developer are shared here. The extensions provided here are mostly for web developers, but some general-purpose extensions will benefit everyone, even a beginner as well.
Prettier
Prettier is an opinionated code formatter that supports many languages. It removes all original styling* and ensures that all outputted code conforms to a consistent style.
Remember: In order to use prettier, in settings add a ✔ on the format on save
GitLens
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
Current File Path
This extension displays a current file path from absolute (root directory) or workspace highest directory in StatusBar by Unix style or Windows style.
Bracket Pair Colorizer
This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
It is a good tool for beginners. Many times in the early-stage most of the errors are due to missing brackets.
Emmet
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Live Share
Live share enables you to collaboratively edit and debug with others in real-time, regardless of the programming languages you are using or app types you are building. You can instantly and securely share your current project, start a joint debugging session, share terminal instances, forward localhost web apps, have voice calls, and more!
Unlike traditional pair programming, Visual Studio Live Share allows developers to work together while retaining their personal editor preferences, as well as having their own cursor.
ES7 React/Redux/GraphQL/React-Native snippets
This extension provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code. It gets you quickly up and running with the codes and components that you need simply just by typing few letters.
Tabnine
Tabnine studies publicly shared code and use A.I deep learning algorithms that provide us with the ability to predict your next coding needs and suggest one-click code completion.
Tabnine works with all major programming languages including JavaScript, Python, TypeScript, PHP, C/C++, HTML/CSS, Go, Java, Ruby, C#, Rust, SQL, Bash, Kotlin, Julia, Lua, OCaml, Perl, Haskell, and React.
Remember: Use Tabnine only when you have completely understood a language. It is supposed to save your development time not hinder your learning.
NOTE:
Some of these will require minor changes in settings, refer to documentation, blogs, google search, youtube videos on how to set this up.
If further guidance/help is needed reach out to me at edudeek@gmail.com
Top comments (0)