Este artículo trata sobre las reglas básicas de código que deben seguirse al escribir sus proyectos. Puede ampliarlos y modificarlos para adaptarlos a su proyecto y sus necesidades.

¡Disfruta leyendo!

1. No use el valor predeterminado de exportación

Puedes leer más información al respecto en este artículo

// bad 
export default formatUserName
// good 
export { formatUserName }

No llame a sus variables con nombres oscuros e intente ceñirse a un patrón para cada tipo de variable. Por ejemplo, las clases siempre comienzan con una letra mayúscula, las constantes siempre se escriben en mayúsculas.

// bad 
const HOURS_IN_DAY = 24
const minutesInHours= 60

const songs = ["Ophelia", "Drag", "Pieces"]
const Artists = ["The Lumineers", "Day Wave", "Sum 41"]

function savePassword() {}
function restore_password() {}

class transport {}
class Car {}
// good 
const HOURS_IN_DAY = 24
const MINUTES_IN_HOURS = 60

const SONGS = ["Ophelia", "Drag", "Pieces"]
const ARTISTS = ["The Lumineers", "Day Wave", "Sum 41"]

function savePassword() {}
function restorePassword() {}

class Transport {}
class Car {}

No hay diferencia entre ellos. Pero en mi opinión, Boolean() es más legible y comprensible cuando examinamos el código.

// bad 
const isVisible = !!counter
// good 
const isVisible = Boolean(counter)

Si hay alguna función/componente/etc., que devuelve nulo, debe escribirse desde el principio para una mejor legibilidad y comprensión de la lógica de una parte particular del código, para que no sea una situación en la que lee una función y al final resulta que en nuestro caso devuelve nulo. Como resultado, se perdió mucho más tiempo que si la función se escribiera desde el principio.

// bad 
const formatPrice = (price) => {
  ...
 if (!price) return null
 ...
}
// good 
const formatPrice = (price) => {
  if (!price) return null

  ...
}

No convierta sus funciones en funciones con muchos argumentos, esto puede generar errores y malas consecuencias. En su lugar, pase los argumentos como un objeto.

// bad 
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true)
// good 
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
})

Use las funciones de ES6, le facilitan a usted y a otros desarrolladores comprender y escribir el código en sí.

const spiderman= 'Peter Parker'

// bad 
const superhero = {
  spiderman: spiderman,
}
const spiderman = 'Peter Parker'

// good 
const superhero = {
  spiderman,
}

Las funciones de ES6 facilitan el código :)

// bad 
const getFullName = (user) => {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}
// good 
const getFullName = (user) => {
  const { firstName, lastName } = user

  return `${firstName} ${lastName}`
}

// best 
const getFullName = ({ firstName, lastName }) => {
  return `${firstName} ${lastName}`
}

Creo que todo el mundo ha tenido casos en los que empiezas a revisar el código y ves variables como "v", "i", "tgd" y no puedes entender de qué son responsables. Entonces, para evitar este tipo de situación ni con usted ni con las personas que leerán su código, llame a sus variables y funciones de acuerdo con su propósito.

// bad 
const yyyymmdstr = moment().format("YYYY/MM/DD")

// What the heck is 60000 for?
setTimeout(turnOff, 60_000);

function addToDate(date, month) {
  ...
}

const date = new Date()

// It's hard to tell from the function name what is added
addToDate(date, 1)
// good 
const currentDate = moment().format("YYYY/MM/DD")

// Declare them as capitalized named constants.
const MILLISECONDS_PER_MINUTE = 60 * 1000; //60_000;

setTimeout(turnOff, MILLISECONDS_PER_MINUTE);

function addMonthToDate(month, date) {
  ...
}

const date = new Date()
addMonthToDate(1, date)

Esto mejorará la legibilidad y la comprensión de los accesorios.

// bad 
<Component isVisible={true} />
// good 
<Component isVisible />

Use los tipos que el equipo de React le brinda para los tipos. Te ayudan a escribir código con mayor precisión.

// bad 
const Component = ({ title, isVisible }: Props) => {

  return ...
}

// very bad 
const Component = ({
  title,
  isVisible,
}: {
  title: string;
  isVisible: boolean;
}) => {
  return ...
};
// good 
const Component: FC<Props> = ({ title, isVisible }) => {

  return ...
}

// bad 
const Component = (props) => {
  const { title, isVisible } = props

  return ...
}
// good 
const Component = ({ title, isVisible }) => {

  return ...
}

Estas reglas básicas para escribir código JS limpio se pueden complementar y cambiar sin cesar. Estaré encantado de recibir sus comentarios y también si tiene alguna adición a las reglas, por favor compártala. ¡Escribe el código correctamente!