I tried 10 code editors

Fireship · Beginner ·💻 AI-Assisted Coding ·3y ago

Key Takeaways

This video explores the top 10 code editors for programmers, including simple text editors like vim and IDEs like Visual Studio

Full Transcript

at exactly 3 45 pm on september 9 1947 grace hopper discovered the first official computer bug a real-life moth that found its way onto the number 70 relay of the harvard mark ii aiken relay calculator today computer programmers create their own bugs but that wouldn't be possible without the help of a modern code editor i wanted to find out which code editor is best in the 2020s so i tried to write a basic program with 10 different text editors and ides we'll look at everything from basic command line editors to the most advanced cloud-based integrated development environments we'll talk about the pros and cons of each option and look at how these tools have evolved over the last 50 years think about this things like undo find and replace copy and paste are all commonplace but back in the 1960s they were revolutionary new features made possible by the computer screen and visual terminal eventually they would replace punch cards where one wrong keystroke meant you had to start over from scratch the first editor we'll look at is vi which was written by bill joy and released in 1976. it's still a standard tool on most linux distros to this day so to use it all you have to do is type vi into the terminal what's most interesting is that it's a keyboard based editor the mouse doesn't do anything useful that's because the mouse didn't go mainstream until the apple macintosh came out in 1984 january 24th apple computer will introduce macintosh and you'll see why 1984 won't be like 1984. but do you really need a mouse to code efficiently in vi if you start typing nothing will happen initially that's because to write some text you'll need to enter insert mode by hitting the i key vi is a modal editor which means the keys on your keyboard do different things based on the mode you're currently in in insert mode we can add some actual code to the document then hit escape to go back to command mode and use the right quick command to save the file to the disk when you get used to it it can actually be very fast to edit code this way for example to delete an entire line of code i can hit double d or 3 d to delete three lines at once without needing to highlight the entire thing with my mouse the hard part is memorizing all the tricks to get things done efficiently vi is nice and simple but there are a lot of features missing like syntax highlighting or the ability to implement plugins to extend its functionality around the same time period another editor was being created by guy steele at mit called emacs which stands for editor macros like vi it's primarily a keyboard based editor but it's highly extensible and integrates additional features like debuggers a file manager terminal emulator music player and anything else you can imagine it's not just a text editor but a full-blown integrated development environment that means it can do a lot more but it takes a lot more time to configure on your part initially emacs feels a little more user-friendly than something like vi we can pull up a menu that allows us to navigate the different commands and it's a non-modal editor which means we don't have to understand what a bunch of different modes do before using it however you will need to use a bunch of modifier keys when typing which could result in a gruesome injury known as emax pinky at the same time it's far from simple and has over 10 000 built-in commands that can be used to create macros that customize the experience and automate work now due to the philosophical differences between emacs and vi and the tribal nature of developers two distinct factions have emerged the cult of vi and the church of emacs founded by high priest richard stallman they've been waging war for decades now and people take it very seriously when you go to google to search for vi it auto-corrects to emacs or if you search for emacs it auto corrects to bi in modern times though vi based editors are much more popular and that brings us to editor number three vim or vi improved on the surface vim feels almost identical to vi because it's a superset of its core functionality however it's much more popular with developers using it as their daily editor because it provides a ton of other essential features like syntax highlighting multi-level undo and plugins to customize and extend its functionality it's more developer friendly and you can enter the vim tutor command to learn the basics right now it's kind of annoying at first but once you have the basics down you'll find that it keeps your fingers on the home row of the keyboard which will gradually improve your coding speed with a lot of practice but it also does things like code completion in a regular ide so it's not just all about typing faster as you start to learn it you'll see a lot of people make jokes about not being able to get out of them like developers in the 60s were writing their own compilers but developers today can't even exit them without a soy latte and stack overflow i don't want to beat off a dead horse here so i'm not going to make one of those jokes in this video vim was created in 1991 making it older than many viewers on this channel but not everybody has been happy with its evolution and that brings us to a popular fork called neovim that came out in 2015. first of all it's faster than vim which is always a plus but one of the ways you customize vim is with a scripting language called vim script the problem is that vimscript sucks according to this one guy on hacker news neovim has addressed this problem by embedding lua as its scripting language an extremely fast and proven language that's also used by platforms like roblox that's cool and all but what if you don't want to spend years mastering the art of vim another good option is nano which is part of the gnu project and came out in 1999. it's also a keyboard based editor that you can launch from the command line and unlike vim it doesn't require modes and has a far more gentle learning curve when you open it you'll notice all the important keybindings are right here at the bottom most importantly it tells you control x is how you exit so you don't have to unplug your computer like you would with vim [Music] it lacks the features you would need to use it as a full-blown ide but is still a great option available on most machines to quickly edit a file from the terminal at this point we've looked at editors that mostly rely on a text user interface but the majority of developers today use editors that have a graphical user interface one of the earliest programs was notepad on windows which came out in 1983. in fact the program itself was designed to commercialize the mouse for ms-dos a more modern version for programmers is notepad plus plus instead of using the keyboard to place the cursor where you want to edit you simply click there with the mouse or if you want to highlight you click hold and drag sounds obvious but in the early 80s this was a feature that felt like going into the metaverse today notepad plus plus is not developed by microsoft but it does feel very much like you're using microsoft excel for writing code it supports macros and plugins so you can definitely use it as your primary development environment next up we've got a proprietary ide that's very near and dear to my heart adobe dreamweaver i haven't actually used it in years but it's the tool that got me started in web development it used to be extremely popular but not so much anymore today it's actually a very beautiful tool and looks really nice while you're editing code but at the same time feels overly slow and complex like pretty much all adobe software it's also pretty antiquated with first class support for jquery and bootstrap that's pretty sad for a commercial product and if you're paying to use dreamweaver in 2022 stop it get some help mcdonald's wants you to give yourself a chance there are far superior free options in the modern world you've got tools like sublime text brackets atom which was killed recently but the most popular lightweight editor by far is visual studio code it has a graphical user interface making it very approachable for beginners but also has a ton of built-in shortcuts that allow you to do things quickly kind of like text-based editors i actually have a full course on fireship i o that breaks down all my favorite techniques for increasing productivity with vs code you can support my work by enrolling in that course or upgrading to a pro membership young people from all over the globe are joining up to fight for the future i'm doing my part but an even bigger benefit of vs code is the fact that it's popular and has a huge extension ecosystem that means if you're using some kind of tooling that can benefit from additional support like tailwind for example you're pretty much guaranteed to have a vs code extension which may not be the case on other editors the application itself is open source and built with electron which is based on web technologies making it easy to extend for web developers although it does have a reputation of being a memory hog the editing experience can be very minimal if you'd like and i usually go into zen mode when writing code myself but at the same time you can make it a full-blown integrated development environment it can edit files remotely on github connect to your resources in the cloud work with docker containers and so on that's great and all but for many platforms vs code may not be the optimal choice if you're building ios apps you'll likely want to use apple's integrated development environment xcode or for android apps google's android studio or as we'll look at now visual studio for microsoft's.net framework this is a true integrated development environment which is a comprehensive set of tools for developing certain types of apps like in this case desktop web and server-side apps with dot-net it provides powerful code completion refactoring and debugging tools for its core languages like c-plus plus and c-sharp it may feel overwhelming at first because there's all kinds of tools and wizards that you're not going to know how to use until you're balls deep in a project when you get that deep you'll be really glad to have tools like that because otherwise you'll likely be dealing with some half-assed open source extension if you're lucky the bottom line is that ides can be awesome when you're committed to a specific platform and that brings us to number 10 jetbrains a family of editors and ides that many consider the gold standard for writing code at a professional level it's most well known for intellij for java development but in this video we'll look at webstorm for web development although i use vs code today i've been a happy jetbrains customer in the past but that happiness comes at a cost of about 69 per year you can evaluate it with a free trial and when you first open up webstorm you'll notice things feel more like a true ide as opposed to a minimal text editor it has a wizard to guide you through the setup of a new project although this does feel pretty outdated with options like meteor cordova and angularjs version 1 which was retired a few months ago if you're still using angularjs version 1 you're only cheating yourself out of the chance to find out who you really can be once you're in the project you should have pretty much everything you need to hit the ground running there's less of a need to install a bunch of plugins one thing i really appreciate about webstorm is its code refactoring for example in a react app we can click on a ui element and easily extract it into its own named component we can also do that in vs code with extensions but it just feels way more reliable in webstorm in webstorm most of the features feel a little more polished and reliable which is what you would expect from a paid product what's also interesting is that jetbrains is coming out with a new editor called fleet which will be more like a competitor to vs code currently it's on a close preview so i haven't been able to try it but make sure you're subscribed because as soon as it comes out i'll drop a video we just looked at 10 different ways to edit code on your machine but i want to finish up by saying that we're entering an age where code editors may become entirely cloud-based like you can run vs code in your browser right now by going to vscode.dev then you've got github code spaces where you can edit your code on overpowered cloud hardware then you've got tools like stack blitz that use webassembly to run full stack web applications in the browser the future looks interesting but the most important takeaway from this video is don't do drugs thanks for watching and i will see you in the next one

