--- title: Best DevTools posts — June 2022 | daily.dev description: The most upvoted DevTools posts from June 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/devtools/best-of/2022/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/devtools/best-of/2022/06 og:type: website og:site_name: daily.dev og:title: Best DevTools posts — June 2022 | daily.dev og:description: The most upvoted DevTools posts from June 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of DevTools — June 2022 1. 1 [](https://daily.dev/posts/vslook---customize-the-look-of-your-vscode--ei9rwvp87 "VSLook - Customize the look of your VSCode 😎") Article Product Hunt · 4y VSLook - Customize the look of your VSCode 😎 217 5 2. 2 [](https://daily.dev/posts/tanstack---high-quality-open-source-software-for-web-developers-mj1oid2i2 "TanStack - High-quality open-source software for web developers") Article Product Hunt · 4y TanStack - High-quality open-source software for web developers This is TanStack's first launch. Made by. Software Engineering Developer Tools. Featured on June 3rd, 2022 .is not rated yet . This is Tan Stack's firstLaunch. This is a beta version of the tool. It is not yet rated. It's not yet available to the public. 148 3 3. 3 [](https://daily.dev/posts/preline-ui---open-source-tailwind-css-ui-components-62xdahtx2 "Preline UI - Open source Tailwind CSS UI components") Article Product Hunt · 4y Preline UI - Open source Tailwind CSS UI components This is Preline UI's first launch. Made byand. Featured on June 8th, 2022 .is not rated yet . This is preline.com's first ever app. It's available on iOS, Android, and Windows. It is free to download and use. 130 10 4. 4 [](https://daily.dev/posts/tailwind-dx---a-devtools-extension-enabling-smart-tools-for-tailwind-css-dkk4pb9wd "Tailwind DX - A DevTools extension enabling smart tools for Tailwind CSS") Article Product Hunt · 4y Tailwind DX - A DevTools extension enabling smart tools for Tailwind CSS This is Tailwind DX's first launch. Made by. Featured on June 18th, 2022 .is not rated yet. Was hunted byin Developer Tools. Was made by in Developer Tools . Made by in developer tools. It is not ratedyet. It was made byin developer Tools. 104 7 5. 5 [](https://daily.dev/posts/json-hero-chrome-extension---a-beautiful-json-explorer-packed-with-features-kukr2rbzi "JSON Hero Chrome extension - A beautiful JSON explorer packed with features") Article Product Hunt · 4y JSON Hero Chrome extension - A beautiful JSON explorer packed with features The new JSON Hero Chrome extension lets you easily use JSON Hero from Chrome for plain JSON blobs. Or extract and open Firestore documents, Github files, and Open Graph metadata. And since JSON Hero is open source, you can even point to your own instance of the service. 86 5 6. 6 [](https://daily.dev/posts/tailwind-cheat-sheet---your-easy-access-to-tailwind-s-classes-73znln7nu "Tailwind Cheat Sheet - Your easy access to Tailwind's classes") Article Product Hunt · 4y Tailwind Cheat Sheet - Your easy access to Tailwind's classes Chrome extension to easily access Tailwind's classes. The extension provides following features: Easily accessible tailwind classes. Click on the class to copy the same to clipboard. Search for classes using the search function in Tailwind. Open Source. Back to Mail Online home. back to the page you came from. 85 4 7. 7 [](https://daily.dev/posts/how-to-use-chrome-as-a-code-editor-and-debugger-fciz4ye05 "How to use Chrome as a Code Editor and Debugger") Article asayer · 4y How to use Chrome as a Code Editor and Debugger Chrome is a great browser to use for development. It has a number of tools that can be used to improve your code. The following sections describe how to use Chrome’s editing and debugging facilities. We also show you how to make changes to your code that are not permanent. 78 2 8. 8 [](https://daily.dev/posts/dendron-v100---open-source-note-taking-for-developers-2r6wlojjw "Dendron v100 - Open source note taking for developers") Article Product Hunt · 4y Dendron v100 - Open source note taking for developers 74 4 9. 9 [](https://daily.dev/posts/capacitor-s-ionic-s-visual-studio-code-extension-re3ck3jod "Capacitor ❤️’s Ionic’s Visual Studio Code Extension") Article Ionic Blog · 4y Capacitor ❤️’s Ionic’s Visual Studio Code Extension The Ionic VS Code extension is built right into the Ionic Framework. It can be used to migrate from Cordova to Capacitor. You can use the extension to generate icons and splash screens for your apps. The extension is free to download and use on any Ionic or Cordova app. 50 2 10. 10 [](https://daily.dev/posts/visual-studio-code-may-2022-nqxztexi0 "Visual Studio Code May 2022") Article Visual Studio Code · 4y Visual Studio Code May 2022 May 2022 (version 1.68) is the latest version of Visual Studio Code. There are many updates in this version that we hope you'll like. View errors and warnings as a table to quickly filter on their source. Git branch protection is now available right inside VS Code. 48 3 11. 11 [](https://daily.dev/posts/untitled-ui-icons-1-100-free-icons---1-100-free-essential-figma-icons-for-modern-ui-design-gd3hto8f8 "Untitled UI Icons — 1,100+ FREE icons - 1,100+ FREE essential Figma icons for modern UI design") Article Product Hunt · 4y Untitled UI Icons — 1,100+ FREE icons - 1,100+ FREE essential Figma icons for modern UI design This is Untitled UI Icons — 1,100+ FREE icons's first launch. Made by. Design Tools Developer Tools. Featured on June 2nd, 2022 .is not rated yet. Unrated icons can be downloaded for free from the App Store and Google Play. 44 3 12. 12 [](https://daily.dev/posts/sunsetting-atom-jqkcyppsv "Sunsetting Atom") Article GitHub Blog · 4y Sunsetting Atom GitHub is sunsetting Atom and will archive all projects under the organization on December 15, 2022\. Atom has not had significant feature development for the past several years. GitHub will continue to inform Atom users of the sunset in the product and on atom.io. 29 5 13. 13 [](https://daily.dev/posts/5-must-have-jetbrains-plugins-for-remote-developers-alxvdowou "5 must-have JetBrains plugins for remote developers") Article DevDojo · 4y 5 must-have JetBrains plugins for remote developers The best JetBrains plugins for remote developers. Code With Me is a collaborative coding and pair programming service. WakaTime shows how long each team member coded individually on each project. SonarLinter is a static code analysis tool that will help you write efficient, safe and quality code. 29 4 14. 14 [](https://daily.dev/posts/github-axes-atom-text-editor-recommends-vscode-instead-cyvgdglqu "GitHub Axes Atom Text Editor, Recommends VSCode Instead") Article omg! ubuntu! · 4y GitHub Axes Atom Text Editor, Recommends VSCode Instead GitHub’s Atom text editor is being discontinued. GitHub says it has decided to ‘retire Atom in order to further our commitment to bringing fast and reliable software development to the cloud’ Microsoft has its own Electron-based coding-come-text-editor in VSCode. 24 4 15. 15 [](https://daily.dev/posts/7-vim-editors-for-better-productivity-in-2022-xgnun7rir "7 Vim Editors for Better Productivity in 2022") Article Geekflare · 4y 7 Vim Editors for Better Productivity in 2022 Vim stands for “Vi Improved”, which means it’s a revamped version of the Vi text editor. Vim has a huge and active user base that is continually releasing new modules, add-ons, and text editor improvements. There are plenty of Vim-inspired editors available on the internet. 22 1 16. 16 [](https://daily.dev/posts/jetbrains-plugins-to-upgrade-the-built-in-git-support-to-the-next-level--auurfzkyb "JetBrains plugins to upgrade the built-in Git support to the next level!") Article DevDojo · 4y JetBrains plugins to upgrade the built-in Git support to the next level! The Git plugin that comes bundled with all JetBrains IDEs is actually quite impressive. It's a full blown Git client in its own right with almost all the features of a standalone client such as SourceTree, Tower or GitKraken. There are even more features you can enhance your IDE’s Git support with - allow me to present to you 5 plugins that build on top of Git. 21 17. 17 [](https://daily.dev/posts/jetbrains-fleet-the-future-of-ides--slr2wvqun "JetBrains Fleet: The future of IDEs?") Article InfoWorld · 4y JetBrains Fleet: The future of IDEs? JetBrains Fleet is a new multi-language programming editor and IDE. It represents JetBrains’ attempt to rebuild the entire integrated development environment from scratch. For Java, Fleet uses the IntelliJ code-processing engine. For some other languages, Fleet using a language server, à la Visual Studio Code. 19 3 18. 18 [](https://daily.dev/posts/devbox---a-ui-for-local-storage-vnqble8xz "Devbox - A UI for local storage") Article Product Hunt · 4y Devbox - A UI for local storage 19 2 19. 19 [](https://daily.dev/posts/vs-code-frameworks-build-tools-react-native-qbz0qky8j "VS Code, Frameworks, Build Tools, React Native") Article Web Tools Weekly · 4y VS Code, Frameworks, Build Tools, React Native Many of you use Visual Studio Code (VS Code) as your primary code editor. I decided that VS Code would be the perfect topic to have its own newsletter: VSCode.Email. I've already sent out 8 issues so far that include: A quick tip in the intro on using and customizing VS Code. A short list of VS Code tools and extensions. A brief list of other IDEs and editors. 16 20. 20 [](https://daily.dev/posts/gitlive-s-tool-window-just-got-a-major-upgrade-in-phpstorm-ihzgm12k4 "GitLive's Tool Window Just Got a Major Upgrade in PhpStorm") Article Hashnode · 4y GitLive's Tool Window Just Got a Major Upgrade in PhpStorm With the new tool window, you can now see all work in progress across your entire team in a single view. It's like a branch-based version of github.com/pulls but updated in real-time directly inside PhpStorm. The tool window shows every branch ahead of the default branch for every repository in your organization, grouped by the author. 16 1 21. 21 [](https://daily.dev/posts/i-built-a-tinybird-syntax-highlighter-for-vscode-o28aabthv "I built a Tinybird syntax highlighter for VSCode") Article Tinybird · 4y I built a Tinybird syntax highlighter for VSCode Tinybird data projects are meant to be managed like code, with versioning, CI/CD, tests, etc. Why shouldn’t they have their own syntax highlighter? So, rather than wait around, I did what any Tinybird dev would have done: I built it. If you use VSCode, you can install it here. 15 1 22. 22 [](https://daily.dev/posts/how-to-split-vim-workspace-vertically-or-horizontally-iokbgu3wa "How to Split Vim Workspace Vertically or Horizontally") Article Linux Handbook · 4y How to Split Vim Workspace Vertically or Horizontally Vim allows you to have multiple horizontal or vertical splits in your active workspace. There are two ways you can split a Vim workspace - horizontally and/or vertically. You can know which window is active based on which window has your cursor. Vim creates splits with a similar width/height. 15 2 23. 23 [](https://daily.dev/posts/how-to-use-vim-for-beginners-anmucgo4r "How to Use Vim for Beginners") Article SelectFrom · 4y How to Use Vim for Beginners Vim or Vi IMproved is an open-source text editor. It was initially developed for Unix. What makes Vim different from other typical text editors is its interface. In this short tutorial, I will try to cover navigating the interface, operating on files, basic editing commands and using Vim in VSCode. 12 1 [See all DevTools archives](/tags/devtools/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/devtools/best-of/2022/06#page","url":"https://daily.dev/tags/devtools/best-of/2022/06","name":"Best DevTools Posts — June 2022","description":"The most upvoted DevTools posts from June 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/devtools/best-of/2022/06#items","numberOfItems":23,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/vslook---customize-the-look-of-your-vscode--ei9rwvp87","name":"VSLook - Customize the look of your VSCode 😎"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/tanstack---high-quality-open-source-software-for-web-developers-mj1oid2i2","name":"TanStack - High-quality open-source software for web developers"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/preline-ui---open-source-tailwind-css-ui-components-62xdahtx2","name":"Preline UI - Open source Tailwind CSS UI components"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/tailwind-dx---a-devtools-extension-enabling-smart-tools-for-tailwind-css-dkk4pb9wd","name":"Tailwind DX - A DevTools extension enabling smart tools for Tailwind CSS"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/json-hero-chrome-extension---a-beautiful-json-explorer-packed-with-features-kukr2rbzi","name":"JSON Hero Chrome extension - A beautiful JSON explorer packed with features"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/tailwind-cheat-sheet---your-easy-access-to-tailwind-s-classes-73znln7nu","name":"Tailwind Cheat Sheet - Your easy access to Tailwind's classes"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-use-chrome-as-a-code-editor-and-debugger-fciz4ye05","name":"How to use Chrome as a Code Editor and Debugger"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/dendron-v100---open-source-note-taking-for-developers-2r6wlojjw","name":"Dendron v100 - Open source note taking for developers"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/capacitor-s-ionic-s-visual-studio-code-extension-re3ck3jod","name":"Capacitor ❤️’s Ionic’s Visual Studio Code Extension"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/visual-studio-code-may-2022-nqxztexi0","name":"Visual Studio Code May 2022"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/untitled-ui-icons-1-100-free-icons---1-100-free-essential-figma-icons-for-modern-ui-design-gd3hto8f8","name":"Untitled UI Icons — 1,100+ FREE icons - 1,100+ FREE essential Figma icons for modern UI design"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/sunsetting-atom-jqkcyppsv","name":"Sunsetting Atom"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/5-must-have-jetbrains-plugins-for-remote-developers-alxvdowou","name":"5 must-have JetBrains plugins for remote developers"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/github-axes-atom-text-editor-recommends-vscode-instead-cyvgdglqu","name":"GitHub Axes Atom Text Editor, Recommends VSCode Instead"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/7-vim-editors-for-better-productivity-in-2022-xgnun7rir","name":"7 Vim Editors for Better Productivity in 2022"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/jetbrains-plugins-to-upgrade-the-built-in-git-support-to-the-next-level--auurfzkyb","name":"JetBrains plugins to upgrade the built-in Git support to the next level!"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/jetbrains-fleet-the-future-of-ides--slr2wvqun","name":"JetBrains Fleet: The future of IDEs?"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/devbox---a-ui-for-local-storage-vnqble8xz","name":"Devbox - A UI for local storage"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/vs-code-frameworks-build-tools-react-native-qbz0qky8j","name":"VS Code, Frameworks, Build Tools, React Native"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/gitlive-s-tool-window-just-got-a-major-upgrade-in-phpstorm-ihzgm12k4","name":"GitLive's Tool Window Just Got a Major Upgrade in PhpStorm"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/i-built-a-tinybird-syntax-highlighter-for-vscode-o28aabthv","name":"I built a Tinybird syntax highlighter for VSCode"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-split-vim-workspace-vertically-or-horizontally-iokbgu3wa","name":"How to Split Vim Workspace Vertically or Horizontally"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-use-vim-for-beginners-anmucgo4r","name":"How to Use Vim for Beginners"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"DevTools","item":"https://daily.dev/tags/devtools"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/devtools/best-of"},{"@type":"ListItem","position":5,"name":"June 2022"}]}]} ```