1. Visual Studio Code
Visual Studio Code is a free source code editor made by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.
It is a very popular editor for web development. According to the Stack Overflow Developer Survey 2022, it is used by 74.5% of all developers.
You can personalize it with extensions. It is also possible to use it as a remote editor for your server.
2. Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
When you are working on a project, you have to use git to save your changes. You can also use it to share your code with other developers.
3. GitHub
GitHub is a web-based hosting service for version control using Git. It is mostly used for computer code. It offers all the distributed version control and source code management functionality of Git, as well as adding its own features.
With GitHub, you can easily upload your code and collaborate with other developers. With GitHub Issues and Pull Requests, you can also communicate with your team or other people worrying about the project. GitHub Pages allows you to publish your website.
Most Open Source projects are hosted on GitHub.
4. Node.js
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
It can be used for creating web servers, but it is most commonly used for building your frontend code.
5. Pnpm
Pnpm is a fast, disk space efficient package manager. It is a really fast replacement for NPM, the package manager which comes with Node.js.
Run npm i -g pnpm in your terminal to install (You must have Node.js installed)
6. Vite
Vite is a build tool that aims to provide a fast development experience for modern web projects. It bundles your code and makes it ready for production. Your code will be faster and better organized, when you use Vite.
Run pnpm create vite-app <project-name> in your terminal to create a new project (You must have pnpm installed)
7. TypeScript
TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
It will make your code more readable, easier to maintain and more robust. It will help you to avoid bugs and will improve your IDE’s autocomplete.
You can use it with Vite. Just turn on the TypeScript option when you create a new project.
8. React
React is a JavaScript library for building user interfaces. It is used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.
React or a similar library is needed in most frontend projects for handling the complexity of the user interface.
You can use it with Vite. Just select React as framework when you create a new project.
9. Vercel
Vercel is a cloud platform for static sites and Serverless Functions that you can deploy instantly. It is a really fast and easy way to deploy your website.
It has a really powerful free plan and a great integration with GitHub. When you push your code to GitHub, Vercel will automatically deploy your website.
This website is also hosted on Vercel.
10. Prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
It will make your code more readable and will help you to avoid unnecessary commits to git. Furthermore, it is used by most frontend developers.
Conclusion
These are the tools I use for all of my frontend projects. I hope you will find them useful. If you have any questions, feel free to ask them in the comments.
If you found this article useful, please consider sharing it on social
media or with your friends.
When you still have questions, feel free to comment below or contact me on
mastodon (link in footer).
Thanks for reading!