I was hitting my limits. Everything I was doing I did decently fast, but I didn’t get any faster.

I've since learned that Vim is the only editor that you get faster using with time.

Vim is based solely on shortcuts. When I discovered that and played around a bit, I felt numb and a little stupid, having not learned the shortcuts (called Vim language) much earlier in my career.

I realized there was a keystroke to get to any specific position I wanted to jump. It was like a game, seeing if I could use fewer shortcuts to accomplish a particular edit. It’s where many Vim users get a lot of pleasure from coding and writing. It felt liberating, moving my cursor with the precision of a surgeon.

Although speed is a smaller benefit, it got me started when I saw others navigating in Vim. After climbing the steep learning curve, it’s still one of the most powerful skills I've ever learned in my career, working for a living on a computer.

Let’s debunk the myth of Vim and learn how it’s possible to remember all the shortcuts using the specific Vim language. We'll see how to move with vim motions, and I'll share what I’ve learned so far, and why you might give Vim a try as well.

Learning the Vim Language

Lots of things have been said about Vim – how fast it is, how only Linux nerds use it, and that it’s impossible to exit Vim.

For myself, I fell in love with the “Vim language”. You see, I’m bad at remembering anything and thought that Vim was not for me. But this wasn't the case for one specific reason: Vim motions and its language.

I learned that there’s a grammar behind the editor. With it, you express what you want to do first, how many times, and then what you want it to apply.

Let’s get deeper into Vim and the language behind it.

How the Vim Language and Motions Work

Vim has a terrific language or grammar behind its shortcuts. Instead of remembering a thousand shortcuts, you can learn a couple and combine them.

These are often called the Vim language or Vim motions for moving around. This has nothing to do with the editor yet – these are universal and available in other editors as well.

For example, there's VSVim for VSCode, IdeaVim for the JetBrains products, Vintage Mode for Sublime, and so on. But there are also Browser extensions like Vimium or Firenvim, and Gmail even adapted some of Vim's shortcuts for navigation (j, k for moving, g for jumping).

Everyone who types on a computer eight hours a day should learn the Vim language. Yes, it’s hard in the beginning, but that’s the case with everything new and different. But getting better every day and having more fun coding or writing should be motivation enough. You're not too busy to learn - you'll learn as you go.

Vim Grammar

Just as spoken language grammar has verbs, subjects, and objects, so does the Vim language. The grammar has different verbs to begin with. Copying (or yanking) in Vim with y, deleting with d, pasting with p, changing with c, and so on.

For example, the easiest shortcut is copying a line with yy. In this case, yank is the verb and the second y is a synonym for y_. The y is doubled up which makes it easier to type since it's a joint operation.

Next, we can add movements. Each verb takes a subject for their movements. There are lots of movements (more in the next section) – the easiest is with numbers.

For example, to copy three lines, you add a 3 in front, such as 3yy. You can do that with all verbs, like deleting three lines is 3dd. Another would be { and } to move to the beginning or end of the paragraph, respectively.

In addition to verbs and subjects, the Vim language also has objects. For example, we can save text into different clipboards (called a register in Vim) with "ay. Here, we copy it into register a, which would be the object. We can paste it again by doing the same but using the verb paste instead of yank "ap.

There are even adjectives and adverbs with prefixes. Usually, you use a verb and an object. But instead of going down three lines with 3J, which joins the following three lines, you could add d5}, which means “delete from the current line through the end of the fifth paragraph down from here.”

For me, the most magical thing about Vim is how you navigate and edit text – and it still has nothing to do with the editor.

Sure Vim was the one that introduced and perfected these actions, but again – you can get them anywhere else. This goes deep into the Vim language, yet we still need to touch on the editor. This is important to know.

I hope you've started seeing the power of such patterns, though. With a couple of verbs and objects, you can already know hundreds of combinations without memorizing each one individually.

You can watch a video on Mastering the Vim Language or read a full exposition of the Vim language on this terrific StackOverflow comment.

Vim Motions

Vim motions are how you navigate, whether you navigate to the end of the word or back to the start of the document – these are all motions.

These are the first things you start learning (and hating) when learning Vim. They're extra hard to figure out initially, but they're something you'll want to use everywhere when you get used to them.

Instead of using arrow keys, Vim uses jk to move down and up and hl to move left and right. The main idea is to use the keys your right hand naturally rests on. You do not need to move your hands or even fingers for navigation.

Again, this seems like a small thing, but once you've learned it, you know why everyone is telling you about it.

Some common motions are:

h,j,k,l - left, down, up, right
w,W - to start of next word or WORD
b,B - to start of previous word or WORD
e,E - to end of word or WORD
$   - to end of line
^   - to start of line

You can find the most important motions to start with in this cheatsheet:

This Vim Command Cheat Sheet is from Cloud Guru.

How to Use Vim Modes (normal, insert, visual, and command)

Modes are another thing that might get you confused at the beginning.

When you launch Vim, you are not typing what you click on your keyboard as you are not in the “insert” mode that you're likely familiar with from other editors. Instead, the normal mode you are in lets you do the commands explained in the above Vim language and motions.

Vim is the only editor that optimizes editing text instead of writing from a blank page.

That’s another reason Vim makes you so efficient: you have different modes for each phase of your current work or task.

• Normal mode is for reading code and navigating quickly.

• Insert mode is for when you want to add some code or text.

• Visual mode is unique, the same as highlighting text with the mouse, but with the above Vim motions.

• And command mode is the powerhouse, where you can type Linux commands such as formatting a JSON file with :%!jq (whereas jq is a command line tool installed on your machine) and execute them within Vim. This is also where you can use Vim commands such as :sort for sorting your files.

I could go on here, but I want to dive into the editor itself now and explore why I learned it initially and how to get started.

Introduction to Vim the Editor (Neovim, Lunarvim, and Helix)

So what is Vim the editor, then? It started with the simple vi editor, a basic editor that implements the Vim language and can edit text. It's a little like Notepad++, which you might use on Windows, but without a mouse and context menu.

Vim is simply an improved version of Vi with more features.

Today there is even a newer version of Vim called Neovim. This version is super popular, and I’ve started using Neovim as well. Compared to Vim, Neovim uses Lua, an actual programming language, to configure and extend the editor. This makes writing plugins and configuring Neovim easier compared to Vim's native Vimscript.

Neovim is a great place to start learning Vim today, as it has so many awesome plugins. Neovim also won the most loved IDE on the StackOverflow survey a couple of times, last in 2022.

There is also an editor called Helix built in Rust, but it has minor deviations from the Vim language, which make it a less optimal place to start.

If you want to get started without needing to know anything about Neovim and spending hours on configurations, you can begin with LunarVim. It's a distro with all the features you know from VS Code already included.

Suppose you are comfortable with the terminal and realize you want to change the editor to your liking. In that case, you can kickstart your journey with a simple single-file configuration with many explanations that will work out of the box. You can also learn each config by opening the single config file.

Why I Learned Vim

Using the standard input method we use in our editors daily, we will eventually stagnate at a certain level. Sure, you can use cmd+arrow-keys (on a Mac) to jump to the beginning of a line or option+arrow-keys to jump between words instead of characters.

But what happens once you've mastered that? What if you need to change something in the middle of a sentence? There is no other way to jump several times with this option, or you move your hands away each time to reach the mouse to click on the exact spot.

One day, I saw a coworker work in Vim, and everything clicked. The Vim language and motions were the things I needed all along. So I installed the VS Code plugin, watched a couple of YouTube videos, and started my journey to learn the basic movements.

I also love learning new things and, even better, I'm always looking for ways to make me more productive 😉.

But as many of you might have experienced, the hardest part of learning Vim is getting started. The initial learning curve is very steep. Below is an illustration that shows this :).

It took me also two or three times trying to start learning Vim until I fully grasped it. I switched back and forth. As well as having to get work done, it is sometimes hard to switch entirely from one day to another. But I just loved learning all the movements, and I knew it would make me faster after a short time.

Why I Love Vim

I have been using Vim for only eight months, and coding with Python for around six years. I've been using other code editors since my career started in 2003. Each editor I used had its strengths and its appeal. But I never experienced such efficiency gains as I have with Vim.

In the end, use the editor that works best for you. Personally, I want my editor to help me work as fast as possible, especially since I use it daily. Investing a bunch of time learning Vim is necessary, but it pays off over time. That’s the whole point with Vim and especially the Vim language.

An underrated skill in general among programmers is using the terminal. By learning your editor, especially with Vim, you will naturally learn more about the terminal and improve your Linux skills (reverse search, lazy git, Tmux, and many more).

Before Vim, I only used the terminal if I had to. I googled everything, and today, I use the terminal with its helpful manuals whenever I can.

Sometimes I’m surprised by myself as well, and it’s super nerdy – but it’s so effective. I’ve become a much better developer since starting to get comfortable with Vim.

Tweaking and optimizing Vim can take hours and days, and it's unavoidable in the beginning. But after a while, your dotfiles mature, and you start changing things less. You will also get much faster at trying out a new plugin or adding a remap.

Also, Vim is fun! Working in Neovim is one of the highlights of my everyday work. Improving your text editor and making it your own – maybe in ways no one else has optimized – is awesome.

For example, I write a lot, so I optimized for writing markdown and programming in Python. That’s what adds a lot to my happiness as a coder.

Because of all this, TJ DeVries calls Neovim a PDE (Personalized Development Environment), not “just” an IDE. You can learn more about this in ThePrimeagen’s truly inspiring Vim videos and learn why he used Vim in 2022.

