CÓMO configurar ESLINT y PRETTIER en REACT 🤒 sin romperte la cabeza! 😎 Curso de React desde cero #4

Summary

In this informative video, Pablo explains the setup of ESLint and Prettier, two essential tools for JavaScript development. He clarifies the roles of linting for code quality and formatting for consistent style. The tutorial guides viewers through installing, configuring, and integrating ESLint and Prettier to avoid 'ghost' changes and maintain a uniform coding standard. Pablo also addresses common issues like conflicting rules and provides solutions for a seamless development experience.

Takeaways

• 😀 The video discusses the common challenges faced when configuring a project for irrigation with ESLint and Prettier.
• 🔧 The difference between 'linting' and 'formatting' is explained, with linting focusing on code correctness and formatting on code organization and presentation.
• 💡 ESLint is highlighted as a tool that not only checks for syntax errors but also enforces a consistent coding style.
• 🛠️ Prettier is introduced as a popular code formatter that can be configured to adhere to specific style guidelines.
• 📝 The importance of using a shared formatting and linting configuration across multiple machines or team members to avoid 'ghost' changes is emphasized.
• 👨‍🏫 The video provides a step-by-step guide on installing ESLint and setting up a configuration file with rules using 'eslint --init'.
• 🔄 It demonstrates how to integrate ESLint with an editor to provide real-time feedback on code errors and style issues.
• 📁 The creation of a '.prettierrc' file is shown for configuring Prettier, with options available to customize the formatting style.
• 🔧 The script explains how to resolve conflicts between ESLint and Prettier, such as different preferences for semicolons, by using 'eslint-config-prettier'.
• 📝 The necessity of setting up npm scripts for linting and formatting to streamline the process for all team members is discussed.
• 🚫 The video mentions the need to ignore auto-generated files from formatting in both ESLint and Prettier configurations to prevent unnecessary changes.

Q & A

What are the two main tools discussed in the video script for configuring a project for irrigation?

The two main tools discussed are ESLint (referred to as 'sling' in the script) and Prettier (referred to as 'pretty air').

What is the primary concern of ESLint in the context of coding?

ESLint is primarily concerned with what is being written and the meaning of the code, focusing on syntax and finding errors in the code.

What does Prettier focus on in terms of code development?

Prettier focuses on the organization and presentation of the code, ensuring that the code is well-formatted and presented correctly.

Why might ESLint and Prettier conflict with each other during code development?

ESLint and Prettier may conflict because ESLint is concerned with the meaning and correctness of the code, while Prettier is concerned with the formatting. These different focuses can lead to situations where one tool corrects what the other has formatted.

What is a 'ghost change' in the context of code formatting?

A 'ghost change' refers to changes in the code that are purely formatting changes and do not affect the actual functionality of the code. These changes can occur when different team members have different formatting settings in their editors.

How can ghost changes be avoided in a team project?

Ghost changes can be avoided by using a shared formatting tool with common rules for everyone, ensuring that all team members use the same formatting settings and thus preventing unnecessary formatting conflicts.

What is the purpose of installing ESLint as a development dependency?

Installing ESLint as a development dependency ensures that it only acts while writing code and does not affect the production environment, where it is not needed.

What is the recommended way to configure ESLint settings according to the script?

The script recommends using the 'eslint --init' command, which opens an assistant that asks questions to help configure ESLint settings according to the project's needs.

What is the role of the 'standard' style guide in configuring ESLint?

The 'standard' style guide is a popular choice for ESLint configuration, providing a set of rules that enforce a consistent coding style across the project.

How can ESLint help with code quality apart from syntax errors?

Apart from catching syntax errors, ESLint can ensure that the code follows a consistent style, avoiding issues like unused variables and enforcing the use of the same coding patterns throughout the project.

Why is it important to have a consistent coding style in a large project?

A consistent coding style is important in a large project to avoid confusion and potential errors that can arise from inconsistent coding practices, making the codebase easier to maintain and understand.

What is the recommended way to integrate ESLint and Prettier in a project?

The recommended way is to install and configure both tools with their respective settings and then use a package like 'eslint-config-prettier' to resolve conflicts between ESLint and Prettier rules, ensuring that they work together seamlessly.

How can the script's speaker ensure that ESLint and Prettier do not conflict with each other?

