diff --git a/blog_images/10-vs-code-extensions-for-js-developers.png b/blog_images/10-vs-code-extensions-for-js-developers.png new file mode 100644 index 000000000..61d79ab8e Binary files /dev/null and b/blog_images/10-vs-code-extensions-for-js-developers.png differ diff --git a/blog_posts/10-vs-code-extensions-for-js-developers.md b/blog_posts/10-vs-code-extensions-for-js-developers.md new file mode 100644 index 000000000..7a3da82c4 --- /dev/null +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -0,0 +1,39 @@ +--- +title: 10 must-have VS Code extensions for JavaScript developers +type: list +tags: devtools,vscode,extension,javascript +authors: chalarangelo +cover: ../blog_images/10-vs-code-extensions-for-js-developers.png +--- + +Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer: + +1. ESLint +[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) turns the popular JavaScrpt linter into an extension of VS Code. It automatically reads your linting configuration, identifies problems and even fixes them for you, if you want. + +2. GitLens +[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search. + +3. Debugger for Chrome +[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features. + +4. Bracket Pair Colorizer 2 +[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) makes reading code faster as it makes matching brackets the same color. This extension for VS Code improves upon its predecessor by providing improved performance. + +5. Bookmarks +[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly. + +6. TODO Highlight +[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately. + +7. Live Server +[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to. + +8. REST Client +[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) allows you to send HTTP requests and view the responses directly in VS Code. This extension supports a wide range of formats and authorization and should work with most setups. + +9. One Dark Pro +[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis. + +10. Fira Code +[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it. diff --git a/snippet-template.md b/snippet-template.md index 053cf4fe3..7439f2d11 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -1,8 +1,9 @@ --- title: My amazing blog post type: post -tags: devtools -author: someauthor +tags: devtools,javascript +authors: someauthor,someotherauthor +cover: ../blog_images/my-image.png --- Write your blog post here.