Vim also manifested minimalism more in me. I used the terminal instead of fancy GUIs and plain text files for clarity, freedom, blazingly fast shortcuts, no vendor lock-in, and staying in the Flow with the content in front.

Vim changed not only my workflow but how I was able to edit at the speed of thought. Instead of thinking, “I want to edit that word”, my fingers jump to that word and change it with a few keystrokes.

Vim for Data Engineering

My data engineering workflow uses Neovim with the LSP (Language Server Protocol) pyright installed with mason. There's much more with Tmux, but you can find all the details on dotfiles/nvim.

Vim for Writing

I’m still using Obsidian a lot more for writing (see more on my PKM workflow) due to its additional features of supported images, backlinks, graphs, and plugins specified for note-taking, such as ReadWise (syncing my highlight from books, and tweets), Dataview (using notes as a database), Excalidraw (drawing with Markdown format), Templates, and so on.

Nevertheless, I write more and more in Neovim. For now, I use ZenMode (for centering the text), Grammarly (for linting grammar), write-good (linting grammar), and specifically Obsidian.nvim (follow backlinks, and so on.). You find all details in my dotfiles.

In Obsidian, I use the Vim mode Obsidian .vimrc and map most hotkeys to my Vim settings. At the same time, I've been writing more and more in Neovim and have been progressively moving over to full Neovim.

Plugins such as Telescope and simple grep features that I use for coding work very well with Markdown. Here are some clips showing what is possible in an excellent talk about Writing, Editing, and World-Building at the speed of thought with Vim.

Why You Should Learn Vim, Too

When I heard about Vim, I thought that it was only for software engineers and Linux nerds 😅. I never thought I was going to use it as well. But how did I get into it?

I've already shared some reasons why I love Vim. But it really changed all my workflows, not only as a developer but also how I surf the internet, write, navigate, and use tools. I search for a Vim mode in any application I use.

But if you don't enjoy fiddling and optimizing your workflow, and if you don't write or code for a living, Vim might not be for you. Start with your current editor and activate the Vim mode before you do anything with Vim. It will save you a lot of frustration, trust me 😅.

How to Get Started Using Vim

There are many good resources that'll help you get started with Vim. The easiest is to type vimtutor into your terminal, which is an interactive tutorial for Vim.

I've already linked a few YouTube videos above – especially check out ThePrimagen starting with Vim As Your Editor or Why even bother with Vim or Neovim in 2022.

I started with Ben Awads’s Vim tutorial back then. An excellent Lecture: Editors (Vim) (2020). Mastering the Vim Language. I also collect a small playlist on YouTube with Vim content. A big inspiration also dev workflow using Tmux and Vim from Takuya.

Wrapping Up

We have learned that Vim is a powerful text editor popular among developers. It's based on shortcuts, called the Vim language, which can make coding and writing faster and more efficient.

With Vim, you can jump to any specific text position and rapidly make precise edits. While learning Vim can be challenging, it is well worth the effort in the long run as it will improve your productivity and bring joy to your coding experience.

If you want to go further, try Tmux, which plays well with Vim. You could even go one level deeper, which is a dedicated keyboard layout such as Dvorak or Halmak (which I started learning at some point). Or buy a fancy ergonomic keyboard or build one yourself.

Thanks for reading this far. I hope you enjoyed this article. I'm looking forward to hearing your comments and experiences.

You can read more of my other tutorials at www.sspaeti.com.

“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom.

But the difference between the tools is more than just IDE and text editor.

An IDE is a robust tool for writing, editing, debugging, and running your code. A text editor only lets you write and edit your code. You might have to step out of a text editor to run your code or download plugins to help it do the running for you.

In this article, you'll learn the main differences between Visual Studio and Visual Studio Code. But firstly, we need to know what “Visual Studio” is and what “Visual Studio Code is” before diving into those differences.

What We'll Cover

• What is Visual Studio?
• What is Visual Studio Code?
• What is the Difference between “Visual Studio” and “Visual Studio Code”?
• Which should you Choose between “Visual Studio” and “Visual Studio Code”?
• Conclusion

What is Visual Studio?

Visual Studio was first released in 1997 by Microsoft. It's an integrated development environment (IDE) for developing, editing, and debugging websites, web, and mobile applications as well as cloud services.

Because it's an IDE, programming utilities like a debugger, compiler, intellisence, and more are all bundled into it for you.

Visual Studio comes with built-in support for C# and .NET. It also supports other programming languages like C, C++, Python, F#, web languages (HTML, CSS, JavaScript), and a lot more. Support for Java was removed back in Visual Studio 2017.

Visual Studio runs on Windows and Mac. It has 3 editions – community, professional, and enterprise. The community version is free, while the professional and enterprise are not.

The installation is quite a bit more robust on Windows than Mac. So, on Windows, you might have to download more than 42 GB depending on what you want to do.

But on Mac, as of the time of writing this article, you need around 6.2 GB of disk space.

What is Visual Studio Code?

Visual Studio Code (also called VS Code) is like the mini version of Visual Studio. It is an open-source and lightweight text editor available on Windows, Mac, and Linux. There’s also the web version available at https://vscode.dev/.

VS Code comes with built-in support for JavaScript, TypeScript and Node JS, but you can use it to code in any language you want. All you need to do is download the relevant extensions.

Some of the extensions are made by Microsoft, but a lot of others are third-party extensions.

Unlike Visual Studio, you don’t need much space to download VS Code. You might not need more than 200 MB of disk space to download it.

Since it supports JavaScript, TypeScript, and Node JS by default, you get a debugger and intellisence, too. But to get intellisence, a compiler, and debuggers for other languages, you have to download relevant extensions.

Now you know that Visual Studio is an IDE and Visual Studio Code is a text editor. So let's summarize their main differences next.

What is the Difference between “Visual Studio” and “Visual Studio Code”?

Which should you Choose between “Visual Studio” and “Visual Studio Code”?

There has been a long-running debate about which is better and which to choose between Visual Studio and Visual Studio Code. Well, it depends on what you are doing.

If you’re developing exclusively with a language supported by Visual Studio such as C#, C, C++, Python, and others, Visual Studio or other relevant IDEs are likely the best option for you.

But even if you’re developing in those languages but you require a React, Vue, or Angular frontend, VS code might be the best option for you.

If you’re working in a team, they might provide you with the enterprise version of Visual Studio, or any other IDE that correlates with the language you are working with. For example, PyCharm for Python and IntelliJ Idea for Java.

If you’re using Linux, you have to choose Visual Studio Code or some other IDE apart from Visual Studio. That’s because Visual Studio does not run on Linux.

If you’re the kind of person that likes to customize your editor to your taste, just go for VS Code because it's highly customizable. You also should probably choose VS Code if you are mixing technologies.

Conclusion

This article showed you the differences between Visual Studio and VS Code, and also what they both are separately.

The debate should never be which one is better than the other, but which is best for what you want to do, or what you need. That’s why we looked at some scenarios that might encourage you to choose one over the other.

Thank you for reading.

But if you are new to Nano, performing basic operations like creating files, saving the file, and exiting the editor might be confusing.

So, in this article, I want to show you how to save your code in Nano and exit it as well.

I’ll be using the Windows Subsystem for Linux (WSL) in this article. But it’s fine if you’re on Linux itself. The commands are the same.

What We'll Cover

• How to Save a File in Nano
• How to Exit Nano
• Wrapping Up

How to Save a File in Nano

Step 1: Open WSL, type “nano” and hit ENTER to get into the Nano code editor

Step 2: Write your code in any language. In the screenshot below, I wrote some PHP.

NB: If you don’t get syntax highlighting, enable it by pressing ALT + 4. If you still don’t get syntax highlighting, then you need to save the file.

Step 3: Press CTRL + O to save the file, type the file name, and hit ENTER.

Now, syntax highlighting is enabled:

If you already opened the file by typing nano file_name in WSL…

When you are done making your changes, press CTRL + O and hit ENTER to save the changes.

How to Exit Nano

To exit nano, all you need to do is to press CTRL + X.

If you have any changes that have not been saved, you’ll be prompted to save the changes before you quit the editor.

Wrapping Up

I hope this article helped you learn how to save a file in Nano and exit the editor whenever you want to.

Don’t forget:

• Typing nano gets you into the Nano editor in WSL
• CTRL + O saves a Nano file
• CTRL + X exits Nano

Thank you for reading. If you find the article helpful, don’t hesitate to share it with your friends and family.

The problem with popular languages like Python is that every IDE or code editor under the sun seems to have good support for the language. While this can be great, choosing the best one becomes a bit tricky.

In this article I'll introduce you to three IDEs and code editors that can make your Python journey smoother.

But before I begin I want to clarify the fact that this is not an exhaustive list. Like I said, Python is one of the most popular programming languages so it's supported by a large number of code editors and IDEs.

I could've included as many of them as possible, but instead I chose to include the ones that I've used at some point in my life and don't mind going back to. Because I think this'll be more helpful.

Without any further ado, let's jump in!

Table of Contents

• IDE vs Code Editor – What's the difference?
• PyCharm
• Microsoft Visual Studio Code
• Sublime Text
• Conclusion

IDE vs Code Editor – What's the Difference?

Before you start reading about the IDEs and Code Editors I have in store for you, let's clarify the definitions of an IDE and a Code Editor.

As you may already know, source code files are just text files with certain extensions appended to them. Any text editor that has some special feature such as syntax highlighting, automatic code indentation, and so on to make editing code files easier is called a code editor.

Popular code editors include Visual Studio Code, Sublime Text, Atom, Notepad++ and more.