The speaker can ensure no conflict by using the 'eslint-config-prettier' package, which prioritizes Prettier's formatting rules over ESLint's when there is a conflict, thus maintaining a consistent code style.

Outlines

00:00

🛠️ Setting Up ESLint and Prettier for Code Consistency

The speaker, Pablo, introduces the video by discussing the common challenges faced when configuring ESLint and Prettier in a project. He explains the roles of linters and formatters: ESLint focuses on the meaning and correctness of the code, while Prettier is concerned with organization and presentation. The video aims to guide viewers on setting up these tools to avoid conflicts and ensure consistent coding styles across different machines or team members.

05:03

📝 Understanding ESLint and Prettier Configuration

The paragraph delves into the specifics of configuring ESLint and Prettier. It discusses the importance of a shared coding style to prevent 'ghost changes' in a team environment. The speaker recommends using ESLint to enforce a consistent style and Prettier for formatting. The process includes installing ESLint, creating a configuration file, and using the 'eslint --init' command to set up rules. It also touches on the compatibility issues with plugins and the need to update them.

10:04

🔧 Customizing ESLint and Prettier Settings

This section covers the customization of ESLint and Prettier settings. The speaker talks about choosing a popular style guide, such as 'standard', and configuring ESLint to work with different frameworks and environments. It also explains how to set up Prettier to format files according to specific rules, which can be defined in a '.prettierrc' file. The speaker emphasizes the importance of configuring both tools to work together seamlessly.

15:06

🚀 Integrating ESLint and Prettier with Visual Studio Code

The speaker demonstrates how to integrate ESLint and Prettier with Visual Studio Code. This involves installing the ESLint extension, enabling it, and configuring it to work with Prettier. The paragraph explains how to use the 'eslint_d --fix' command to automatically fix code issues and how to set up Prettier to format code on save. It also discusses the importance of configuring the '.editorconfig' file to maintain consistent coding styles.

20:08

🔄 Resolving Conflicts Between ESLint and Prettier

The paragraph addresses potential conflicts between ESLint and Prettier, such as different opinions on semicolon usage. It explains how to resolve these conflicts by installing the 'eslint-config-prettier' package, which prioritizes Prettier's formatting rules over ESLint's. The speaker provides a step-by-step guide on integrating this package into the ESLint configuration to ensure that both tools work harmoniously.

25:08

📖 Finalizing Configuration and Automating Code Linting

The final paragraph wraps up the video by discussing the final steps in configuring ESLint and Prettier. It includes setting up npm scripts for running ESLint and Prettier, as well as automating these processes through Git hooks. The speaker also mentions the importance of ignoring automatically generated files to prevent unnecessary formatting. The video concludes with a reminder to like and support the content for more tutorials on components.

📡 Engaging with the Community for Further Support

In the closing paragraph, the speaker invites viewers to engage with the community for further support. He mentions the social media channels and the regular live streams on Tuesdays and Thursdays at 5 PM for answering questions and doubts. The speaker expresses gratitude for the viewers' support and looks forward to their presence in the next video.

Keywords

💡Linting

Linting refers to the process of analyzing code for potential errors, bugs, and stylistic inconsistencies. In the video's context, it is about using tools like ESLint (referred to as 'sling' in the transcript) to enforce code quality and consistency. The script mentions configuring ESLint to avoid unused variables and enforce a consistent coding style, which is crucial for maintaining clean and error-free codebases.

💡Pretty-printing

Pretty-printing, often shortened to 'pretty' in the script, is the practice of formatting code to make it more readable and aesthetically pleasing. The video discusses using 'Prettier', a popular code formatter, to standardize code formatting across different files and projects. This helps in reducing 'phantom' changes that do not affect the logic but only the appearance of the code.

💡Configuration

Configuration in this script pertains to setting up and customizing the rules and options for tools like ESLint and Prettier. The video explains how to create and modify configuration files (e.g., '.eslintrc' and '.prettierrc') to define coding standards and formatting rules that suit the project's needs.

💡Syntax

Syntax refers to the set of rules that dictate how code should be written in a programming language. The video emphasizes the importance of syntax checking to catch errors early in the development process. ESLint is highlighted as a tool that checks for syntax errors and enforces a consistent coding syntax.

💡Code Style

Code style encompasses the conventions and formatting preferences used in writing code. The video discusses how tools like ESLint can enforce a specific code style, ensuring that all developers on a project adhere to the same standards, which is vital for code maintainability and readability.

