Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translate Editor Setup (beta docs) #512

Merged
merged 2 commits into from
Apr 7, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions beta/src/pages/learn/editor-setup.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
---
title: Editor Setup
title: Configurar un editor
---

<Intro>

A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as your write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
Un editor configurado apropiadamente puede hacer la lectura del código más clara y la escritura más rápida. ¡Incluso puede ayudarte a detectar errores mientras los escribes! Si esta es tu primera vez configurando un editor o estás buscando mejorar la configuración de tu editor actual, tenemos algunas recomendaciones.

</Intro>

## Your editor {/*your-editor*/}
## Tu editor {/*your-editor*/}

[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
[VS Code](https://code.visualstudio.com/) es uno de los editores más populares hoy en día. Tiene disponible un mercado digital de extensiones y se integra bien con servicios populares como GitHub. La mayoría de las funcionalidades que se listan debajo se pueden añadir a VS Code también a través de extensiones, ¡lo que lo hace muy configurable!

Other popular text editors used in the React community include:
Otros editores de texto populares que se usan en la comunidad de React incluyen a:

* [WebStorm](https://www.jetbrains.com/webstorm/)—an integrated development environment designed specifically for JavaScript.
* [Sublime Text](https://www.sublimetext.com/)—has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
* [Vim](https://www.vim.org/)—a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
* [WebStorm](https://www.jetbrains.com/webstorm/)—un entorno de desarrollo integrado diseñado específicamente para JavaScript.
* [Sublime Text](https://www.sublimetext.com/)—permite trabajar con JSX y TypeScript, incluye [resaltado de sintaxis](https://stackoverflow.com/a/70960574/458193) y autocompletado de forma nativa.
* [Vim](https://www.vim.org/)—un editor de texto altamente configurable hecho para crear y cambiar cualquier tipo de texto de forma muy eficiente. Se incluye como «vi» en la mayoría de los sistemas UNIX y con OS X de Apple.

## Recommended text editor features {/*recommended-text-editor-features*/}
## Funcionalidades recomendadas en un editor de texto {/*recommended-text-editor-features*/}

Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
Algunos editores vienen con estas funcionalidades integradas por defecto, pero otros puede que requieran añadir una extensión. ¡Chequea qué tipo de integración proporciona tu editor de preferencia para tener seguridad!

### Linting {/*linting*/}
### Linting (análisis de código) {/*linting*/}

Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript.
Las herramientas de análisis de código de tipo *linters* permiten encontrar problemas en tu código mientras lo escribes, ayudando a corregirlos de forma temprana. [ESLint](https://eslint.org/) es un *linter* popular de código abierto para JavaScript.

* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
* [Instala ESLint con la recomendación recomendada para React](https://www.npmjs.com/package/eslint-config-react-app) (¡asegúrate de tener [Node instalado!](https://nodejs.org/en/download/current/))
* [Integra ESLint en VSCode con la extensión oficial](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### Formatting {/*formatting*/}
### Formateo {/*formatting*/}

The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
¡Lo último que quieres al compartir tu código con otro contribuidor es entrar en un debate sobre [tabuladores vs. espacios](https://www.google.com/search?q=tabs+vs+spaces)! Afortunadamente, [Prettier](https://prettier.io/) limpiará tu código al reformatearlo para que se ajuste a unas reglas predefinidas y configurables. Ejecuta Prettier y todas tus tabuladores se convertirán en espacios-y tu nivel de sangrado, comillas, etc. también se cambiarán para ajustarse a la configuración. En la configuración ideal, Prettier se ejecutará cuando guardas tu archivo, realizando estas ediciones rápidamente por ti.

You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
Puedes instalar la [extensión de Prettier en VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) siguiendo estos pasos:

1. Launch VS Code
2. Use Quick Open (press `CTRL/CMD + P`)
3. Paste in `ext install esbenp.prettier-vscode`
4. Press enter
1. Ejecuta VS Code
2. Utiliza *Quick Open* (presiona `CTRL/CMD + P`)
3. Pega `ext install esbenp.prettier-vscode`
4. Presiona enter

#### Formatting on save {/*formatting-on-save*/}
#### Formateo al guardar {/*formatting-on-save*/}

Ideally, you should format your code on every save. VS Code has settings for this!
Idealmente, deberías formatear tu código cada vez que guardas. ¡VS Code tiene configuraciones para hacerlo!

1. In VS Code, press `CTRL/CMD + SHIFT + P`.
2. Type "settings"
3. Hit enter
4. In the search bar, type "format on save"
5. Be sure the "format on save" option is ticked!
1. En VS Code, presiona `CTRL/CMD + SHIFT + P`.
2. Escribe «settings»
3. Presiona enter
4. En la barra de búsqueda, escribe «format on save»
5. ¡Asegúrate de que la opción «format on save» esté marcada!

> Prettier can sometimes conflict with other linters. But there's usually a way to get them to run nicely together. For instance, if you're using Prettier with ESLint, you can use [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier) plugin to run prettier as an ESLint rule.
> Prettier en ocasiones puede entrar en conflicto con otros *linters*. Pero generalmente hay una forma de que se ejecuten juntos sin conflictos. Por ejemplo, si estás usando Prettier con ESLint, puedes utilizar el plugin [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier) para ejecutar prettier como una regla de ESLint.