An IDE or Integrated Development Environment, on the other hand, is a much more complex suite of software that combines multiple tools such as a code editor, a file browser, a terminal emulator, a database explorer and more in a single package.

Popular IDEs include PyCharm, IntelliJ Idea, Microsoft Visual Studio, and others.

But thanks to modern highly extensible code editors such as Microsoft Visual Studio Code, the line between an IDE and a Code Editor has started to fade away.

Now that you have a better idea of what an editor is compared to a full-blown IDE, let's look at some of the best for Python coding.

PyCharm

The first one in our list is an IDE from JetBrains. PyCharm is one of the most used Python IDEs out there (if not the most used).

https://www.jetbrains.com/pycharm/

The IDE has two editions. The professional edition will cost you $8.90 every month and $89.00 every year if billed yearly. There is also the community edition which is completely free and is built on open-source software. In this article I'll discuss the community edition.

Both editions are available for Windows, macOS, and Linux. You can download the 30 day trial of the professional edition or the community edition from the official download page.

The installation process is pretty straightforward regardless of the platform you're on. Once you've downloaded and installed PyCharm on your computer, you should be able to start the IDE. You can use the start menu shortcut on Windows, the Applications directory on macOS, or your application launcher on Linux.

You can create a new Python project by clicking on the New Project button.

In the next step, choose where you'd like to store your project. You can either create a new virtual environment or use a previously configured interpreter. In this case, I'm creating a new environment.

If you check the Create a main.py welcome script option, a new Python file with some boilerplate code will be created inside your project. Once you're happy with all the choices, hit the Create button.

This is what the code editor looks like once the project has been created. On the left side you can browse all your source files, and you can hit the play button on the top right corner of the window to run the selected scripts in the dropdown.

As you can see, PyCharm comes with a terminal built in on the bottom of the window and you can see outputs from your program without ever leaving PyCharm.

The community edition is quite complete and you can do more or less everything you can do on the professional edition. The professional edition has better support for web frameworks like Django and some other bells and whistles.

If you're a student, you can get PyCharm Professional Edition and all other JetBrains stuff for free by applying on their website. You can also get a free license of all the JetBrains products if you're an open-source maintainer.

Microsoft Visual Studio Code

Next in the list of my favorites is Microsoft Visual Studio Code or VSCode for short. It's an open-source, electron-powered, cross-platform code editor from Microsoft with a ton of customization options and extensions.

By installing the right set of extensions, you can turn Visual Studio Code into almost a fully-featured Python IDE. You can download VSCode for free from the official download site for Windows, macOS, and Linux.

Once you've installed VSCode on your system, open the software and go to the extensions tab by hitting the Ctrl + Shift + X key combination.

Use the search bar to search for and install the following extensions:

• Python – provides features such as IntelliSense (Pylance), linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more!
• PyLance – works alongside Python in Visual Studio Code to provide performant language support.
• Visual Studio IntelliCode – provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code.

Once you have these three installed, you're good to go. Create a directory anywhere on your machine and open that folder using VSCode. You can use the integrated terminal to run your code or execute any command in general.

You can set breakpoints by clicking on the left side of any line number. Then you can hit F5 to start debugging or Ctrl + F5 to run the program without debugging. VSCode has a lot more tricks up its sleeve that you'll find out as you keep using it.

Sublime Text

Sublime Text is one of the OG code editors that has been used by developers for years. It's a very performant, powerful code editor with rich support for packages.

You can download Sublime Text from their official download page for Windows, macOS, and Linux. Once you have it installed, start Sublime Text like any other software.

Now click on Tools > Install Package Control...

This'll install the Sublime Package Manager. Wait until a success message shows up.

Now go to Command Palette using the Ctrl + Shift + P key combination and type Install Package:

Select the first option and search for the Anaconda package. This is the ultimate Python package that turns Sublime Text into a Python IDE with features like autocompletion, code linting, IDE features, autopep8 formating, McCabe complexity checker, Vagrant and Docker support, and more.

There are also more specific packages such as Djaneiro for Django support and requirementstxt for requirements.txt support on Sublime Text. Just look around the Package Control website and you may find some pretty useful packages.

Conclusion

As I've already said, this is not an exhaustive list of all the popular Python IDEs and Code Editors. I've also used Spyder at a point in my life but decided to leave it off since it's targeted at scientists and engineers.

I've also used IDLE for a brief period as well but it didn't seem like a strong enough option when it comes to larger projects.

If you think I've left out any other good one, let me know via Twitter or LinkedIn. Also, if you're native Bengali speaker, checkout freeCodeCamp's Bengali Publication and YouTube Channel. Till the next one, stay safe and keep learning.

I find that personalizing my IDE helps me enjoy the time I spend using it more. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. And many of these will help you be more productive.

This article goes beyond theming extensions, so I suggest picking out a theme first. Or try out my current favorite theme, Dracula Refined.

Indent Rainbow

Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

Indent Rainbow

Bonus: Indent Rainbow Palettes

Want custom colors in your Indent Rainbow? Check out Indent Rainbow Palettes by Evondev.

After installing Indent Rainbow, install this extension and follow the outlined steps to select a new gradient palette.

Indent Palettes1

Indent Palettes2

Bracket Pair Colorizer

This will add rainbow colors to brackets, and matching brackets will have the same color. This extension has saved me a number of times when looking for a missing or extra bracket.

The Bracket Pair Colorizer is another popular extension with over 4 million installs.

Depreciation Notice for 2022

This extension has recently become depreciated. This is because of upgrades to VSCode allowing for a bracket pair colorization setting. This can be toggled on with "editor.bracketPairColorization.enabled": true in your user settings.

The improved performance of this feature makes it a better choice, but if you'd prefer to not edit your user settings, I'd suggest looking for extensions that handle this for you such as Bracket Pair Colorizer or Rainbow Brackets.

Colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

Photo Credit: Colorize

Peacock

Peacock provides optional window colors. It is great for managing multiple workspaces. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. You can even customize workspace colors.

Photo Credit: Peacock

VSCode Icons

Adding icons can help when navigating through your folders. VSCode Icons has an extensive library of icons matching a variety of file types.

For example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. It also adds an extra touch of color and detail to folder structures.

Photo Credit: vscode-icons

TODO Highlight

TODO Highlight will customize your list of TODO comments and make them pop with color. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange.

TODO and FIXME are built in keywords. You'll have the option to customize the color of these and add additional keywords.

Photo Credit: TODO Highlight

TL;DR

Here is a condensed list of the extensions mentioned in this article.

• Indent Rainbow
• Bracket Pair Colorizer
• Colorize
• Peacock
• VSCode Icons
• TODO Highlight
• Dracula Refined Theme

I hope these extensions will bring a rainbow of colors to your VSCode, too.

Whilst these time and effort saving techniques may seem negligible as a one off, when accumulated together they can really make a difference.

In this article, I am going to share with you my favourite WebStorm plugins for JavaScript developers and my reasons for why.

Rainbow Brackets

Because who hasn’t spent time trying to figure out which brackets belong to each other? When working on JavaScript projects I often nest brackets within each other, leading to something that looks like this:

No Rainbow Brackets

It becomes very hard to track the scope of certain functions, especially when you want to delete some.

With rainbow brackets, you can see what is going on in your code visually, when it comes to scoping functions.

Rainbow brackets in fact doesn’t only work with brackets, but also with parenthesis, which makes things like mapping in React projects easy to pick out.

Rainbow Brackets!

Read more about Rainbow Brackets here.

Tabnine

Tabine has been my favourite plugin for a while now. I enjoy using it for its accurate text completion that has quite literally predicted whole lines of code for me that I can choose to accept with a simple key press.

Tabnine predicting code snippets based on my coding habits

It does this through its AI-driven predictive coding algorithms. When enabled, Tabnine actually learns from your coding habits and the projects you work on, so it can accurately predict what you are going to type next.

I currently use Tabnine with my Webstorm IDE for JavaScript projects. But it is also available in over 30 languages and for 21 IDEs and code editors.

Read more about it here.

CSV

This is a cool one if you work with CSV files.

The CSV Plugin treated CSV, or ‘comma separated values’, as its own language in JetBrains IDEs. This means it has its own syntax definition, structured language elements and associated file types, such as .csv, .tsv and .psv.

Having this plugin allows us to treat it like we do with any other code in the editor, with mistakes being highlighted for us. Here is a full list of the support you will get:

• CSV/TSV/PSV file detection
• flexible Table Editor
• customisable text editor
• customisable column colouring
• customisable line comment
• syntax validation
• syntax highlighting (customisable)
• content formatting (customisable)
• quick fix inspections
• intentions (Alt+Enter), for example Quote/Unquote (all), Shift Column Left/Right
• structure view (header-entry layout)
• support for ',', ';', ':', '|' and '↹' as pre-defined value separator
• support for freely defined value separators
• support for line comments (# per default, customisable)
• highlight of active column values
• tab (↹) separator highlighting

How a .csv file looks when opened in Webstorm, with the CSV plugin.

Read more about CSV here.

There is also Rainbow CSV, if you want to add some of that extra color in your life!

String Manipulation

The String Manipulation plugin allows you to instantly format strings with a variety of inbuilt options.

So for example, if you want to change a bunch of highlighted strings to camelCase, you can do it instantly. But this is just the tip of the iceberg. You can sort strings, filter them, or even sort them via case sensitivity!

This tool is a huge time saver when it comes to tidying up code.

Before String Manipulation

After String Manipulation! So neat and tidy in one click!

The list of capabilities is just too long, so instead of pasting them here, you can check them out over on the website here.

Prettier

I have been using Prettier for the longest out of all the plugins mentioned, and sometimes forget about it as its so built into my everyday activities as a developer.

Prettier takes your code as you have written it, and provides a standardisation and consistency. Basically if everyone used Prettier then all our code would follow the exact same guidelines – yay for consistency!

It does this by not offering loads and loads of options to the user like ESLint. If you really want to, then you can change it, but that would really be defeating its purpose.

Before Prettier

Here you can see Prettier at work. It has taken some code, and made all of the lines of code under 60 characters in length. If a line goes over that, it gets put on a new separate line. It also adds semi-colons if you want, and makes sure that all quotation marks are consistent.

After Prettier

There, much ‘Prettier’! (geddit?)

Prettier is actually already bundled with WebStorm, so you don't even need to install it to use it.

Code with Me

This is not so much a plugin as a regular feature of WebStorm now that it has been packaged up with version 2021.1, but worth a mention none the less.

Now with remote working being a regular thing in a lot of our lives, our need to be able to share code efficiently is now more important than ever.

I know this as I have spent a lot of time "screen-shot"-ting my screen and sending it over Slack when discussing with colleague developers. If only there was a tool where someone could literally see my screen AND edit my code...

Me using Code With Me

Well, that is what Code With Me does, with the added bonus of video calls.

You can choose who can edit your code that you are sharing. And if you are presenting to a big group call, and don't want anyone touching it, you can switch to a ‘read-only’ mode too.

Me showing the chat functionality of Code With Me

This feature is definitely a life saver when it comes to remote working. If you want to have more of a read on this feature, make sure to check out the link here.

Thanks for reading! I hope these plugins help you become more productive in your coding day-to-day.

Code with Ania Kubów

Hello everyone. This channel is run by Ania Kubow. In this channel, I will be teaching you JavaScript,React, HTML, CSS, React-native, Node.js and so much more! A little bit about me:My background is in the financial markets, where I worked as a derivates broker our of University. After starting m…

YouTube

When you're coding, you're writing various text that can be executed by different language compilers. And what makes this text fun and easy to write are the editors that we use.

Different editors have different features. But they have a common goal: making writing code easier – easier to compose, debug, and read.

In this article, we'll look at five code editors that can improve development on your Mac device.

1. Sublime Text

Sublime Text is a lightweight editor with many features for improving your code-writing experience. Here are some of its features:

Multiple view panes

Multiple view panes

Sublime Text offers multiple view panes for writing code. This way, you can view multiple files at once.

What's more fun is you can open the same file in two panes. This feature can be helpful when you're writing code in a file with long lines of code, as you'll be able to scroll to the top in one pane and then write in the bottom of the other.

Side-by-side view for Type Definitions

Instead of just viewing type definitions in a small popup or opening the definition file that overrides the current view, Sublime Text provides a side-by-side view of a definition file for the types in the current file.

Multiple Selections

Multi-Line Selection Text Entry with Sublime Text

There are two forms of multi-selections: multi-selecting the same characters or different characters.

Same character selection

Say you want to rename a literal (variable, function, and so on) in multiple places. Sublime Text allows you to highlight the literal, and using Ctrl/Cmd D you can select other occurrences of that literal and edit, replace, or do what you want.

Different characters selection

Maybe some literals are spelled differently, but you want to highlight them together. Sublime allows you to use your mouse to highlight many things at once and operate on them as you choose.

2. VSCode

The VSCode editor offers syntax light, IntelliSense features (autocompletes, code hinting, and more), custom configurations, and room for different plugins. VSCode also allows multiple selections and multiple view panes.

Here are more features of VSCode:

Code Debugging

With VSCode, you do not need to debug on your browser or other tools.

Debugging in Visual Studio Code

VSCode allows you to debug right from your editor using breakpoints, the call stack, and even an interactive console.

Many extensions for different things

VSCode has a large marketplace for different languages, frameworks, and even your editor. You have extensions that beautify your editor's appearance and experience and tools that help with autocompletion when writing code.

Managing Extensions in Visual Studio Code

Built-in Terminal

With VSCode, you have a a built-in shell terminal where you can execute commands without leaving your editor to go to a different terminal app.

The terminal view of VSCode

A small screen may make your editing view small and a bit inconvenient, but with a large monitor, for example, the view is just okay.

VSCode also has multiple view panes, character selection, and multiple character replacements.

3. Atom

Atom is a highly customizable code editor. This is why the team calls it a "hackable text editor". From the appearance and colors on the editor to the key combinations for commands and many other things, you can customize Atom as much as you wish and make it very personalized.

Here are some features:

Real-time Code Collaboration

Teletype for Atom

Atom has a Teletyping feature that allows multiple people to work on a codebase in real-time. This feature improves collaboration in a team workspace on projects. For VSCode, you'll usually need an extension for this.

Git Integration

With Atom, you never have to go to your terminal for your Git operations.

GitHub for Atom

Git actions are integrated into Atom using the GitHub package, and this creates a smooth version control experience while you write code.

Smart Autocompletion

With many languages and syntaxes integrated into Atom, you also get a nice auto-completion feature while writing code.

Autocomplete (atom.io)

You don't have to type out those long method and variable names anymore. Atom's smart enough to help you avoid that 😉.

In Atom, you also have search and replace features, view panes, and more.

4. WebStorm

WebStorm calls itself "The Smartest JavaScript IDE". It takes a lot of confidence to call itself that, and WebStorm actually delivers. WebStorm makes writing JavaScript and its related technologies not just convenient but more enjoyable.

Some features include:

Built-in developer tools

WebStorm takes the name "development editor" quite literally. From running scripts to breakpoints and general debugging, WebStorm provides developer tools that allow you to write, execute and debug your code.

WebStorm: Integrated Developer Tools

Smart features

This editor allows you to move files between folders seamlessly. It also helps you refactor your code and suggest fixes for errors.

And the most brilliant feature I love about it is that you can easily rename a specific variable across your application. Say you have a variable you've imported in many files – you can easily rename that variable from one of the files.

Fast search and navigation

Another fantastic feature of WebStorm, which people generally praise it for, is the fast file or folder search and navigation.

WebStorm: Navigation and Search

From searching file names, class names, function names within files, and special selectors, you can easily find a file you're looking for.

There's also collaboration, view panes, search and replace in WebStorm.

5. Vim

And there's Vim. It's worth noting that Vim is not for everyone, as it arguably has a steep learning curve – but Vim has many features that make it worth trying out. I have a friend who's never letting go of Vim and keeps advocating that people are missing out.

Here are some features:

High Customizability

I mentioned earlier that Atom is highly customizable, but I don't think it's as flexible as Vim.

Vim customized to be like SublimeText

Down to the low-level commands and feel of the editor, you can configure many things that makes using another editor very strange for you. You can also create scripts that automate things for you.

Support for Many Languages and File Formats

Vim has support for many languages and files of different kinds. It also integrates with many tools.

Powerful search feature

With powerful selectors and regex, you can do multi-level file searches and replacements. With Vim's scripts, you can also get plugins that take the search features to another level.

Agreed, it's not very easy to learn. But it's pretty powerful and consumes less memory, surprisingly. It also has an extensive script system that gives you much power while writing code.

Wrapping Up

There you have it - five code editors you can use to write cleaner, more readable code. I hope you find the one that best fits your needs!

Thanks for reading :)

A code Snippet is a programming term that refers to a small portion of re-usable source code, machine code, or text.

Snippets help programmers reduce the time it takes to type in repetitive information while coding. Code Snippets are a feature on most text editors, code editors, and IDEs.

In this tutorial, we're going to learn how to write our own custom snippets.

Prerequisites

For this tutorial, I'll assume that you can write a decent amount of code in the language you want to create a code snippet for.

And with that confirmed...

Why Code Snippets are Useful

When I first started learning how to code, the first code snippet I ever used was Ctrl + ! and enter to get an HTML5 document template. (I doubt anyone knows how to write that by heart.) It was cool and I felt like a code ninja.

(PS: if you don't want to read the back story and just wanna dive right into the tutorial, then jump right into it.)

As I started exploring more into coding, I learned about VSCode extensions that made coding faster – code snippets in particular – and I then went on a downloading spree.

All was going fine and well until I started frequently using frameworks and libraries in my projects. This involved me trying to remember how to link my documents to their packages and also use personalized CSS resets and variables.

Plus I was always forgetting to link my stylesheets to my HTML pages, making me spend an unreasonable amount of time trying to figure out why my pages were not being styled correctly. (I still forget to do so now and then.)

That got me thinking about having my personalized HTML and CSS templates which would have all the base code I always used in my projects.

At first, I just created the templates and saved them on my system so I could copy the code any time I started a new project. But that also was getting stressful, and I wanted to just type in a few letters, press enter, and boom have my templates showing on my screen. And that was when I learned about VsCode Code Snippets.

I didn't know it was called code snippets at that time, so I spent over 2 weeks trying to find a tool that could help me do this and I almost gave up. Until I randomly stumbled on Brad Travesty's video on one of my daily evening wanderings on the streets of YouTube without actively searching for it.

It was a lifesaver, and every once in a while I add new custom snippets to my collection. You can check out my personalized HTML and CSS templates here.

You've likely often wished that you had a custom snippet of a particular piece of code you use all the time but didn't know how to create or find it. Well, wish no more for I'm about to show you how to easily create your own.

How to Create Custom Code Snippets

Creating your own custom snippet is quite easy. And with the help of another tool called Snippet Generator (which I will show you how to use shortly), it becomes even easier.

Step 1: Check if your editor lets you create custom snippets

You can check the docs on your code editor to find out if the feature is available and how to access it.

I am using VsCode for this tutorial. You can download it here.

To access this setting, you can either click on the settings icon on the sidebar and then click on user snippets or open up the command palette using Cntr + shift + p on Windows or CMD + shift + p on Mac, typing in "snippet" and clicking on Preferences: Configure User Snippets.

This will give you a drop-down with different language selections to choose from.

Step 2: Decide your Snippet Scope

You can either create a global snippet that you can use across all languages or create a local snippet scoped to a particular language.

So from the drop-down, you can see New Global Snippet File and then a bunch of languages in alphabetical order.

Scroll to the language you want to write your snippet for and click on it (or select New Global Snippet File if you want to use your snippets in multiple languages).

If you selected a particular language, HTML for example, the file will automatically open. But if you chose Global snippet, you'll be prompted to type in the name of the snippet file before it opens.

For this one, I'll be using a Global Snippet.

Step 3: Understand the Syntax

The Syntax for code snippet is quite easy actually. It is written in JSON format and each file can contain an unlimited number of snippets.

{
// Code Snippet 1
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": "trigger word 1",
    "body": ["your code snippet"],
    "description": "description of the code"
  },
// Code Snippet 2
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": ["trigger word 1, trigger word 2"],
    "body": ["your code snippet"],
    "description": "description of the code"
  }
}