💡Unused Variables

Unused variables are those declared in the code but not utilized anywhere. The script mentions ESLint's ability to identify and flag unused variables, which is important for optimizing code and avoiding potential bugs or memory leaks.

💡Formatting Rules

Formatting rules define how code should be structured and presented, including the use of spaces, line breaks, and punctuation. The video explains how to configure Prettier with specific formatting rules, such as the use of single quotes, semi-colons, and object property quotes.

💡Extensions

Extensions, in the context of the video, refer to add-ons or plugins for code editors that enhance functionality. The script discusses installing and enabling ESLint and Prettier extensions in Visual Studio Code to provide real-time feedback on code quality and formatting.

💡Phantom Changes

Phantom changes are modifications made to code that do not affect its functionality but only its appearance, often due to inconsistent formatting rules. The video mentions that using Prettier can help avoid these unnecessary changes, ensuring that version control diffs reflect meaningful edits.

💡Command Line Interface (CLI)

The CLI is a text-based interface used to interact with computer programs, where users can input commands to execute actions. In the script, the CLI is used to install ESLint and Prettier, run linting and formatting commands, and automate tasks through scripts.

💡Version Control

Version control is a system that records changes to a file or set of files over time, allowing developers to track and manage modifications. The video touches on how consistent formatting and linting practices can reduce unnecessary changes in version control systems, streamlining the development process.

Highlights

Introduction to configuring ESLint and Prettier for a project to ensure consistent coding styles and avoid conflicts.

Explanation of the difference between 'linting' which focuses on code quality and 'formatting' which concerns code presentation.

The importance of setting up a shared code style to avoid 'ghost' changes caused by different formatting rules.

How to install ESLint as a development dependency using npm and its role in identifying syntax errors and enforcing code style.

Creating a configuration file for ESLint and the process of setting up rules using the ESLint CLI tool.

Choosing a popular style guide like 'Standard' for ESLint to streamline code consistency across a project.

The process of installing and configuring Prettier to automate code formatting and resolve conflicts with ESLint.

Using ESLint and Prettier extensions in Visual Studio Code to integrate code quality and formatting checks within the editor.

How to resolve conflicts between ESLint and Prettier by setting Prettier to override ESLint formatting rules.

Explanation of how to ignore auto-generated files from formatting to prevent unnecessary changes.

The use of `npm run` scripts to automate the process of linting and formatting all project files.

Addressing common issues like the 'react/jsx-filename-extension' warning and how to configure ESLint to ignore it.

Details on configuring ESLint to work with React and the use of plugins to handle JSX syntax.

How to set up Prettier to work with different file types and the importance of configuring it according to project needs.

The advantages of using a shared configuration for ESLint and Prettier to ensure consistency across multiple development environments.

Finalizing the setup by adding ESLint and Prettier commands to the package.json for easy execution.

The presenter's decision to create the video on ESLint and Prettier configuration due to frequent inquiries from the audience.

Encouragement for viewers to like, share, and support the video for continued content creation on coding topics.

Transcripts

si hay algo que cuando empezamos se nos

suele atragantar bastante a la hora de

configurar nuestro proyecto de riego son

sling y pretty air es decir el inter y

el formato bienvenidos al desarrollo

útil soy pablo y en el vídeo de hoy

vamos a explicar cómo configurar estas

dos herramientas y hacer que funcione

todo correctamente sin que se estén

constantemente tirando los trastos a la

cabeza así que nada vamos con ello lo

primero que nos suele hacer dudar es que

es un inter que es un formato y cuál es

la diferencia entre a pues para mí se

explica muy sencillamente el ínter se

preocupa de qué es lo que estamos

escribiendo qué significado tiene lo que

estamos escribiendo y un formato se

preocupa de la organización y la

presentación es decir de cómo lo estamos

escribe pero muchas veces en el inter y

el formato chocan en ciertas partes y

veremos que eso puede ser problema por

ejemplo venimos aquí y creamos

simplemente const igual a 5 y el propio

l'inter que tiene por defecto este

visual estudio que nos indica que esta

variable está declarada pero que no se

usa nunca aquí nos está preocupando qué

es lo que estamos escribiendo por estar

está bien pero realmente lo que está

haciendo esta línea de código está mal