Original Description

The top 10 code editors for programmers in 2022. We start by exploring simple text editors like vim, then show the evolution to IDEs like Visual Studio. #programming #code #top10 🔗 Resources VS Code course https://fireship.io/courses/vscode-tricks Editor war https://en.wikipedia.org/wiki/Editor_war VS Code in 100 Seconds https://youtu.be/KMxo3T_MTvY vim in 100 Seconds https://youtu.be/-txKSRn0qeA 🔥 Get More Content - Upgrade to PRO Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment. 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - How do you choose a code editor? - What is the best code editor? - vim vs emacs - VS Code vs vim - the editor wars - tools required to learn to code
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Fireship · Fireship · 0 of 60

← Previous Next →
1 Angular 4 Development and Production Environments with Firebase
Angular 4 Development and Production Environments with Firebase
Fireship
2 OAuth with Angular and Firebase Tutorial
OAuth with Angular and Firebase Tutorial
Fireship
3 Anonymous Authentication with Angular and Firebase - Lazy Registration
Anonymous Authentication with Angular and Firebase - Lazy Registration
Fireship
4 Angular Router Guards for Firebase Users
Angular Router Guards for Firebase Users
Fireship
5 Angular Firebase CRUD App with NoSQL Database Tutorial
Angular Firebase CRUD App with NoSQL Database Tutorial
Fireship
6 Upload Files from Angular to Firebase Storage
Upload Files from Angular to Firebase Storage
Fireship
7 How to Deploy an Angular App to Firebase Hosting
How to Deploy an Angular App to Firebase Hosting
Fireship
8 Sharing Data between Components in Angular
Sharing Data between Components in Angular
Fireship
9 Loading Spinners for Asynchronous Firebase Data
Loading Spinners for Asynchronous Firebase Data
Fireship
10 Angular 4 Transactional Email with Google Firebase Cloud Functions
Angular 4 Transactional Email with Google Firebase Cloud Functions
Fireship
11 Firebase Database Rules Tutorial
Firebase Database Rules Tutorial
Fireship
12 Autocomplete Search with Angular4 and Firebase
Autocomplete Search with Angular4 and Firebase
Fireship
13 Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Fireship
14 Angular Drag-and-Drop File Uploads to Firebase Storage
Angular Drag-and-Drop File Uploads to Firebase Storage
Fireship
15 Text Translation with Firebase Cloud Functions onWrite and Angular 4
Text Translation with Firebase Cloud Functions onWrite and Angular 4
Fireship
16 Custom Usernames with Firebase Authentication
Custom Usernames with Firebase Authentication
Fireship
17 Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Fireship
18 Simple Pagination with Firebase and Angular 4
Simple Pagination with Firebase and Angular 4
Fireship
19 How to Connect Firebase Users to their Data - 3 Methods
How to Connect Firebase Users to their Data - 3 Methods
Fireship
20 Add Toast Message Notifications to your Angular App
Add Toast Message Notifications to your Angular App
Fireship
21 Facebook-Inspired Reactions System with Angular and Firebase
Facebook-Inspired Reactions System with Angular and Firebase
Fireship
22 Learn NgModule in Angular with Examples
Learn NgModule in Angular with Examples
Fireship
23 Lazy Loading Components in Angular 4
Lazy Loading Components in Angular 4
Fireship
24 Stripe Checkout Payments with Angular and Firebase - Part 1
Stripe Checkout Payments with Angular and Firebase - Part 1
Fireship
25 Process Stripe Payments with Firebase Cloud Functions - Part 2
Process Stripe Payments with Firebase Cloud Functions - Part 2
Fireship
26 Selling Digital Content in Angular with Stripe Payments - Part 3
Selling Digital Content in Angular with Stripe Payments - Part 3
Fireship
27 Angular 4 Full Text Search with Algolia - Part 1
Angular 4 Full Text Search with Algolia - Part 1
Fireship
28 Algolia with Firebase Cloud Functions - Part 2
Algolia with Firebase Cloud Functions - Part 2
Fireship
29 Firebase Phone Authentication in Angular 4
Firebase Phone Authentication in Angular 4
Fireship
30 Top 7 RxJS Concepts for Angular Developers
Top 7 RxJS Concepts for Angular Developers
Fireship
31 Learn Angular Animations with 5 Examples
Learn Angular Animations with 5 Examples
Fireship
32 Advanced Firebase Data Filtering (Multi-Property)
Advanced Firebase Data Filtering (Multi-Property)
Fireship
33 Realtime Maps with Mapbox + Firebase + Angular
Realtime Maps with Mapbox + Firebase + Angular
Fireship
34 Angular Reactive Forms with Firebase Database Backend
Angular Reactive Forms with Firebase Database Backend
Fireship
35 Send Push Notifications in Angular with Firebase Cloud Messaging
Send Push Notifications in Angular with Firebase Cloud Messaging
Fireship
36 Top 7 Ways to Debug Angular 4 Apps
Top 7 Ways to Debug Angular 4 Apps
Fireship
37 Infinite Scroll with Angular and Firebase
Infinite Scroll with Angular and Firebase
Fireship
38 Use TypeScript with Firebase Cloud Functions
Use TypeScript with Firebase Cloud Functions
Fireship
39 Realtime Graphs and Charts with Plotly and Firebase
Realtime Graphs and Charts with Plotly and Firebase
Fireship
40 Role-Based User Permissions in Firebase
Role-Based User Permissions in Firebase
Fireship
41 User Presence System in Realtime - Online, Offline, Away
User Presence System in Realtime - Online, Offline, Away
Fireship
42 Location-based Queries with GeoFire and Angular Google Maps
Location-based Queries with GeoFire and Angular Google Maps
Fireship
43 Angular ngrx Redux Quick Start Tutorial
Angular ngrx Redux Quick Start Tutorial
Fireship
44 Angular Ngrx Effects with Firebase Database
Angular Ngrx Effects with Firebase Database
Fireship
45 Progressive Web Apps with Angular
Progressive Web Apps with Angular
Fireship
46 Angular Ngrx with Firebase Google OAuth User Authentication
Angular Ngrx with Firebase Google OAuth User Authentication
Fireship
47 RxJS Quick Start with Practical Examples
RxJS Quick Start with Practical Examples
Fireship
48 Send SMS Text Messages with Twilio and Firebase
Send SMS Text Messages with Twilio and Firebase
Fireship
49 Firebase Database Performance Profiling
Firebase Database Performance Profiling
Fireship
50 Native Desktop Apps with Angular and Electron
Native Desktop Apps with Angular and Electron
Fireship
51 Subscription Payments with Stripe, Angular, and Firebase
Subscription Payments with Stripe, Angular, and Firebase
Fireship
52 Firestore with AngularFire5 Quick Start Tutorial
Firestore with AngularFire5 Quick Start Tutorial
Fireship
53 Angular HTTP Client Quick Start Tutorial
Angular HTTP Client Quick Start Tutorial
Fireship
54 Google Sign-In with Firestore Custom User Data
Google Sign-In with Firestore Custom User Data
Fireship
55 Star Review System from Scratch with Firestore + Angular
Star Review System from Scratch with Firestore + Angular
Fireship
56 Angular Chatbot with Dialogflow (API.ai)
Angular Chatbot with Dialogflow (API.ai)
Fireship
57 Learn @ngrx/entity and Feature Modules
Learn @ngrx/entity and Feature Modules
Fireship
58 Infinite Scroll Pagination with Firestore
Infinite Scroll Pagination with Firestore
Fireship
59 Faster Firestore via Data Aggregation
Faster Firestore via Data Aggregation
Fireship
60 Contentful - CMS for Angular Progressive Web Apps
Contentful - CMS for Angular Progressive Web Apps
Fireship

Related Reads

Up next
Create Free WordPress Popup Plugin Using Claude AI
Quick Tips - Web Desiign & Ai Tools
Watch →