Let's see what's going on in this code:

Snippet Name

The Snippet Name is the name of the snippet. It is also what will be displayed via IntelliSense if no description is provided.

Scope

This determines what languages are allowed to use the snippet. Enter the name of the language(s) separated by a comma. If you leave it empty or omit it, the snippet can be accessed by any language. This part is included in Global Snippets only, as Local Snippets files are already locally scoped.

Prefix

This describes one or more trigger words that will prompt IntelliSense to display the snippet.

Body

This can be a string if it is one-line code or an array of strings if it is multi-line code.

Description

This describes the snippet and what it does. If this is omitted, the name of the snippet will be used instead.

Snippet example 1:

{
// log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  }
}

From the above example, our snippet name is Print to console, and it can only be used in a JavaScript and TypeScript file. If you were to type log in a JavaScript or TypeScript file, IntelliSense would show it along with the description Log output to console. Once you select it and click enter, you'd see console.log() on the screen.

Step 4: Add Tab Stops

Tabstops allow you to move the editor cursor inside a snippet. $1, $2, ..., $n specify cursor locations it should move into sequentially when you hit the tab key. $0 represents the final position the cursor should stop.

Snippet example 2:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function $1($2){",
      "  $0",
      "}"
    ],
    "description": ""
  }
}

In this example, when you type nfn, our Named Function snippet shows up. Once you select it, you'll see your snippet on the screen. You'll also see that the cursor is now before the parenthesis as opposed to being at the end of the code.

Type in the name of the function, "GetUsers" for example, and then hit the tab button. You will notice that the cursor has now moved into the parenthesis.

You can type in the parameter if it has one or and hit the tab key again to move the cursor to the next tab stop which is between the curly brackets where our function body will go.

Note: When you are writing multi-line code, you cannot use a tab to indent your code in the JSON syntax. You can only use 2 spaces to indent your code, or whatever number of spacing indentation you use to write your code.

Step 5: Use Placeholders

These are Tab Stops with values. They help the user easily identify or understand what they are supposed to type at that particular tab stop.

The placeholder will be automatically highlighted so you can immediately type in what you want to replace it with.

Snippet example 3:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  }
}

Step 6: Create Choices

Placeholders can have choices as values. This means that instead of typing in your value, you can choose from a dropdown selection.

To create one, you write the values which are separated by a comma between two pipe-characters, for example, ${1|one, two, three|}.

Snippet example 4:

// array method
{
"Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

Here, once you type in arrmth, select it from IntelliSense and hit enter. The first tab stop will be a dropdown of array choices to select from. The next tab stop is the parameter and the last stop is the function code.

Snippet Generators

As your snippets begin to grow in lines and size, it becomes difficult to type and create them within your code editor. This is where a snippet generator comes in.

A snippet generator will take in your regular code and turn it into a code snippet.

I will be using Snippet Generator for this tutorial. With this particular snippet generator, you can write code snippets for VsCode, Sublime Text, and Atom.

How to Use the Snippet Generator

In the description input, enter the name of the code snippet which will be used as the name and description of the snippet.

In the tab trigger input, enter the prefix of your code snippet.

In the your snippet.. input, enter your code in its natural form as you would without writing it as an array of strings.

After this, you can then add in Tabstops, Placeholders, and Choices as explained above.

Snippet example 5:

//named function
function ${1:functionName}(${2: parameter}) {
  ${0:functionBody}
}

Snippet example 6:

//array method
${1|forEach, map, filter, reduce,|}((${2:item}) => {
 $0
)}

Final Snippet Code

{
  // log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  },
  // named function
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  },
  // array method
  "Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

And that's it. Easy peasy lemon squeezy.

Recap

Let's do a recap. We have learned that:

• a code snippet is a small portion of re-usable source code, machine code, or text which helps programmers reduce the time it takes to type in repetitive codes while programming.
• a code snippet file can contain an unlimited number of snippets.
• you can have a locally scoped snippet used within only one language file or a globally scoped snippet used within two or more language files.
• code snippets are written in JSON syntax.
• you can add tabstops, placeholders, and choices to your code snippets.
• you can also use a snippet generator to generate your snippets.

Thank you for reading my article. You can connect with me on Twitter, LinkedIn or my Blog.

I would love to know if you'll be creating your own custom snippets and what they might be. And do feel free to share this article with others who might find this useful too. Byeee!

Resources

• Brad's Custom Snippets video
• VsCode Snippet Documentation
• Snippet Generator
• View my Custom HTML and CSS Templates

In this tutorial, we'll go over how you can open the VS Code text editor (Visual Studio Code) from your Mac terminal.

Opening your text editor from your terminal is a quick, easy way to open up new projects and begin coding faster.

How to Download and Open VS Code

The first thing you'll need to do is open up VS Code. If you don't have VS Code yet, you can download it here. VS Code is a popular text editor created by Microsoft.

Once you have VS Code open, it should look like this:

Next, run Command + Shift + P.

Now you should see this:

What we've done here is opened up the VS Code command palette. This will allow you to customize your VS Code settings, among other things.

Next, into the command palette type shell and hit enter. When you type shell, your editor should look like this:

Once you hit enter, voilà! You're all done. You should now see a success message:

Now you can open VS Code from your terminal. Let's do this now.

How to Open VS Code from the Terminal

First, open up your terminal. You can open your terminal in a few ways. One way of opening your terminal is hitting the command button and the spacebar at the same time. This opens spotlight search. From here, you can type "terminal".

Once your terminal is open, you can open VS Code from it by typing $ code . Then hit enter.

Here's how this should look:

Once you hit enter, VS Code will now open.

And there you have it! Happy coding. :)

In this article, I will show you how to get started with Replit and show you how to use a lot of the basic features.

Here is a list of topics discussed in the article:

• How to create a free Replit account
• What is a Repl and how do you create one?
• Basic features of the Replit editor
• Replit files and folders
• Version control in Replit
• Replit Debugger
• How to install packages in Replit
• Secrets(Environment Variables) in Replit
• How to customize Replit settings
• Replit Database
• How to add Unit Tests in Replit
• How to use the run button in Replit
• How to clear the console in Replit
• What is the Replit shell console?
• How to add a custom domain in Replit
• How to publish your project in Replit
• How to share Replit project URLs
• How to invite others to edit your repls
• What is included with the Replit paid subscription?

How to create a free Replit account

To get started, you will first need to go to the Replit homepage. In the top right hand corner, click on Sign Up.

You can create an account with your own username, email, and password. Or you can create an account using your Google, Facebook, or GitHub account.

Once you are logged in, then it should take you to your account homepage.

What is a Repl and how do you create one?

Repl stands for read-eval-print loop and it is an interactive programming environment for developers to create small projects.

In Replit, there are three places where you can create a new repl.

One way is to click on the Create Repl button located at the top left hand corner of the homepage.

You can also create a repl by clicking on the + icon under the Create section.

The last option is the click on the + icon located at the upper right hand corner.

Then you can choose from one of Replit's many templates including Python, Node, Java, HTML & CSS, Ruby, and more.

Once you choose your language, pick a name for your project.

For the free version of Replit, you are not allowed to create private projects. If you want a private repl, then you will need to upgrade to the paid subscription.

Once you are done naming your repl, click on the blue Create Repl button.

Then you should be taken to the editor.

Basic features of the Replit editor

In this section, I will go over some of the basic features you can use in the Replit editor. These features include a debugger, files and folders, version control, unit tests, and more.

Replit Files and Folders

In the upper left hand corner, you can click on the file icon to add files and folders to your project.

To add a file, click on the Add file icon.

To add a folder, click on the Add folder icon.

If you want to upload files or folders from your computer, click on the three vertical dots icon.

If you need to delete files or folders, then click on the three dots icon located next to the file you want to delete. Then from there, choose the delete option.

You can also right click on the file and you should see the list of options.

Version control in Replit

You also have the ability to connect to your GitHub account and create a repository for this project. At the time of this writing, this feature is currently in beta.

First click on the version control icon on the left hand side of the editor page.

You should then see an option to connect to your GitHub account.

You will be prompted to grant Replit permission to create new repositories on GitHub.

Enter in your login information for GitHub.

If you have multiple accounts linked to your profile, choose the account where you want to install Replit.