porque está sin usar pero si por el

contrario ahora empieza a darle aquí

espacios realmente lo que estoy

escribiendo está bien escrito aunque

parece que no pero realmente no tiene el

formato adecuado no está presentado de

la forma correcta entonces para ello el

propio visual también tiene un

formateado por defecto por matt

selection nos lo coloca correctamente el

típico caso de cuando queremos poner

espacios son a raíz de unas veces

ponemos dos otras veces uno otras veces

sin espacios entre las comas y todos

miras y porque tengo que configurar un

formato y un lente divisó el estudio de

los tiempos pues bien la respuesta a

esto es porque en tu proyecto puedes

trabajar desde múltiples máquinas bien

sea tú mismo trabajando desde un

ordenador de sobremesa y un portátil o

bien sea porque tienes compañeros de

equipo que trabajan sobre el mismo

proyecto imagínate el típico caso en el

que yo creamos un array aquí y decimos 1

2 y 3 y en tu editor de código tiene

configurado esto para que sea válido

para que este formato sea el correcto

pero tu compañero lo tiene configurado

sea así cada vez que tu compañero forma

te este documento va a generar cambios

sobre lo tuyo y cada vez que tú lo forma

te vas a generar cambios sobre tu

compañía y esto es lo que se conoce como

cambios fantasma porque realmente no es

un cambio en el código solamente es un

cambio en el formato entonces lo que se

hace para evitar esto es utilizar un

formateado y definir unas reglas comunes

para todos utilizamos todos el mismo

formateado y las mismas reglas y así no

existen estos cambios fantasma y el

ínter por el contrario pues viene muy

bien para asegurarnos de que escribimos

el código correctamente y de que no hay

errores en lo que estamos escribiendo y

no solo errores como tal como una

variable sin usar sino que también nos

fuerza a utilizar siempre el mismo

estilo de código es decir nos fuerza que

hagamos las cosas de una forma concreta

que no hagamos cada vez lo mismo de una

manera y por ejemplo ponemos aquí un gif

a igual

a 5

y aquí escribimos con sol

hola

aquí podemos ponerlo así podemos ponerlo

así

podemos ponerlo también así

como ves hay muchas formas de escribir

lo mismo y todas ellas hacen lo mismo

pero la forma importa es decir en un

proyecto grande y en un proyecto bien

hecho hay que hacer siempre las mismas

cosas de la misma manera para evitar

esos líos de decir ahora pone un y de

una línea y ahora le pone llaves y luego

después no les las pone etcétera

entonces el interno sólo se encarga de

buscar estos errores de sintaxis y todas

estas cosas sino también de asegurar un

estilo de código así que nada vamos a

borrar estas líneas y vamos a empezar

instalando este límite que es lo primero

para instalarlo sobre el proyecto

simplemente npm - de evidentemente es

link

- de porque porque es una dependencia de

desarrollo solo actúa mientras

escribimos nuestro código cuando está en

producción esto ya no hace absolutamente

nada y ahora este sling tenemos que

configurar hay que crear un archivo de

configuración con una serie de reglas

que son las que va a utilizar

evidentemente lo puedes hacer a mano si

te lo recomiendo lo que hay que hacer es

para hacerlo de forma sencilla es

utilizar su propia herramienta mpx sling

- - y con esto nos abre un asistente que

nos irá preguntando ciertas cosas para

ver qué es lo que queremos configurar y

cómo sólo para chequear sintaxis para

chequear sintaxis y encontrar problemas

o para chequear sintaxis encontrar

problemas y asegurarnos un estilo a la

hora de escribir el código esta será la

que utilizaremos

qué módulos vamos a utilizar en el

proyecto import export rico exports o

ningún caso evidentemente import

framework esto ya ríe obviamente utiliza

esta ip script y si o no dependiendo de

si lo estás utilizar nuestro caso no

dónde va a ejecutarse el código en el

navegador en no con el espacio puedes ir

marcando lo

y en nuestro caso evidentemente sólo en

el navegador y estuvieras utilizando un

proyecto de next js que ejecuta código

tanto de clientes como de naut os

tendrías que marcar las dos en nuestro

caso sólo browser y aquí te dice de

dónde quieres partir es decir cuál

quieres que sea tu punto de partida para

esta configuración una guía de estilos

popular o quieres resolver preguntas a

