Share
Existen numerosos recursos en los que podemos confiar durante la codificación que ayudarán a preservar los estándares en todo el equipo. En este tutorial, veremos cómo implementar y usar cinco de estas herramientas.
HTML, CSS y JavaScript son particularmente fáciles de manejar en lo que se refiere a la escritura convenciones se preocupa Siempre que ciertas notaciones sigan las reglas del idioma, que las comillas, los corchetes, los dos puntos, los puntos y coma, etc. estén en el lugar correcto, el código funcionará. Sin embargo, la sangría, el espaciado, el corte de línea, el orden de declaración de las propiedades, las funciones y las variables, incluida su mayúscula, son responsabilidad exclusiva de los autores..
Los elementos HTML, por ejemplo, no distinguen entre mayúsculas y minúsculas. Podemos escribirlos en minúsculas o mayúsculas; Lo que era una práctica común en los años 90. Además, el ajuste de los valores de los atributos entre comillas ha sido opcional desde la llegada de HTML5, algo que pocas personas realmente hacen. Todo esto permite declarar el siguiente código. válido Según el estándar HTML5:
/ ** HTML válido en HTML ** /El contenido precede al diseño. El diseño en ausencia de contenido no es diseño, es decoración.
En CSS, algunos prefieren usar espacio terminado lengüeta-o viceversa, para la sangría. Las propiedades dentro de las reglas de estilo se pueden organizar en cualquier orden. La presencia de duplicados en su CSS es perfectamente correcta (la mayoría de las veces), y en el caso de los Pre-procesadores de CSS, el anidamiento excesivo de las reglas de estilo es perfectamente factible.
.sitio .header & .logo .navigation .menu .menu-link &: hover
Del mismo modo, una variable de JavaScript se puede expresar con mayúsculas o minúsculas, una variable de una sola letra es aceptable y omitir llaves en bloques condicionales o de bucle también es viable.
si < 3) doFunction(); while(!n < 3) n++;
La forma en que escribimos el código no importa mucho en términos de ejecución. Pero cuando se trabaja en un proyecto con muchas personas que contribuyen a la base de código, pronto encontrará que la base del código se convierte en un desastre si cada colaborador sigue sus propias preferencias. En un proyecto a gran escala, puede causar errores complicados, el código puede volverse menos manejable y sería un verdadero dolor para cualquiera que herede y mantiene el proyecto en el futuro.
En resumen, se recomienda adoptar una “Norma de Codificación”.
Las "Normas de codificación" son cualquier conjunto de reglas acordadas por los participantes cuando contribuyen al código base del proyecto. Pavimentan la norma para sintaxis Para mantener la coherencia y claridad del código, el formateo Para facilitar la lectura, el uso de mejores prácticas de la lengua; A menudo con alguna adición de reglas propietarias exclusivas del proyecto..
Harry Roberts, en sus Pautas de CSS:
“Al trabajar en proyectos grandes y de larga duración, con docenas de desarrolladores de diferentes especialidades y habilidades, es importante que todos trabajemos de manera unificada para, entre otras cosas, mantener las hojas de estilo mantenibles; mantenga el código transparente, sano y legible, mantenga las hojas de estilo escalables;
Douglas Crockford, quien popularizó a JSON en sus "Convenciones de código para el lenguaje de programación JavaScript", declaró:
“El valor a largo plazo del software para una organización es directamente proporcional a la calidad del código base. A lo largo de su vida, un programa será manejado por muchos pares de manos y ojos. Si un programa puede comunicar claramente su estructura y características, es menos probable que se rompa cuando se modifique en un futuro nunca muy lejano. Las convenciones de código pueden ayudar a reducir la fragilidad de los programas.
Todo nuestro código de JavaScript se envía directamente al público. Siempre debe ser de calidad de publicación. La pulcritud cuenta.
La respuesta corta es "no necesariamente", especialmente teniendo en cuenta que ya hay docenas de guías de estilo de uso común en la naturaleza, por ejemplo:
Estas guías de estilo están bien escritas, en profundidad y se explican por sí mismas en términos del razonamiento detrás de cada regla que impactan. Entonces, en lugar de componer nuestra propia guía de estilo, puede ser más sabio adoptar y adaptar patrones existentes para encajar en nuestro proyecto de inmediato.
La verdadera pregunta ahora es cómo podemos mantener a todos siguiendo los estándares que elegimos.?
Afortunadamente, hay un par de recursos en los que podemos confiar durante el proceso de desarrollo que ayudarán a preservar los estándares en todo el equipo. En este tutorial, veremos cómo implementar y usar algunas de estas herramientas.
EditorConfig es un archivo de puntos que registra algunas reglas básicas de formato, como la sangría, el espacio en blanco y la ruptura de nuevas líneas. Funciona universalmente para cualquier tipo de lenguaje y ya está integrado en casi todos los editores de código e IDE, como Visual Studio, Sublime Text, Vim y TextMate a través de complementos..
Suponiendo que está utilizando Sublime Text, la forma más sencilla de instalar el complemento es a través de Gerente de empaquetación.
Accentsconagua
.editorconfig en el directorio raíz del proyecto que aplicará las configuraciones especificadas a través de todos los archivos, incluidos los que están dentro de los subdirectorios.root = true [*] charset = utf-8 indent_style = tab indent_size = 4 insert_final_newline = true
Conforme a la configuración de nuestro ejemplo, encontraremos nuestro código sangrado con una pestaña y agregaremos una nueva línea al final del archivo a medida que lo guarde..
La configuración afectará a todos los archivos existentes en los que podría haber utilizado previamente la sangría de espacio.
Consulte Propiedades admitidas para conocer las propiedades aplicables al .editorconfig y los Patrones de comodines EditorConfig para aplicar las propiedades de archivos o directorios específicos. También puede encontrar la lista del complemento de su editor preferido o IDE en la sección Descargar.
De acuerdo con la guía de CodeGuide, las propiedades de estilo deben agruparse de acuerdo con el siguiente orden consecutivo.
posición, parte superior, izquierda, etc.anchura, altura, monitor, etc.fuente, altura de la línea, etc.fondo, frontera, radio del borde, etc.Por ejemplo:
.cuerpo-contenido posición: absoluta; arriba: 0; izquierda: 0; relleno: 10px 12px; pantalla: ninguna; tamaño de letra: .8em; font-weight: negrita; línea de altura: 26px; color: #fff;
Si adopta una directriz con una regla similar, en la que las propiedades se agrupan en ese orden determinado, CSSComb realmente será útil. No solo le permite hacer exactamente esto, sino que además conserva varias convenciones de estilo como el espaciado, el uso de comillas, llaves, dos puntos, punto y coma, cero para el valor de longitud, y funciona bien con la sintaxis del preprocesador de CSS..
npm instalar csscomb -g .csscomb.json en el directorio raíz del proyecto, o dentro del directorio donde se almacenan los archivos CSS..csscomb.json. Compruebe contra la lista completa de opciones aplicables. Para hacerlo más fácil, puede generar el archivo de configuración a través de la aplicación web Config Builder, o usar cualquiera de las configuraciones preestablecidas que se pueden encontrar en el repositorio.Utilizar el csscomb comando, como así:
csscomb asset / css / style.css
Si lo prefiere, puede ejecutar CSSComb durante el proceso de compilación con el complemento Gulp o Grunt. Alternativamente, puedes usar un complemento en tu editor de código como Sublime Text y ejecutarlo a través de Paleta de comandos. También hay un plugin disponible para Brackets y Atom..
StyleLint es una herramienta que examina nuestro CSS contra más de cien reglas predefinidas, produciendo advertencias en el caso de violaciones. Algunas de estas violaciones son fáciles de solucionar con CSSComb, lo que hace que estas herramientas sean excelentes para usar de la mano. CSSLint es también una herramienta perfecta para realizar una revisión de código.
npm install stylelint -g .stylelintrc archivo en el directorio raíz de su proyecto..stylelintrc archivo, por ejemplo:"rules": "color-hex-case": "lower", "color-hex-length": "short", "comment-empty-line-before": "always", "selector-no-combinator ": true," selector-no-id ": true," string-quotes ":" double "," selector-no-type ": true," selector-no-universal ": true," selector-no-vendor -prefijo ": verdadero
Se puede encontrar una lista completa de las reglas de Stylint aplicables en la página de Reglas.
Use Stylelint a través de la línea de comando (por ejemplo: stylelint "css / *. css"), PostCSS con el complemento, o instale un complemento que le permita ver las advertencias directamente en su editor de código. El complemento está actualmente disponible para Sublime Text, Atom y Visual Studio..
Como su nombre lo indica, JSCS evalúa sus estilos de código JavaScript; desde el uso de espacios en blanco, funciones y convenciones de nomenclatura de variables, bloques de comentarios, saltos de línea y mucho más. JSCS se ha utilizado ampliamente en proyectos populares de código abierto como jQuery, Bootstrap, y Ember.js, y también por compañías notables como Yandex y Adobe. Testamento de hecho; Probablemente debería usarlo también en su proyecto.!
npm instalar jscs -g..jscsrc."jquery", "airbnb", "google", yandex, y "wordpress"."preset": "wordpress", "requireCurlyBraces": true
Suponiendo que su archivo JavaScript se almacena en js / app.js, ejecute el comando: jscs js / app.js.
Para arreglar los estilos de código, ejecute jscs js / app.js --fix. En Sublime Text puede instalar el formateador JSCS para hacerlo sin salir del editor de código. Un complemento similar llamado JSCS Fixer también está disponible para Atom.
Otra herramienta que uso a diario para comprobar mi JavaScript es JSHint. A diferencia de JSCS, las evaluaciones de JSHint giran en torno a la validez del código, en lugar de simplemente el estilo del código. Además, JSHint también eliminará estilístico Reglas en la próxima versión, ya que JSCS ha estado creciendo la tracción y hace bien el trabajo en ese asunto específico. Como tal, JSHint solo comparará con el uso de variables, bucles, operadores de comparación, ámbitos, nivel de anidamiento y similares de otras cosas técnicas de JavaScript que posiblemente causen problemas o errores..
npm instalar jshint -g .jshintrc en el directorio raíz de tu proyecto..jshintrc, por ejemplo:"boss": true, "eqeqeq": true, "eqnull": true, "expr": true, "immed": true, "noarg": true, "undef": true, "unused": true, " nodo ": verdadero
Utilizar el jshint línea de comando. Suponiendo que tiene todos sus archivos JavaScript almacenados en un directorio llamado js, correr jshint js.
Alternativamente, use JSHint con el complemento Gulp o Grunt. Los usuarios de Sublime Text o Atom pueden instalar el interfaz linter para SublimeText, Atom, que le permite ver el informe de errores directamente en el editor de código.
Propina: CodePen también verificará su JavaScript para detectar errores usando JSHint; Encuentra esta opción en el panel de Configuración de JavaScript:
Si configurar todas estas herramientas en su proyecto puede parecer tedioso, use Yeoman para juntarlas como un andamio. Siempre que usted o su equipo estén a punto de comenzar un nuevo proyecto, solo tendrá que presionar un comando de una sola línea para que estén listos en un par de segundos. Para obtener más detalles, siga el curso Envato Tuts + sobre cómo crear un generador Yeoman personalizado..
Por último, tener estas herramientas no solo nos ayudará a producir un mejor código y minimizar errores en nuestro código, sino que nos capacitará para ser mejores desarrolladores web. Al principio, puedes encontrar que tu código tiene muchos errores. Pero pronto escribirá el código con menos errores, a medida que se acostumbre a las reglas..