You will then need to authorize Replit to install.

After you Install and Authorize Replit, you should be directed back to the Replit editor.

Now all of our changes will be tracked and we can push those changes to GitHub. Write a short commit message and click on the Commit & push button.

You should see all of your commit messages in the version control panel.

Then click on the Connect to GitHub button so you can create a new repository.

You can add a description for the repo and then click on the Create GitHub repository button.

Once it is created, you should see the name of the repository in the version control panel.

You can also see your new repository in GitHub.

Replit Debugger

The Replit editor has a debugger tool, where you can walk through your code step by step to see what is happening and fix errors. This is also a Beta feature.

You can find this feature on the left hand side of the editor page.

How to install packages in Replit

You can also install different packages into your projects like morgan, express or cors using the Packages panel on the left hand side of the editor page.

Search for the package that you want to use and click on the + icon to install it into your project.

Inside the console, which is located on the right hand side of the screen, you should see the package being installed.

Secrets (Environment variables) in Replit

Replit no longer supports creating .env files.

Instead, you will have to use the Secrets tab to store your environment variables. You can find this Secrets icon on the left hand side of the editor page.

You will write the name of your key in the Key input field and write the value in the value input field. Then click on Add new secret.

Then you should see your newly created environment variable in the Secrets tab.

If you need to edit that variable, hover your mouse over the variable name and click on the pencil icon.

Now you should be able to use that environment variable inside your code.

How to customize Replit settings

If you need to customize the editor settings for your project, click on the settings icon on the left hand side of the editor page..

Replit Database

If you want to use Replit's key-value storage, then click on the Database icon on the left hand side of the editor page.

To learn more about how to use the Replit Database, please visit the documentation.

How to add unit tests in Replit

If you need to add Unit tests to your project, click on the Unit tests icon on the left hand side of the editor page.

Then click on the Add test button.

Then you can create your Unit tests by providing a name, the code, and a failure message. Click save when you are done.

This is a screenshot using the Replit example unit tests for adding two numbers:

Then click on the Run tests button.

Inside the console, you will see the tests running with the results.

How to use the Run button in Replit

If you want to start the server for your project, then click on the green Run button located at the top of the editor page.

When you click on the Run button then you should see the results of your code in the preview window and console located on the right hand side of the editor page.

How to clear the console in Replit

If you need to clear out the console, then click on the x icon located at the right hand side of the console window.

What is the Replit Shell console?

If you need to type in commands, such as removing or adding folders, then you can use the Shell console.

How to add a custom domain in Replit

In the preview editor, you can add a custom domain for your project. Click on the pencil icon next to the preview URL.

Then you can add your custom domain and CNAME information:

How to publish your project in Replit

Once you are finished creating your project, then you can publish it and have it displayed in the collection of Replit Apps.

First click on the name of the project, which is located in the top left hand corner.

Then you can provide a short description of the project and click on Publish.

You will then have the option to provide a description, cover image, and tag information. When you are finished, click on the publish button.

If you want to publish an update, then you can click on your project and then click on Publish update.

If you need to unpublish your project, click on the three dots icon to the right of the publish page and choose the unpublish option.

How to share Replit project URLs

If you want to share your project URL, you will first need to click on green Run button followed by the Open in new tab button located in the preview window.

Then you should see your page in a new tab.

If you want to share your URL which contains the editor and preview window, use the link found in the top of the browser.

If you visit the link, you should see this result:

If you need help on a project and want other developers to see your code and files, then you share that browser link. Others won't be able to see your environment variables when you share your project.

How to invite others to edit your repls

Replit has a feature where you can invite other developers to join your project and edit the code.

First, click on the Invite button located at the top right hand side of the editor page.

In the search field, you can add users from replit or add the email addresses of those you want to invite.

Then click on the blue Invite button to send invites for users.

You will see that their invitation is pending.

You can also send out a join link to the user you want to add to the project. Click on the Generate a join link button located at the bottom.

If you need to remove invited users, then click on the x icon located next to their name.

What is included with the Replit paid subscription?

The Hacker paid subscription level comes with more memory, storage, speed and private repls.

The Teams paid subscription level comes with educational projects for students and teachers to work with.

To learn more, please visit Replit's pricing page.

I hope you enjoyed this Replit starter guide and best of luck on your developer journey.

CodePen is only for frontend projects and supports HTML, CSS, and JavaScript. If you need to build a project with a backend component, then you will need to use a different editor.

In this article, I will discuss the following:

• How to sign up for a free account
• Differences between Pens and Projects
• Basic Features of the Pen Editor
• How to fork a Pen
• How to add preprocessors and packages to a Pen
• Basic Features of the Project Editor
• What do you get with the paid subscriptions?
• What are CodePen challenges?

How to sign up for a free account

When you visit the CodePen website, you will be able to login with the following options:

• Twitter account
• Facebook account
• GitHub account

You can also signup with an email address where you will create a username and password.

Once you create the account, you should receive an email from CodePen. Open up that message and verify your email address.

Differences between Pens and Projects

Pens

After verifying your email address, you should be taken straight to the Pen editor. If the editor does not show up, then you can click on Pen located on the left hand side of the homepage.

A Pen editor is broken up into three sections of HTML, CSS and JavaScript.

This editor does not support multiple HTML, CSS and JavaScript files. Pens are great for smaller scale creations.

If you are looking to write more than 5,000 lines of code then you should consider a project instead.

With the free account, you can have as many Pens as you like.

Projects

If you want to create a project, then click on Project, which is located at the top left hand corner of the home page.

A project editor supports multiple HTML, CSS, and JavaScript files.

With the free account, you can only have one project and 10 files. If you are interested in creating more projects, you will need to upgrade to the Pro account.

Basic Features of the Pen Editor

Formatting Options

If you click on the dropdown arrow on any of the three editors, you will see an option to format your code.

This is a helpful tool to ensure that your code is properly formatted and readable by other developers.

You can also go to the Behavior section of Pen Settings, and choose the Format on Save option.

Analyze option

If you click on the dropdown arrow on any of the three editors, you will see an option to Analyze your code.

This is a tool that will help you find and fix errors in your code.

Viewing Options

If you click on Change View, then you can customize the editor layout or switch between the different view options.

Using the console

Located at the bottom left hand corner of the Pen is the console. This is a helpful tool for debugging your code.

Adding links for the head section (HTML)

When you are creating your Pens, you do not have to include the DOCTYPE, html, head, or body tags. All of that information is already built into the editor.

If you need to add links for the head section such as Font Awesome icons or Google Fonts, then you can add those in the head section of the HTML settings.

Adding CSS libraries and frameworks

CodePen has an option in the settings to add CSS libraries and frameworks to your Pens. Some of the libraries and frameworks include Bootstrap, Tailwind CSS, and Bulma.

Adding JavaScript libraries and frameworks

In the JavaScript settings, you can add popular libraries and frameworks such as React, Angular, and Vue to your Pens.

Sharing your Pens on Social Media

If you want to share your Pens on various blogs and social media sites, then you can click on the Share button located at the bottom right hand corner.

Export Pens

If you want to download your work to your computer, then you can use the Export button located at the bottom right hand corner.

This will create a folder of all your files.

Embed Pens into blogs and articles

If you want to show code examples in your blog posts, then you can embed your CodePen creation in the page using the Embed button. This is located at the bottom right hand corner.

How to fork a Pen

To fork a Pen means to create a copy of that Pen. When you fork it, you will have access to all of the code and will be able to modify it to your liking.

First go to the Pen you are interested in forking. Then click on the fork button located at the bottom right hand corner.

Once you fork the Pen, then it will create a copy for your CodePen account. Make sure to hit the save button and you can start modifying the code from there.

How to add preprocessors and packages to a Pen

In CodePen, you have the option to add HTML, CSS, or JavaScript preprocessors as well as NPM packages to your Pens.

In the HTML settings, you can choose from Haml, Markdown, Slim or Pug.

In the CSS settings, you can choose from Less, SCSS, Sass, Stylus or PostCSS.

In the JavaScript settings, you can choose from Babel, TypeScript, CoffeeScript or LiveScript.

You can also add NPM packages such as react-bootstrap to your Pens.

Basic Features of the Project Editor

If you are working on a project that needs multiple files, then you should consider using the Project editor instead of the Pen editor. For the free account, you are allowed one project.

Templates

There are a few template options for HTML and CSS projects as well as React projects.

If you choose to upgrade to the paid subscription, then you will have access to the Tailwind CSS and Bootstrap templates.

Files and Directory

To add a new file or folder, click on the buttons located at the bottom left hand corner.

You can also upload files from your computer using the drag and drop feature located right above the New File button.

You can add a total of 10 files to your project. If you need to add more files, then you will have to upgrade to one of the paid packages.

Sharing projects

If you want to share your completed project on social media or blogging platforms, then you can click on the Share button located on the bottom right hand corner.

Exporting projects

You can also export your project files and download them to your computer, using the Export button located on the bottom right hand corner.

What do you get with the paid subscriptions?

The paid subscription plans offer more CodePen features such as Collab mode, Asset hosting, more templates, and custom domains.

To learn more about the different paid subscription plans, please visit the CodePen PRO page.

What are CodePen challenges?

If you want to practice your frontend skills, then you can participate in the monthly challenges. Each month will have a theme, and you will practice skills with a new challenge each week.

You will also have access to the previous monthly challenges.

I hope you enjoyed this article and best of luck on your frontend developer journey.

It is the default Windows text editor. You can think of Notepad as your VS Code or favorite text editor with fewer capabilities.