marca te va preguntando quieres esto si

no quieres esto sí o no pues

evidentemente yo siempre recomiendo usar

una guía de estilos popular y en mi caso

la que más me gusta es estándar que es

es de largo la más utilizada y realmente

la que mejor se adapta a mi estilo no

quiere decir que sea la mejor sino que

simplemente pues puedes ir probando

varias y demás ahora veremos en qué

consiste este estándar y por ejemplo

eliges la derby en beat por bueno que

sepas que todo lo que escribas va a

estar mal porque para ir bien vi todo lo

que haces está mal siempre o sea siempre

encuentra alguna forma de criticar tu

código y algo siempre no le gusta y que

oye y quieres instalar el bien perfecto

pero te vas a enfadar y a través o te

vas a enfadar así que nada

elegimos estándar en qué formato quieres

el archivo de configuración

javascript en mi caso oye puedes elegir

quien quieras y aquí nos dice que tiene

una serie de problemas porque es que el

plugin de rayak sólo funciona con sling

7 y ahora mismo estamos en slim 8 x one

estos son cosillas que ya sabéis que

pasan con las dependencias y que quieres

de un grande ar este slim hay que

decirle que sí tristemente porque hace

seis meses que salió esta versión 8 y

todavía no les ha dado tiempo a

actualizarlo

se ve que hoy es un tema bastante

complejo quieres instalar todas las

dependencias que necesitas para esta

configuración con n pm sí y simplemente

esperamos a que termine

perfecto pues ya tenemos nuestro archivo

de sling rc creado pero como vemos aquí

en este main js x no pasa absolutamente

nada

cómo funciona es lo vamos a ir a la

versión más primordial que tenemos lo

más básico dentro de slim y es que aquí

podemos ejecutar nx slim y vamos a

decirle que src barra main punto j s x

y lo que hará será buscar los problemas

dentro de este archivo main punto j s x

y nos los pone aquí todos ellos y aquí

nos dice oye tengo ocho errores que

puedo fijar con la opción menos menos

fix es decir ocho errores que puedo

corregir y ejecutas este comando con

menos menos clics que es justo lo que

vamos a hacer y vamos a ver qué es lo

que nos hace

bien nos ha corregido un montón de

cosillas por ejemplo nos ha puesto en

los streams el single code es la comida

simple en lugar de la doble nos ha

quitado los puntos y comas al final de

la línea etc pero todavía no tenemos una

respuesta visual del editor es decir el

editor no nos está diciendo si está bien

o mal solamente tenemos esta línea de

comandos para ello tenemos una extensión

que es slim yo la tengo deshabilitada

actualmente

slim

fijaos que sea la verificada por

microsoft y como siempre tiene 18

millones de descargas no se instale

ninguna otra que de verdad no merece la

pena en mi caso yo le voy a dar a

habilitar lo caso habría que instalar la

iba a tardar un ratillo está en darse

cuenta

vamos aquí y ahora ya detectamos los

errores que tenemos en el código es

decir ahora ya está el ínter funciona si

le doy para atrás con control z nos

detecta todos los errores y aquí podemos

decirle por ejemplo oye fix este

problema oye vengo aquí lo pongo e ixe a

este problema oye tics el what problema

y sea métodos y así sucesivamente ahora

iremos viendo cómo integrar esto con

todo lo demás de momento voy a cerrar

esta terminal vamos a quitar estos tres

y vamos a ver qué puede pasar con éste

jackman inescop es significa este error

pues evidentemente que esto está

configurado para que por defecto sea

necesario el import react from real

en caso de evite no es necesario esto en

el caso de evite estamos utilizando lo

que se llama el runtime automatic que lo

que hace es que nos transforma estos

hace unos la riac trilita element sino

que utiliza la nueva transformación

desde riad 17 pues no nos interesa tener

que poner este importe action break o

que si no nos dé guerra lo que podemos

hacer en un primer caso es deshabilitar

esta red react barra jack in js x scout

es decir justo lo que tenemos aquí

podemos irnos aquí al slim rc y dentro

de reglas decirle oye

react barra react kim js x scope ponemos

dos puntos y el valor que le queremos

dar hay tres posibles valores a pagar la

regla con un off

ella directamente no nos indica nada

vale

hay otro valor posible que es warning

para que nos marque un word y guardamos

