Learn to Code via Tutorials on Repl.it!

← Back to all posts
Code Formatting
h
MrEconomical (2197)

why tho

One of the things I hate most about programming is messy code. For example:

seems legit

Indenting

Indenting is a big problem in some people's code, as seen in the example above. Bad indenting makes code look ugly and unreadable. The standard indent is 4 spaces, but if you can pick your own indent size (it's not that important of a convention anymore). The important thing to remember is to always be consistent with tab size and indent your code properly.

function myFunction() {
    // 1 indent inside of a function
    for (blah blah blah) {
        // 1 more indent whenever inside another layer of brackets basically
    }
}

Spacing

Spacing is how you put spaces in the code itself. Just as important as indenting is good and consistent spacing. Again, it's all up to you but I like to space my code like this:

a=b+c
a = b + c
// Space between operators to make it look nicer not cramped
function a() {
    // Space after closing parentheses and bracket
    // If you haven't noticed space after comments (commenting later)
}

Variable and Function Naming

A very important part of code formatting is how you name your variables and functions. It might not seem like a very big deal, but naming variables names that make sense often makes code easier to read and debug.

One common thing that people do is name all of their variables in for loops i. You don't actually need to name it i because it is just a normal variable. Name it whatever makes sense to the thing you are iterating through.

When picking a variable name, keep in mind the case you are using. There are two main ways to name variables, camelCase and snake_case. Everybody has their own preferences and I prefer naming my variables using snake_case. Pick a case, and stick to it throughout all of your code. Be consistent with your naming conventions.

Commenting

Not many people comment in code. I have no idea why, I do it all the time and it is very helpful. Commenting is important for easy-to-read code, whether you forgot how one part works or if somebody else is trying to understand your project. It also makes code look better imo

Always make your comments about what the code does and not how it works. Example:

// Bad
// Get end of file name split by "."
// Good
// Get file extension

Also always comment in the imperative tense, Get file extension and not Gets file extension.

Now since you have read this tutorial, you are a god at formatting good job

cough cough @AtticusKuhn cough cough

Commentshotnewtop
AtticusKuhn (236)

This code looks strangely familiar...

ArthurWu (1)

@AtticusKuhn who knows where it came from

V3rmillionNet (53)

@AtticusKuhn

It's clear you are not the best at formatting. Don't worry, haha.

SixBeeps (2377)

Thank you for writing this, I've seen wayyyy too many lines of code that just make me cringe at the (lack of) formatting.

AdCharity (1264)

well... although sometimes it may not appear...

AdCharity (1264)

@MrEconomical lmao but yes I agree code formatting is important for the user and any (good) hackers that come by in terms of readability and easier debugging. It's just good practice.

AdCharity (1264)

@MrEconomical how long did it take for you to write this... anyways you can always press the tab button cause repl supports tabs :D

MrEconomical (2197)

@AdCharity when you tab its actually putting 4 spaces there unless you change it to tabs but spaces > tabs

AdCharity (1264)

@MrEconomical wut spaces are too large for my brain to comprehend

[deleted]

@theangryepicbanana well it depends. On python, tabs are better, along with other languages like lua. C or C++ is compiled, so indentation does not matter

AdCharity (1264)

@TaylorLiang its just readability (most of the time)

[deleted]

@AdCharity yeah, but im just trying to stop a holy war

AdCharity (1264)

@TaylorLiang eh it kind of ended already

mwilki7 (996)

tabs are not consistently spaced across the programs i use so i replace tabs with spaces

im a bit of an alignment freak

AdCharity (1264)

@mwilki7 tabs reign spaces can go die

Nettakrim (367)

the real strat is to have everything on one line

mwilki7 (996)

and make it nicely spaced out

tileset.push({"name":"PLANT_TREE_LARGE_LEFT_TRUNK"      , "x":800, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_LEFT_BRANCHES"   , "x":800, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_LEFT_LEAVES"     , "x":800, "y":448, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_TRUNK"    , "x":832, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_BRANCHES" , "x":832, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_LEAVES"   , "x":832, "y":448, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_TRUNK"     , "x":864, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_BRANCHES"  , "x":864, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_LEAVES"    , "x":864, "y":448, "width":32, "height":32 });

vs

tileset.push({"name":"PLANT_TREE_LARGE_LEFT_TRUNK", "x":800, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_LEFT_BRANCHES", "x":800, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_LEFT_LEAVES", "x":800, "y":448, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_TRUNK", "x":832, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_BRANCHES", "x":832, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_MIDDLE_LEAVES", "x":832, "y":448, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_TRUNK", "x":864, "y":512, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_BRANCHES", "x":864, "y":480, "width":32, "height":32 });
tileset.push({"name":"PLANT_TREE_LARGE_RIGHT_LEAVES", "x":864, "y":448, "width":32, "height":32 });
SixBeeps (2377)

@mwilki7 I have never seen or used that before, but I might just have to at some point :)

ipastrano (245)

Some people also use kebab-case!

LiamDonohue (280)

im guilty looks like the cops are coming for me lol

LiamDonohue (280)

seems legit
Now since you have read this tutorial, you are a god at formatting good job

bfry100 (0)

there is an auto format right next to the saving icon but ok

SBCKing (10)

With ides like pycharm the ide will throw a bunch of errors in red on the right hand side for indentation problems. the program will still run but the big red font basically forces you to format your code properly. nothing beats the sweet satisfaction of having no red or yellow dashes beside your program with that big green tick.