Coding with Notepad is great for beginners, because you have no access to syntax highlighting, formatting, and other such automated features.

Without these aides, you'll learn attention to detail, perseverance, resilience, and how to format your code yourself, before you start coding with other text editors like VS Code, Sublime Text, or Atom.

So, in this article, I will walk you through how to use Windows Notepad, and how to open any web page code with it by making a simple website with HTML, a little bit of CSS, and JavaScript.

How to Code a Simple Website in Notepad

You can use Notepad to code in two ways: launch Notepad directly from your Windows machine and start coding and then save the code later, or create the file and open it with Notepad.

In this tutorial, I will focus on the second method, so I’m going to create the files first, then open them with Notepad.

Step 1: Create a folder anywhere on your computer Step 2: On the main menu section of the folder, click on the "View" tab and make sure "file name extensions" is ticked. This will give you access to creating a file and specifying the extension as well.

Step 3: Inside the folder, create an HTML file called index.html, a CSS file called styles.css, and a JavaScript file called app.js.

These names are due to convention. You can name the files whatever you want if you don’t want to follow the conventions.

Step 4: Right-click on the index.html and hover on the “open with” option. This will show apps with which you can open the file. Choose Notepad.

By default, the index.html file will be opened by your default browser, so make sure you don’t double-click the file.

If Notepad is not shown within the options, click “Choose another app”, select “More apps” in the next popup, and you will see Notepad within the apps listed.

Now, you should have opened the HTML file with Notepad. You will see something like this (if you get things right):

Step 5: Paste in the following HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notepad Website</title>
  </head>
  <body>
    <h1 class="page-heading"></h1>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    <p>
      This is a paragraph with some placeholder texts: Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum
      quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos
      modi odit incidunt ut vitae cum maiores.
    </p>

    <strong>This is a bolded sentence</strong> <br>

    <em>This is an italicised text</em>

    <p>
      This is a link to <a href="https://freecodecamp.org">freeCodeCamp</a>, a
      platform where you can learn to code for free
    </p>

    <p>Below is freeCodeCamp logo:</p>

    <img
      src="https://popsql.com/static/external-logos/freecodecamp.png"
      alt="freecodecamp-logo"
    />
  </body>
</html>

Your Notepad app should now be filled with code:

Save the file by pressing Ctrl + S, or go to File and click “Save”.

If your code isn't indented like mine, don’t worry. Notepad doesn’t do it for you automatically, so you have to do it manually.

Step 6: Now the HTML file is ready. Go back to the folder in which you created the HTML, CSS, and JavaScript files in Step 3. Double-click the HTML file to open it in your default browser.

The website should now look like this:

Open the CSS file you created in Step 3 and paste in the following code:

.page-heading {
  color: #2ecc71;
}

If you reload the page, you will see there are no changes. Don’t worry at all. This is because the h1 tag with the class of page-heading in the HTML file is empty.

Now, you can insert some text into that h1 tag dynamically with JavaScript.

Open the JavaScript file created in Step 3 and paste in the following code:

const pageHeadingText = "This is a Simple Website coded with Windows Notepad";
const pageHeading = document.querySelector(".page-heading");

pageHeading.innerHTML = pageHeadingText;

What is the JavaScript code above doing?

I declared a variable called pageHeadingText and set it to a string, “This is a Simple Website coded with Windows Notepad”.

I declared another variable called pageHeading to select the empty h1 tag in the HTML. I did this with the DOM (Document Object Model) querySelector method.

In the third line of the JavaScript code, I used the DOM’s innerHTML method to set the text content of the h1 to the value of the pageHeadingText variable, which I set to “This is a Simple Website coded with Windows Notepad”.

Now, go back to the website and reload it. There’s still no difference. Don’t worry once again. This is because you have to link the CSS and JavaScript files.

To link the CSS file, paste the following code in the head section of the HTML:

<link rel="stylesheet" href="styles.css" />

To link the JavaScript file, paste in the code below right before the closing body tag in the HTML:

<script src="app.js"></script>

The HTML file should now have the CSS and JavaScript files linked like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notepad Website</title>

    <!-- CSS Link -->
    <link rel="stylesheet" href="styles.css" />

  </head>
  <body>
    <h1 class="page-heading"></h1>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    <p>
      This is a paragraph with some placeholder texts: Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum
      quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos
      modi odit incidunt ut vitae cum maiores.
    </p>

    <strong>This is a bolded sentence</strong>

    <em>This is an italicised text</em>

    <p>
      This is a link to <a href="https://freecodecamp.org">freeCodeCamp</a>, a
      platform where you can learn to code for free
    </p>

    <p>Below is freeCodeCamp logo:</p>

    <img
      src="https://popsql.com/static/external-logos/freecodecamp.png"
      alt="freecodecamp-logo"
    />

    <!-- JavaScript Link -->
    <script src="app.js"></script>

  </body>
</html>

If you now reload the page, you should see a difference:

The code in the CSS and JavaScript files is now working.

Conclusion

The Windows Notepad is a text editor just like S Code, Atom, Sublime Text, and others. It just does not have the features of other more advanced text editors like syntax highlighting, text formatting, built-in terminal, and so on. But it still performs all the functions of a text editor as you can code in any programming language with it.