ahora nos marca aquí un warning en h1 y

el tercer valor evidentemente es error

para que nos marque directamente un

error

bien en muchos tutoriales veréis que

esta regla se deshabilita pero la cosa

ha evolucionado bastante desde entonces

y ahora ya hay una forma directa de

hacer esto sin tener ningún problema

venimos aquí simplemente borramos esta

regla y añadimos aquí un plugin

dos puntos react

js x runtime

esto es básicamente lo mismo pero ya

viene preconfigurado de preguntas de

donde me he sacado esto pues del git hub

del slim plugin real

todo esto al final viene explicado

dentro de su configuración esta es la

forma correcta de deshabilitar ese error

ahora aquí en rules simplemente

podríamos decirle cosas como vengo aquí

digo oye cons a igual a 5 me marca un

error de variable sin usar

el punto y coma para que no llore no un

giuseppe bars farc por vengo aquí digo

oye yo con las variables sin usar quiero

que sea no a new ser

bars pero quiero que sea un warning work

por mira cuando declara una variable y

no la utilice ahora me sale un word de

esta forma se configura aquí cada uno

configurará lo que más le guste hay que

entender eso en cada proyecto en cada

equipo etcétera pues hay unas reglas que

se configuran como error otras que se

configuran como warning y otras que se

ignora

de todas maneras no vamos a hablar sobre

esto todavía y sobre los puntos y comas

porque vienen pri tierra

hasta ahora simplemente esto nos servía

para asfixiar estos pequeños problemas y

para revisar nuestra sintaxis para

quitar esto porque para mí si es un

error no utilizar las variables vamos a

ver la otra de las herramientas que

tenemos y es el formateado el formatear

más famoso que existe actualmente es

pretty y probablemente ya todos lo

conoceréis entonces simplemente vamos a

instalarlo y vamos a ver los problemas

con sleep n pm - de twitter

y aquí sucede más o menos lo mismo que

con el lector

podemos venir y decirle en fx richter el

archivo que queremos en este caso

formatear main punto

js x y si lo ejecutamos nos lo formatea

y nos devuelve su versión formateada por

la consola simplemente es lo que podemos

hacer es periciar - - wright

para escribirlo efectivamente para que

modifique el archivo como tal y aquí es

donde viene el mayor problema que suele

tener todo el mundo richard me pone en

puntos y comas british me ponen las

comillas dobles slim me dice que los

quite qué hacemos con todo esto como

podemos configurar bien vamos a empezar

con la forma más básica dentro del

proyecto y es irnos la configuración de

pretty crear un archivo en este caso

punto

british rc que es que ya tiene aquí el

icono también e irnos a la web de peter

y ver qué reglas podemos poner

aquí desde la web de prípiat nos vamos a

dobbs y en la sección de configurar

pretty vamos a ver las opciones que

tenemos nos dice aquí obviamente que

configuration fire podemos crearla en

todos estos formatos yo siempre

recomiendo pri tierra reset que es un

jason y es bastante sencillito que para

lo que es la configuración nos vale de

sobra y aquí tenemos una serie de

opciones que podemos configurar el width

por ejemplo que es el largo de la línea

y nos da un valor por defecto que es lo

que trae pretty de base cómo hacer el

overdrive como sobreescribir esta

configuración cuando lo ejecutemos por

terminal y lo que nos interesa ahora

como sobreescribir la en este archivo de

configuración aquí tenemos que poner

print with y un int

pues con todo esto vamos a ponerlo uno

al lado del otro y vamos a ir

configurando lo rápida

bien pues aquí hay que ir configurando

en formato jason todas estas propiedades

el print uy por ejemplo 80 para mí me

van gente que lo pone a 100 a 120 en

este caso como yo estoy utilizando un

zoom enorme si lo pongo a 120 al final

realmente no me entra en la pantalla así

que lo voy a dejar en 80 y aquí vamos a

ir abriendo debate cup with bare

surtrapps es decir utilizar dos espacios

por defecto para el tap weight hay

gentil utiliza cuatro y hay algunos como

nosotros que utilizamos tap

caps dos puntos

trump

de mi colors quieres utilizar el punto y

como al final de la línea sí o no te

preocupes por slim que ahora veremos

cómo pegarnos correcto de momento tú

pone aquí lo que más te guste en este

caso la regla es semi y le podemos poner

