💅🏻If you're beautiful, follow this JS Code Style
Pulkit Singh
Posted on January 1, 2023
Summary 📑
- Soft tabs with two spaces
- Never use semicolons
- Always use single quotes
- Keep
elsein the same line of closure of theif - Add spaces between operators
- Avoid single letter names
- Use lowerCamelCase
- Use the === operator
- Add spaces outside parentheses
()but avoid it inside - Use function expressions instead of function declarations
- Anonimous function
- Ternary operator single line only
- Don't be dumb with ternary operator
- Use
constfor all of your references, avoid usingvar - If you must reassign references, use
letinstead ofvar - Declare one
constorletper declaration statement - Use the literal syntax for
objectcreation - Use the literal syntax for
arraycreation - Declare
arrayitems in list - Function arguments indentation
- Method chaining
- Any non-trivial conditions must be assigned to a variable or function with a descriptive name
- Try to write comments that explain higher level mechanisms or clarify difficult segments of your code
- Don't use comments to trivial things
- References
Soft tabs with two spaces
Eslint: indent
- Wrong:
if (true) {
console.log('True')
}
- Correct:
if (true) {
console.log('True')
}
Never use semicolons
Eslint: semi
- Wrong:
if (true) {
console.log('True');
}
- Correct:
if (true) {
console.log('True')
}
Always use single quotes
Eslint: quotes
- Wrong:
if (true) {
console.log("True")
}
- Correct:
if (true) {
console.log('True')
}
Keep else in the same line of closure of the if
Eslint: brace-style
- Wrong:
if (true) {
console.log('True')
}
else {
console.log('False')
}
- Correct:
if (true) {
console.log('True')
} else {
console.log('False')
}
Add spaces between operators
Eslint: space-infix-ops
- Wrong:
for (i=0;i<10;i++) {
...
}
- Correct:
for (i = 0; i < 10; i++) {
...
}
Avoid single letter names
Be descriptive with your naming. Eslint: id-length
- Wrong:
function q() {
...
}
- Correct:
function query() {
...
}
Use lowerCamelCase
Eslint: camelcase
- Wrong:
let is_error
- Correct:
let isError
Use the === operator
Eslint: eqeqeq
- Wrong:
const example = 'Is a example'
if (example == 15) {
...
}
- Correct:
const example = 'Is a example'
if (example === 15) {
...
}
Add spaces outside parentheses () but avoid it inside
Eslint: keyword-spacing
- Wrong:
if(condition){
...
}
- Correct:
if (condition) {
...
}
Use function expressions instead of function declarations
Eslint: func-style
- Wrong:
function foo() {
}
- Correct:
const foo = function () { }
When you must use function expressions (as when passing an anonymous function), use arrow function notation
Eslint: prefer-arrow-callback
- Wrong:
[1, 2, 3].map(function (x) {
const y = x + 1
return x * y
})
- Correct:
[1, 2, 3].map((x) => {
const y = x + 1
return x * y
})
Ternary operator single line only
The ternary operator should be used on a single line.
- Wrong:
const foo = (condition)
? 1
: 2
- Correct:
const foo = (condition) ? 1 : 2
Don't be dumb with ternary operator
Disallow ternary operators when simpler alternatives exist. Eslint: no-unneeded-ternary
- Wrong:
const isYes = answer === 1 ? true : false;
- Correct:
const isYes = answer === 1;
Use const for all of your references, avoid using var
Eslint: prefer-const
- Wrong:
var foo = 'bar'
- Correct:
const foo = 'bar'
If you must reassign references, use let instead of var
Eslint: no-var
- Wrong:
var count = 1
if (condition) {
count += 1
}
- Correct:
let count = 'bar'
if (condition) {
count += 1
}
Declare one const or let per declaration statement
Eslint: one-var
- Wrong:
const foo = require('./bar'),
foo = require('./foo')
- Correct:
const foo = require('./bar')
const foo = require('./foo')
Use the literal syntax for object creation
Eslint: no-new-object
- Wrong:
const foo = new Object()
- Correct:
const foo = {}
Use the literal syntax for array creation
Eslint: no-array-constructuor
- Wrong:
const foo = new Array()
- Correct:
const foo = []
Declare array items in list
>= 4 arguments: indent. Eslint: array-element-newline and array-bracket-newline
- Wrong:
const foo = [
'hello', 'world'
]
const foo = ['hello', 'world', 'lore', 'impsum']
- Correct:
const foo = ['hello', 'world']
const foo = [
'hello',
'word',
'lore',
'impsum'
]
Function arguments indentation
>= 4 arguments: indent (excerpt callbacks brackets). Eslint: function-paren-newline
- Wrong:
const foo = (
'lore',
'impsum'
) => {}
const foo = ('carls', 'farls', 'karen', 'logan') => {}
foo.bar(
'string',
() => {
statements
}
)
- Correct:
const foo = ('lore', 'impsum') => {}
const foo = (
'carls',
'farls',
'karen',
'logan'
) => {}
foo.bar('string', () => {
statements
})
Method chaining
Eslint: newline-per-chained-call
- Wrong:
user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
user.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
- Correct:
user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
Any non-trivial conditions must be assigned to a variable or function with a descriptive name
- Wrong:
if (password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)) {
...
}
- Correct:
const isValidPassword = password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)
if (isValidPassword) {
...
}
Try to write comments that explain higher level mechanisms or clarify difficult segments of your code
- Wrong:
const foo = "var(--bar)"
// Regexp
if (foo.replace(/var\(/, "").replace(/\)/, "") === "--bar") {
...
}
- Correct:
let foo = 'var(--bar)'
let value = foo
.replace(/var\(/, '') // Remove the 'var('
.replace(/\)/, '') // Remove the ')'
if (foo === '--bar') {
...
}
Don't use comments to trivial things
- Wrong:
// Create the passwors
const password = 'carls1234'
- Correct:
const password = 'carls1234'
References
Project inspired by valle-style-guide
💖 💪 🙅 🚩
Pulkit Singh
Posted on January 1, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
javascript Goodbye Exceptions! Mastering Error Handling in JavaScript with the Result Pattern
November 22, 2024