To get more comfortable coding, you can download and install a more feature-rich text editor like VS Code (it's free!). It gives you syntax highlighting, text formatting, and pretty much any functionality you want through a rich library of extensions available in the VS Code marketplace.

Apart from VS Code, other text editors you can use are Atom, Sublime Text, Vim, and Notepad++, a hybrid version of Windows Notepad.

Thank you for reading this article. If you find it helpful, share it with your friends and family.

What is TextEdit?

TextEdit is a free word processor that comes preinstalled with your Mac computer. It has been around for over 25 years and it is an easy way to open and read word files, text files and even HTML files.

How to create an HTML file in TextEdit

1. Go to Finder > Applications > TextEdit. Double click on TextEdit to open.

2. Click on Format and click Make Plain Text.

3. Add a basic HTML boilerplate to your file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TextEdit Demo</title>
  </head>
  <body>
    <h1>This is a demo</h1>
  </body>
</html>

4. Go to File > Save...

5. Name your file with the .html extension. That will tell the computer it is working with an HTML file. Click Save.

6. Click on Use .html

Go to that newly created file on your computer and double click to open in the browser. You should see this result:

How to open HTML documents in TextEdit

There are two ways to open an HTML file in TextEdit.

Option 1

Go to the HTML file you want to open, right click on the file, and choose TextEdit to open.

Option 2

Open TextEdit and click File > Open... You can also hover your mouse over the Open Recent option if you have opened that file recently.

TextEdit's code editing mode

There is an option in TextEdit to always display your HTML files as HTML code.

1. Click on TextEdit > Preferences...

2. Click on Open and Save:

3. Click the checkbox that says Display HTML files as HTML code instead of formatted text:

Now you can make changes to your HTML file and see the results in the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TextEdit Demo</title>
  </head>
  <body>
    <h1>This is a demo</h1>
    <p>Adding more to my demo file</p>
  </body>
</html>

That is how you create, save, open and edit HTML files in TextEdit.

In this article, you'll learn what a code editor and an IDE are. Then I will also share 7 online editors and IDE's that work best with HTML, CSS, and JavaScript.

What is a Code Editor?

A code editor is a tool that is designed to write and edit code. Popular offline code editors include Visual Studio Code, Atom, Brackets, and Sublime Text.

Code editors make it possible for web developers to write programs that will run on the web. Code editors are helpful especially because they highlight syntax errors and provide automatic code indentation, code completion, and other useful features.

What is an IDE?

IDE stands for integrated development environment. You can use this tool as a compiler, editor, and debugger – so it's much more involved than a basic code editor.

A compiler is a program that takes the code you write and translates it into something machines can read. A debugger is a tool that allows you to step through your code line by line and identify issues (bugs) so you can fix them.

Why Choose an Online Editor Over a Local Editor?

When is it a good time to choose an online editor over your local environment like Visual Studio Code?

There may be times where you just want to share a quick working example on Stack Overflow and using a free online editor is a quicker solution than building it locally.

Or maybe you want to share a small working example of a new feature for documentation? It would be easier to place your code into an online editor and share the URL than go through the trouble of deploying the project from your local device.

Now that you know what code editors and IDEs are, let's discuss some of the most popular ones out there at the moment.

CodeSandbox

CodeSandbox is an online IDE and code editor that makes it easy for developers to create and share their projects.

Once you create a free account, you can start coding by choosing one of the templates that comes with all the starter files and boilerplate code.

You can add any files and dependencies you need to on the left hand side and see your results in the preview window on the right.

If you want to share your work, you can copy the URL address or deploy your production app to Netlify or Vercel.

If you are interested in additional features like private NPM packages, sandboxes and GitHub repositories, then you will need to signup for the paid membership.

Replit

Replit is an online IDE that makes it easy to start building and sharing your web creations. Once you login into your free account, you can choose your language and create a new repl.

Replit gives you the option to add files, packages, and unit tests to your projects. If you want to share your projects, then copy the link right above the preview window on the right hand side.

If you want to collaborate with other developers, you can invite them into your repl and code synchronously. You can also chat in real time with the other developers through the chat function on the bottom left hand corner of the screen.

If you are interested in features like private repls and additional storage, then you will need to sign up for the paid membership.

StackBlitz

StackBlitz is an online code editor that makes it easy for developers to create and deploy front end, back end and full stack applications. Login using your GitHub account, and choose from one of the templates.

StackBlitz allows you to create dozens of files, add packages, and connect to your exiting GitHub repositories. You can also share your project using the URL located above the preview window on the right hand side.

If you want to deploy a production version of your application, you can deploy it using Firebase.

If you are interested in additional features like unlimited private projects and file uploads, then you will need to sign up for one of the paid accounts.

Codepen

Codepen is an online editor where you can create and share small frontend creations. With a free account, you can create unlimited pens and one project.

Pens are small creations that contain one HTML editor, one CSS editor, and one JavaScript editor. Pens do not support multiple files.

Pens come with formatting and analyzing tools to check for syntax errors. You can also use CSS and JavaScript preprocessors, add packages, and add external scripts.

The free account allows you to create one project with a limit of ten files. If you want to create more projects, then you will need to sign up for Codepen PRO.

JSFiddle

JSFiddle is an online IDE that allows you to build and share your front end code snippets. This tool supports over a dozen JavaScript libraries and frameworks as well as CSS preprocessors like Sass.

You can also build projects with other developers and correspond over chat by choosing the collaborate option.

JSFiddle is great to use when you need to provide code snippets for Stack Overflow answers, or to use as a demo for documentation.

Glitch

Glitch is an online code editor that makes it easy to create and share your front end, back end and full stack applications. You can signup for free and get started with one of the templates.

Glitch provides many helpful tools including a formatting tool, a terminal, an option to export your projects to GitHub, and an option to add custom domains.

You also have the option to share your work or invite other developers to build alongside you by clicking the share option located at the top left hand corner.

If you are interested in additional features like private projects, then you will need to signup for the paid membership.

PLAYCODE

PLAYCODE is an online code editor that makes it easy to create and share front end projects. PLAYCODE supports TypeScript, React, CoffeeScript, jQuery, Sass, Less, and more.

If you want to share your project, then you can find the shareable links in the top left hand corner of the editor.

If you are interested in additional features including private projects and custom URLs then you can signup for a paid membership.

Conclusion

There are many benefits for choosing an online IDE or code editor. You don't have to worry about downloading any software and you can share your project very easily in a matter of minutes.

A lot of developers will use these tools if they need to share code snippets for Stack Overflow answers, create a demo project for documentation, or share ideas with other developers.

I hope you enjoyed this article.

EditorConfig on its own is just a vendor-agnostic configuration file. It relies on third-party tools or integrations to implement support for the rules declared in the file.

They can be read by IDEs (Integrated Development Environments), code editors, or build tools to enforce or apply formatting conventions.

What Does EditorConfig Solve?

Users usually configure the code style settings in an editor to their preferences. Unfortunately, their preferences probably don't correlate with yours.

What happens when they're contributing to a shared project? This might be a project at work, or an open-source project on GitLab or GitHub.

The user's style settings get applied to the files they modify. This can result in projects feeling inconsistent or messy, with some or all of the following issues:

• Mixed use of tabs and spaces.

• Mixed use of line endings. (Usually not a significant issue with Git.)

• Files may not have the desired character encoding.

• Various indentation sizes across files.

Without consistency, the code can appear untidy and be a pain to read, depending on a user's development environment.

eclipse.jdt.ls mixes tabs and spaces, here's how it looks on GitHub with a tab size of 8.

A common solution is to share editor settings as part of the project, but this assumes all committers are using the same editor as you, which probably isn't the case.

For Java development alone, the following are all popular choices:

• Visual Studio Code (What I use!)

• Eclipse

• IntelliJ

• NetBeans

You'll bloat your project with unrelated files if you add the configuration for every editor someone might use.

So, how about a vendor-agnostic solution where editors are responsible for utilizing a shared configuration instead?

How EditorConfig Helps

Defining conventions helps everyone throughout a project's life-cycle. There are namely three ways it saves time.

EditorConfig Makes Code More Readable

Making code more readable is by far the most important reason to use it. This improves the maintainability of the project, and the speed that people can work.

“Indeed, the ratio of time spent reading versus writing is well over 10 to 1. We are constantly reading old code as part of the effort to write new code… Therefore, making it easy to read makes it easier to write.”
― Robert C. Martin

There are many other reasons someone might be reading the code outside of development too:

• Researchers that need to better understand how the project works.

• Security analysts that are checking for vulnerabilities.

• Technical writers that are documenting application behavior.

People will be able to perform their role more effectively if your code is kept tidy, consistent, and human-readable.

EditorConfig Makes Code Reviews Easier

As a project maintainer, you'll inevitably have to review code contributed by others. They might be a fellow team member, or open-source contributors that discover your project.

Enforcing formatting should be delegated to software. This will make reading and reviewing the code more efficient, and avoids the need to request changes based on formatting.

Reducing the feedback loop ultimately saves everyone time.

EditorConfig Makes Development Easier

Developers can save a lot of headache by having conventions that are automatically applied by their editor.

Without it, they have to find a contribution guide, style guide, or check other code manually to learn project conventions.

Even when the conventions are known, they may conflict with a developer's settings. Then they'll have to code against the editor's automatic formatting, or frequently change settings between projects.

This is especially useful for developers that jump between projects a lot. For example, open-source contributors frequently write code for projects across organizations that follow different coding conventions.

How EditorConfig Works

EditorConfig uses a simple INI-like file named .editorconfig. This file declares rules that will be translated to settings in your editor, or perform formatting over your workspace.

For example, in my editor I use 2-space indentations for XML files, but a project I contribute to might prefer 4-space indentations.

[*.xml]
indent_size = 4

When I open the project, my editor will see the .editorconfig file, and override the settings to suit the project's conventions.

Writing an XML file with my default editor settings. I use spaces for indentation with a size of 2.

Automatically reformatting the file after overriding the XML formatting settings.

How to Use EditorConfig

Depending on your editor of choice, it may have native support for EditorConfig already. There is a list of "No Plugin Necessary" editors on the website, which includes JetBrains IDEs and Visual Studio.

If your editor doesn't have native support, you'll likely be able to add it with a plugin. Editors like Visual Studio Code and Eclipse support it this way, which can also be found on the EditorConfig website under "Download a Plugin".

Once installed, your editor should automatically find the EditorConfig file in your project if it exists, and start applying the rules.

How to Define Rules in EditorConfig

You can find a list of rules on the EditorConfig Wiki. It contains all officially supported rules, as well as proposals for domain-specific rules that may be supported by certain implementations.

Not all implementations support every rule. This is especially true for domain-specific rules like curly_bracket_next_line. It can still be worth declaring these properties anyway for users that can utilize it, or to at least document the preference.

You must set root to true for the top level EditorConfig in the project, which is normally in the root of your project directory.

Additional EditorConfig files can be defined in nested directories, but shouldn't set root to true.

Then you can define a header that selects files, with rules for what to apply to matching files.

# Declares that this is the top-level configuration
root = true

# Applies to all files
[*]
indent_style = space
indent_size = 2

# Applies to all Markdown files
[*.md]
trim_trailing_whitespace = false

# Applies to all C# and Java files, overriding rules declared before
[*.{cs,java}]
indent_size = 4

There are no standard conventions for how to write an .editorconfig file, but there are two notable approaches you can take.

Define Rules Per Project

Just add to it as you need to. This means just defining rules, or appending file formats as your project grows.

You can start by generating the file with your editor, or just create a file named .editorconfig manually. You can copy-and-paste the example from the official website.

Define Rules for All Projects

Alternatively, you can put together all of your preferences and plan the ideal configuration for all files you might interact with.

You can work from scratch, or start with mine and make the necessary adjustments.

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
curly_bracket_next_line = false
spaces_around_operators = true

[*.bat]
end_of_line = crlf

[*.cs]
curly_bracket_next_line = true

[*.{cpp,cs,gradle,java,kt,py,rs}]
indent_size = 4

[*.{js,ts}]
quote_type = single

[*.md]
trim_trailing_whitespace = false

[*.tsv]
indent_style = tab

EditorConfig Rule Recommendations

These are rules I'd objectively recommend declaring, if your project contains the respective file format. It'll help you avoid tedious issues that can occur due to a user's development environment.

Batch

Line endings need to have a textual representation when stored. This is usually something you wouldn't see or have to worry about.

However, different systems use different characters to represent the end of a line. (More Info)

• Unix systems use a line feed. (lf or \n)

• Windows uses a carriage return and line feed. (crlf or \r\n)

Batch files can have unexpected behavior if they end with Unix line endings. You can avoid this by setting end_of_line to crlf to ensure they have Windows line endings instead. (More Info)

[*.bat]
end_of_line = crlf

Markdown

In Markdown, you can write a line break in the current paragraph by adding 2 spaces at the end of a line. (More Info)

You'll want to set trim_trailing_whitespace to false to avoid having your editor remove those spaces when you save.

[*.md]
trim_trailing_whitespace = false

Tab Separated Values

TSV (Tab Separated Values) files are very similar to CSV (Comma Separated Values), but use tabs instead of commas as the column delimiter.

It's very common for developers to have tabs automatically convert to spaces. You should set indent_style to tab to avoid the delimiter from being replaced, otherwise your entire table might become a single column.

[*.tsv]
indent_style = tab

Conclusion

If you're a maintainer, either working in a collaborative environment or in open-source, I strongly recommend adding an .editorconfig file defining the project's conventions to the root of your repository.

Maintainers can then spend more time reviewing clean pull requests that adhere to the style guide, as the editor will automatically start enforcing or applying the conventions.

Committers get a better experience, as the project will override their workspace settings. This reduces the need to reformat code or work against preconfigured editor settings.

And projects will be cleaner, as the conventions will be in a single vendor-agnostic file, rather than editor-specific files that only certain contributors can use anyway.