falls si queremos que no lo ponga en

este caso como nosotros yo sí utilizó

punto y coma lo siento vale yo lo voy a

dejar

coats en mi caso sí sin el cual es una

opción que me interesa bastante en

single por dos puntos group que más

tenemos aquí aprox en este caso es cómo

poner los objetos cuando un objeto

necesita ponerse entre comillas porque

hay alguna propiedad que por ejemplo es

con guión pues qué quieres que haga y

sólo cuando las necesite y sea

consistente es decir si las pone siempre

que se pone una se pone en todos o si no

que lo preserven tal y como lo tiene mi

caso lo voy a dejar por defecto porque

está bien o está es xbox como utilizar

las comillas pero esta vez para js x

otra es x englewood y ponemos unas

lógico sería que pusiéramos las otras

group training comas que son las 35 más

si nos vamos aquí cuando acabamos un

objeto en la última de propiedad ponerla

com porque se ponen las 35 más pues

básicamente para poder hacer esto y

reordenar lo en que nos falle esa última

coma podemos ponerle non para que no lo

haga nunca o para que lo haga siempre o

aquí para que eso no lo haga en ese 5

con los objetos arrays etcétera en mi

caso lo voy a dejar en ese 5 porque esta

vez

bracket spacing si queremos espacios en

nuestros objetos a la hora de declarar

los si queremos este espacio de aquí

efectivamente yo lo quiero como esta

bracket line para cuando tenemos que

escribir js x etiquetas si hay varias

líneas al final que hacemos con este

carácter de aquí y lo saltamos a la

siguiente línea o no de momento yo lo

voy a dejar en que no pero puedes poner

lo que quieras ep kate en esto ni me

interesa

arrow función paréntesis poner siempre

paréntesis las arrow función o intentar

evitarlos cuando no sea necesario a mí

esto me da bastante rabia así que le voy

a decir que intente evitarlos en la

medida de lo posible

puntos a voy

el range el par ser file pad rico aipr a

gmac y todo esto que viene por aquí

debajo es raro que lo tengamos que tocar

como mucho este en of fire que por

defecto es el que tiene que ver con

windows y con linux yo no suelo dejar en

el f es como trabajar git y compañía así

que nada por lo demás ya hemos terminado

de configurar este principio te digo tú

puedes poner las configuraciones que a

ti más te guste

ahora guardamos y cómo hacemos para

formatear con pretty pues evidentemente

tenemos que hacerlo igual que con sling

activando la extensión de british

activando o instalando una evidentemente

caso activa

bien ya la tengo activada y ahora me voy

aquí y le digo a esto oye botón derecho

formato document with

with y aquí te permite gritar o el por

defecto puedes decirle configure the

fall for matter para estas le decimos

que british y ahora ya cada vez que

guardemos

nos lo forma te hará con pretty por qué

funciona esto de que cada vez que

guardas menos formatea o sencillamente

porque tengo aquí en extensiones de

tings tengo el formato on 6 te

recomiendo que lo pongas editor formato

no sé si lo habilita cada vez que

guardes te va a formatear en este caso

le pones aquí fight todo el documento y

si no el resto pues sobre las

modificaciones pero las modificaciones y

hay disponibles yo esto si lo vas a

poner ponlo en fine vale lo coloque

trabajamos casi todos y casi siempre

vale volvemos aquí y ahora tenemos un

problema en pretty hemos dicho que

puntos y comas y en slim le hemos dicho

que no cómo podemos hacer para

solucionar estos conflictos y que nos

funcione todo correctamente pues para

ello no hay que hacer ningún tipo de

magia extraña simplemente hay que

instalar un paquete simplemente es eso

npm y menos de slim y on config con

british

quédate con este paquete no instales

ninguna de por ahí de un plugin

que encontrado de no sé que esto es lo

oficial en la web te lo recalca no

instales ninguna otra cosa de verdad no

te metas con historias raras que luego

no son compatibles o utilizan otro

formateado no con esto nos vale y vas a

ver que es tan sencillo como venir aquí

coges esto de aquí lo copias y bienes al

sling rc y lo pegas aquí

slim con fit pretty para los guardas

aquí y ahora ya directamente se queda

con las reglas de pretty a por encima de

las de slim es decir donde haya una

confusión entre player y slim se queda

con lo de pretty ya está pin no hay que

