Skip to content
← Back to Community
Code Formatting
Profile icon
h
has Hacker Plan
MrEconomical

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
Electrical
Profile icon
ShaziaKamboh
Profile icon
tensagr
Profile icon
EllieLi1
Profile icon
JadeMohan
Profile icon
JonasDielin
Profile icon
BotsBoots
Profile icon
JorgeAugustoAug
Profile icon
anikapadmasola
Profile icon
Vandesm14
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
AdCharity

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

image

Profile icon
MrEconomical
Profile icon
AdCharity

@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.

Profile icon
MrEconomical
Profile icon
AdCharity

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

Profile icon
MrEconomical

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

Profile icon
AdCharity

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

Profile icon
theangryepicbanana

@AdCharity that's why tabs are better

Profile icon
[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

Profile icon
AdCharity

@TaylorLiang its just readability (most of the time)

Profile icon
[deleted]

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

Profile icon
AdCharity

@TaylorLiang eh it kind of ended already

Profile icon
[deleted]
Profile icon
mwilki7

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

im a bit of an alignment freak

Profile icon
AdCharity

@mwilki7 tabs reign spaces can go die

Profile icon
[deleted]
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.