CÓMO configurar ESLINT y PRETTIER en REACT 🤒 sin romperte la cabeza! 😎 Curso de React desde cero #4
Summary
TLDRIn 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
🛠️ 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.
📝 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.
🔧 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.
🚀 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.
🔄 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.
📖 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.
Mindmap
Keywords
💡Linting
💡Pretty-printing
💡Configuration
💡Syntax
💡Code Style
💡Unused Variables
💡Formatting Rules
💡Extensions
💡Phantom Changes
💡Command Line Interface (CLI)
💡Version Control
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
Посмотреть больше похожих видео
You're (Probably) Using Prettier Wrong
These VS Code Extensions made me a 10x developer 🔥🔥
My Top 5 VSCode Extensions for React and NextJS!
Cara Install React Native + Full Setup [2024]
How to Setup Visual Studio Code for Web Development | HTML, CSS, and JavaScript
12 VS Code Extensions to INCREASE Productivity 2024
5.0 / 5 (0 votes)