Skip to content
Sign upLog in
← Back to Community

Code Formatting

Profile icon
eco27Hacker

why tho

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

Screen Shot 2019-12-31 at 9.03.17 AM

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

Voters
Profile icon
bintang-nugrahaa
Profile icon
AKclown
Profile icon
brainiac104
Profile icon
JheinyGil
Profile icon
PatriciaCastil2
Profile icon
ErrorbotTHE2nd
Profile icon
Electrical
Profile icon
ShaziaKamboh
Profile icon
tensagr
Profile icon
EllieLi1
Comments
hotnewtop
Profile icon
AtticusKuhn

This code looks strangely familiar...

Profile icon
ArthurWu

@AtticusKuhn
who knows where it came from

Profile icon
Shigetorum

@AtticusKuhn

image

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

Profile icon
SixBeeps

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

Profile icon
bfry100

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

Profile icon
Nettakrim

the real strat is to have everything on one line

Profile icon
mwilki7

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 });
Profile icon
SixBeeps

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

Profile icon
oignons

Some people also use kebab-case!

Profile icon
staticvoidliam7

im guilty looks like the cops are coming for me lol

Profile icon
staticvoidliam7

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

Profile icon
SBCKing

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.