- Notifications
You must be signed in to change notification settings - Fork230
coding style#119
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Merged
Uh oh!
There was an error while loading.Please reload this page.
Merged
coding style#119
Changes fromall commits
Commits
Show all changes
3 commits Select commitHold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
178 changes: 87 additions & 91 deletions1-js/03-code-quality/02-coding-style/article.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
#Estilo de codificacion | ||
Nuestro codigo debe ser lo mas limpio y facil de leer como sea posible | ||
Eso es actualmente el arte de programar --tomar una tarea compleja y codificarla de una manera que sea correcta y legible por otros. | ||
##Sintaxis | ||
Aqui hay un cheatsheetcon algunas reglas sugeridas(ver abajo para mas detalles): | ||
 | ||
<!-- | ||
@@ -34,28 +34,25 @@ if (n < 0) { | ||
--> | ||
Ahora vamos a discutir las reglas y razones de ellos en detalle. | ||
```warn header="Irony Detected" | ||
Nada está escrito en piedra aqui. Estos son preferencias de estilos, nodogmas religiosos. | ||
``` | ||
### Llaves | ||
En la mayoria de proyectos de Javascript las llaves estan escritas en estilo "Egipcio" con la llave de apertura en la misma linea como la correspondiente palabra clave -- no en una nueva linea. Debe haber tambien un espacio despues de la llave de apertura, como esto: | ||
```js | ||
if (condition) { | ||
//hacer esto | ||
// ...y eso | ||
// ...y eso | ||
} | ||
``` | ||
En una construccion de una sola linea es un caso extremo importante. ¿Debemos usar llaves? Si si, entonces ¿donde? | ||
EzequielCaste marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
Aqui estan las variantes anotadas para que puedas juzgar la legibilidad por ti mismo. | ||
EzequielCaste marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
<!-- | ||
```js no-beautify | ||
if (n < 0) {alert(`Power ${n} is not supported`);} | ||
@@ -72,31 +69,30 @@ if (n < 0) { | ||
--> | ||
 | ||
En resumen: | ||
- Para codigo muy corto, una linea es aceptable. Por ejemplo: `if (cond) return null` | ||
- Pero en una linea separada por cada sentencia en llaves es usualmente mas facil de leer. | ||
### Tamaño de linea | ||
Nadie le gusta leer una linea horizontal larga de codigo. Es una mejor practica dividirlas y limitar el tamaño de tus lineas. | ||
El maximo tamaño de linea deberia ser acordado en el livel de equipo. Es usualmente 80 o 120 caracteres. | ||
### Identaciones | ||
Hay dos tipo de identaciones: | ||
- **Identacion horizontal: 2o 4espacios.** | ||
Una identacionhorizontales hecha usando 2 o 4espacios o el simbolo"Tab". ¿Cual elegir? es una vieja guerra santa. Espacios son mas comunes en estos dias. | ||
Una ventaja de los espacios sobre las tabulaciones es que los espacios permiten mas configuraciones flexibles de identaciones en lugar del simbolo"Tab". | ||
Por instancia, nosotros podemos alinear los argumentos con la llave de apertura, como esto: | ||
```js no-beautify | ||
show(parameters, | ||
aligned, // 5espacios de relleno a la izquierda | ||
one, | ||
after, | ||
another | ||
@@ -105,9 +101,9 @@ There are two types of indents: | ||
} | ||
``` | ||
- **Identacion vertical: lineas vacias para dividir codigo en bloques logicos.** | ||
Aun una simple funcion puede a menudo ser dividida en bloques logicos. En el ejemplo abajo, la inicializacion de variables,el bucle principal y el retorno del resultado son divididos verticalmente: | ||
```js | ||
function pow(x, n) { | ||
@@ -121,46 +117,46 @@ There are two types of indents: | ||
} | ||
``` | ||
Insertar una nueva linea extra donde ayude a hacer el codigo mas legible. No debe de haber mas de nueve lineas de codigo sin una identacion vertical. | ||
###Punto y coma | ||
Un punto y coma debe estar presente despues de cada sentencia, aun si podria posiblemente ser omitido. | ||
Hay lenguajes donde un punto y coma es verdaderamente opcional y es raramente usado. En Javascript, hay casos donde un salto de linea no es interpretado como un punto y coma, dejando el codigo vulnerablea errores. | ||
A medida tu te conviertas en un programador mas maduro, podrias escoger un estilo no-semicoloncomo[StandardJS](https://standardjs.com/).Hasta entonces, es mejor usar puntos y comas para evitar posibles dificultades. | ||
###Niveles anidados | ||
Intenta evitar anidar el codigo en demasiados niveles de profuncidad. | ||
Algunas veces es buena ideausar la directiva ["continue"](info:while-for#continue)en un bucle para evitar anidamiento extra. | ||
Por ejemplo, en lugar de añadir un `if`anidado como este: | ||
```js | ||
for (let i = 0; i < 10; i++) { | ||
if (cond) { | ||
... // <-un nivel mas de anidamiento | ||
} | ||
} | ||
``` | ||
Podemos escribir: | ||
```js | ||
for (let i = 0; i < 10; i++) { | ||
if (!cond) continue; | ||
... // <-sin nivelextrade anidamiento | ||
} | ||
``` | ||
Una similarcosa puede ser hecho con `if/else`y `return`. | ||
Por ejemplo, dos construcciones abajo son identicas. | ||
Opcion 1: | ||
```js | ||
function pow(x, n) { | ||
@@ -178,7 +174,7 @@ function pow(x, n) { | ||
} | ||
``` | ||
Opcion 2: | ||
```js | ||
function pow(x, n) { | ||
@@ -197,16 +193,16 @@ function pow(x, n) { | ||
} | ||
``` | ||
El segundo es mas legible porque el "caso extremo" de `n < 0`se maneja desde el principio. Una vez el chequeo es terminado nosotros nos podemos mover a el codigo"main"el codigo fluye sin necesidad de anidamientos adicionales. | ||
##Colocacion de funciones | ||
Si estas escribiendo varias funciones "auxiliares" y el codigo que las usan, hay tres maneras de organizar funciones. | ||
1.Funciones declaradas sobre el codigo que las usan: | ||
```js | ||
// *!*declaracion de funciones*/!* | ||
function createElement() { | ||
... | ||
} | ||
@@ -219,20 +215,20 @@ If you are writing several "helper" functions and the code that uses them, there | ||
... | ||
} | ||
// *!*el codigo que las usan*/!* | ||
let elem = createElement(); | ||
setHandler(elem); | ||
walkAround(); | ||
``` | ||
2.Codigo primero, despues funciones | ||
```js | ||
// *!*El codigo que usa a las funciones*/!* | ||
let elem = createElement(); | ||
setHandler(elem); | ||
walkAround(); | ||
// --- *!*Funciones auxiliares*/!* --- | ||
function createElement() { | ||
... | ||
} | ||
@@ -245,54 +241,54 @@ If you are writing several "helper" functions and the code that uses them, there | ||
... | ||
} | ||
``` | ||
3.Mixto: una funcion es declarada donde se usa por primera vez. | ||
La mayoria del tiempo, la segunda variante es preferida. | ||
Eso es por que cuando leemos codigo, nosotros primero queremos saber *Que hace*.Si el codigo va primero, entonces provee esa informacion. entonces, quizas nosotros no necesitaremos leer las funciones, especialmente si sus nombres son descriptivos de lo que realmente hacen. | ||
##Guias de estilo | ||
Una guia de estilo contine reglas generales acerca de "Como escribir codigo", por ejemplo. Que comillas usar, cuantos espacios de identacion, donde poner los saltos de linea, etc.Muchas cosas pequeñas. | ||
Cuando todos los mienbros de un equipo usan la misma guia de estilos, el codigo se ve uniforme, sin importar de cual mienbro del equipo lo escriba. | ||
Por supuesto, un equipo puede siempre escribir su propia guia de estilos. Aunque la mayoria del tiempo,noes necesario. Hay varios otros existentes probados y verdaderas opciones para escoger, asi adoptando una de estas es usualmente tu mejor opcion. | ||
Algunas opciones populares: | ||
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml) | ||
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) | ||
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js) | ||
- [StandardJS](https://standardjs.com/) | ||
- (y mucho mas) | ||
Si tu eres un desarrollador novato, empieza con la cheatsheetal inicio de este capitulo. Una vez tu hayas dominado eso, puedes explorar otras guias de estilos para coger principios comunes y decidir cual te gusta mas. | ||
## Linters automatizados | ||
Lintersson herramientas que pueden automaticamente verificar el estilo de tu codigo y hacer sugerencias y refactorizacion. | ||
Lo grandioso de ellos es que la comprobacion de estilo tambien puede encontrar algunosbugs,como errores gramaticales en variables o nombres de funciones. Debido a estas caracteristicas, Instalar un linteres comendado aun si tu no quieres apegarte a un "estilo de codigo" en particular. | ||
Estas son las herramientas de lintingmas conocidas: | ||
- [JSLint](http://www.jslint.com/) --uno de los primeros linters. | ||
- [JSHint](http://www.jshint.com/) --mas ajustes que JSLint. | ||
- [ESLint](http://eslint.org/) --probablemente el mas reciente. | ||
Todos ellos pueden hacer el trabajo. El authorusa [ESLint](http://eslint.org/). | ||
Muchos lintersson integrados con varios editores populares: solo habilite el pluginen el editory configureel estilo. | ||
Por ejemplo, para ESLinttu puedes hacer lo siguiente: | ||
1.Instala [Node.JS](https://nodejs.org/). | ||
2.Instala ESLintcon el comando `npm install -g eslint` (npmes un instalador de paquetes de Javascript). | ||
3.Crea un archivo de configuracion llamado`.eslintrc`en la raiz de tu proyecto de javascript (en el folderque contiene todos tus archivos). | ||
4.Instala/Habilita el pluginpara que tueditorse integre con ESLint.La mayoria de editores tienen uno. | ||
Aqui un ejemplo de un archivo`.eslintrc`: | ||
```js | ||
{ | ||
@@ -309,16 +305,16 @@ Here's an example of an `.eslintrc` file: | ||
} | ||
``` | ||
Aqui la directiva `"extends"`denota que la confifuracion es basada en el conjunto de ajustes"eslint:recommended". Despues de eso, especificamos el nuestro. | ||
Es tambien posible descargar el conjunto de reglas de laweby extenderlos en su lugar. Ver <http://eslint.org/docs/user-guide/getting-started>para mas detalles de su instalacion. | ||
Tambien ciertos IDEstienelinting incorporado, lo cual es conveniente pero no como un ESLint personalizable. | ||
##Resumen | ||
Todas las reglas de sintaxis descritas en este capitulo (y en las guias de estilos referenciados) tienen como objetivo incrementar la legibilidad de tu codigo, pero todos ellos son debatibles. | ||
Cuando nosotros pensamos acerca de escribir "mejor" codigo, las sugerencias que nosotros debemos preguntar son, "¿Que hace que el codigo sea mas legible y facil de entender?"y "¿Que puede ayudarnos a evitar errores?"Estos son las principales cosas a tener en cuenta cuando escogemos y debatimos estilos de codigo. | ||
Leer guias de estilos populares te permitiran mantenerte al dia con las ultimas ideas acerca de tendencias estilos de codigo y mejores practicas. |
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.