hacer absolutamente nada más la mucha

gente se lía aquí que si no sé que no

con esto te sobra no necesitas

absolutamente nada más y ya tenemos

configurado nuestro british y nuestro

sling de una forma súper súper sencilla

es lo último que tenemos que hacer pues

dejar unos comandos configurados en

nuestro pacas jason para hacer este link

y este formato porque puede haber

cualquier otra persona que no utilice

estas extensiones de visual o no lo

tenga configurado así y siempre hay que

dar una opción extra para poder hacerlo

desde terminar además que todo esto

luego se utilizará para las

automatizaciones de git y demás que ya

veremos bastante más adelante cuando

tratemos todo este tema entonces nos

vamos a ir al pack a jason de caso

y vamos a crear los comandos de link y

de forma forma los puntos y vamos a

decirle en este caso pretty

- wright de punto pero aquí quiero que

veas una cosa o guardar aquí antes de

ejecutarlo

y vamos a ver que si ejecutamos n px

british menos menos qué punto nos dirá

los archivos sobre los que afectaría

este comando

entre los cuales encontramos dist por

supuesto no queremos que nos lo forma t

esto es un vanden y realmente sería una

locura volver a formatear la de nuevo no

tiene sentido en donde es para ello

igual que en git hay que configurar un

punto

primer ignore

y aquí en formato ghitis nor le decimos

que no nos toquen los archivos

autogenerados the beast ni tampoco el

back at your blog punto jason

porque los autos generados no hay que

formatear los evidentemente

y te preguntarás aquí y él no hay

módulos no hay que ignorarlo ya lo smara

por defecto

y lo mismo ya que estamos hay que

hacerlo para el slim punto sling irna

y en este caso solamente hay que excluir

diste ya que slim no es un líder para

todo tipo de archivos sino sólo para js

y js x en este caso no hay que excluir

el paquete flow porque no es ninguno de

estos dos tipos de archivo así que nada

guardamos aquí y ya lo tenemos y ahora

sí podemos terminar la configuración

aquí podemos decirle critter - - raid

punto y en el link

podemos decirle

slim

- menos tics de punto

pero aquí hay que indicarle qué archivos

queremos que lindo esto es algo que ha

cambiado las últimas versiones y hay que

hacerlo así extensiones

puntos otra s coma punto js x y aquí si

tuviera esta ip script ps ips

con estos dos comandos ya podemos

venirnos aquí y ejecutar en el rack

forma

para formatear absolutamente todos los

archivos y rpm run link para hacer

lindín sobre todos ellos

como último caso react versión no te

específica en slim plugin react es un

warning que nos da este slim plugin rial

y que se soluciona aquí en el sling

poniendo una configuración

settings dos puntos riac dos puntos

versión puntos y de test

de dónde te ha sacado todo esto mira

aquí ya te lo está poniendo de git hub

puntocom slim plugin ríe evidentemente

hay que leer estos archivos y bucear un

poco una vez que tengamos esto

ya tenemos snpm run link funciona y

ahora ponemos por ejemplo uno creo que

vamos a ponerle aquí

4

y vamos a ponerle click a 4 nos dirá

este link que no está en camel case por

ejemplo guardamos aquí le damos al link

y nos lo identifica perfectamente lo que

pasa que aquí en este caso no lo puede

fix ya la mano tienes que fijarlo

evidentemente hay cosas que el link no

sabe cómo corregir automáticamente

bueno pues creo que ya lo tenemos creo

que no ha sido para tanto

quiero deciros que he hecho este vídeo y

no el de los componentes que es el que

tenía pensado crear porque al final me

habéis estado preguntando constantemente

por este sling por este pretty air cómo

se configura lo hemos estado también

viendo en los directos de tweets y creo

que ayuda bastante y por lo menos lo

sabéis configurar así que os lo he

dejado por aquí y en el próximo si o si

empezamos con los componentes si os ha

gustado este vídeo como siempre os

agradecería mucho vuestro like y que me

deja así es aquí un pedazo de su que nos

apoya muchísimo para seguir creando

contenido y como siempre recordaros que

os dejo por aquí nuestras redes sociales

que hacemos directo todos los martes y

jueves a las 5 de la tarde y que podéis

pasaros por allí para responder

cualquiera de vuestras dudas y que nada

nos vemos en el próximo