Soportes: teclas de acceso rápido, complementos y configuraciones. soportes. Complementos necesarios Archivo de configuración de corchetes
Los webmasters y los programadores suelen utilizar editores de texto para crear sitios web. Pero la funcionalidad de los programas habituales de este grupo, por ejemplo, el Bloc de notas, es demasiado limitada para las personas que trabajan en esta dirección. Para ellos, se crean aplicaciones especiales diseñadas para trabajar con lenguajes de marcado. Uno de ellos es el editor de texto gratuito Brackets de Adobe.
La característica principal que hace que Brackets sea popular entre los diseñadores de diseño es la compatibilidad con una gran cantidad de lenguajes de marcado y programación web, a saber: HTML, Java, JavaScript, CSS, C ++, C, C #, JSON, Perl, SQL, PHP, Python y muchos más (total 43 elementos).
En la ventana del editor de código del programa, los elementos estructurales de los idiomas anteriores se resaltan en un color separado, lo que ayuda al diseñador de diseño a navegar rápidamente por el código, así como a encontrar fácilmente el principio y el final de la expresión. La numeración de líneas, la capacidad de colapsar bloques y la estructuración automática del marcado también sirven como factores adicionales para la comodidad del usuario cuando trabaja con corchetes.
trabajar con texto
Al mismo tiempo, para usar Brackets, no es necesario ser programador o diseñador de páginas web, ya que el programa también admite procesamiento de texto simple, como un editor de texto normal.
Los corchetes pueden funcionar con una lista muy grande de codificaciones de texto: UTF-8 (predeterminado), Windows 1250 - 1258, KOI8-R, KOI8-Ru y otras (43 en total).
Vista previa de los cambios en el navegador
Función de soporte de corchetes "Vista previa en vivo", que radica en que todos los cambios realizados en un editor de texto se pueden visualizar inmediatamente en el navegador Google Chrome. Por lo tanto, para poder utilizar esta función, se requiere la presencia de este navegador web en la computadora. El diseñador de maquetación puede ver de inmediato cómo sus acciones afectan la interfaz de la página web visible para el usuario, ya que todos los cambios se muestran en Google Chrome sincrónicamente cuando se guarda el archivo.
Gestión de archivos
En el editor de Brackets, puede trabajar con varios archivos al mismo tiempo, cambiando entre ellos usando el menú. Además, se proporciona clasificación de documentos abiertos por nombre, fecha de adición y tipo, así como clasificación automática.
Integración del menú contextual
Gracias a la integración en el menú contextual "Explorador de Windows", puede abrir cualquier archivo con Brackets sin iniciar primero el programa.
Modo de depuración
Con Brackets, puede ver y editar páginas web en modo de depuración.
Buscar y reemplazar
El programa proporciona una función conveniente de búsqueda y reemplazo por texto o código de marcado.
Trabajar con extensiones
Es posible aumentar la funcionalidad de Brackets instalando complementos de extensión. Puedes gestionarlos con un especial "Administrador de extensiones" en una ventana separada. Con estos elementos, puede agregar soporte para nuevos lenguajes de marcado y programación al programa, cambiar temas de interfaz, trabajar con un servidor FTP remoto, administrar versiones de aplicaciones y también incorporar otras funcionalidades que no se proporcionan en la versión original del editor de texto. .
Ventajas
- multiplataforma;
- multilingüismo (31 idiomas, incluido el ruso);
- Una gran cantidad de lenguajes de programación y codificaciones de texto compatibles;
- Posibilidad de agregar nuevas funciones mediante extensiones.
Defectos
- Función " vista previa en vivo" disponible solo a través del navegador Google Chrome;
- Algunas secciones del programa no están rusificadas.
Brackets es un potente editor de texto para trabajar con código y lenguajes de marcado, que tiene una funcionalidad muy amplia. Pero incluso a una gama tan amplia de funciones del programa, puede agregar otras nuevas usando extensiones de complemento.
Soportes es un proyecto desarrollado por Adobe. Inicialmente concebido como un editor de código para la creación simplificada de aplicaciones web. Durante el año pasado, se lanzaron varias actualizaciones que no solo mejoraron el rendimiento del editor, sino que también agregaron varias funciones que serán útiles para los desarrolladores.
La versión actual es Soportes 1.2.
Comencemos con la interfaz del programa:
Interfaz
La interfaz del programa consta de:
- Menú - archivar, editar, buscar, etc.
- Área para seleccionar archivos de proyecto para editar
- área de código
También puede seleccionar un botón para activar el modo. vista previa en vivo, pero más sobre eso más adelante.
Inicialmente, sin complementos ni temas, la interfaz del programa es bastante simple y estándar. Nada superfluo para un desarrollador novato: resaltado de sintaxis de código en el área de edición, un directorio de directorios de proyectos.
Usando la combinación CTRL++ / CTRL+-, puede aumentar/disminuir el tamaño de fuente.
con el lanzamiento versión 0.42 hubo soporte para cambiar e instalar temas. El estándar era sólo luz y Oscuro. Debo admitir que el tema oscuro es más agradable visualmente para mí.
El cambio de temas se hace en la pestaña Vista – Temas. En la misma pestaña, puede cambiar fuente y su el tamaño.
Temas entre paréntesis
vista dividida
Versión 0.44 corrigió una gran cantidad de errores, mejoró el rendimiento y también agregó una función como vista dividida. Esta función permitirá dividirárea de edición en dos partes y trabajar con dos archivos al mismo tiempo. Es cierto que esto simplificó enormemente el desarrollo.
La separación es posible horizontalmente.
División horizontal del área del editor de corchetes También se puede dividir verticalmente.
División vertical del área del editor de corchetes Paleta de color
También en Brackets hay una función útil como llamar a la paleta de colores usando la combinación CTRL + E. Funciona así:
Pon cursos en el código de colores y presiona la combinación CTRL+E. Se abrirá una paleta de colores donde puedes especificar qué color y con qué transparencia quieres.
Paleta de colores de corchetes Extracto para paréntesis (Vista previa)
Tres años después del lanzamiento de la primera versión de Brackets versión 1.0. Además de mejorar el rendimiento, un plugin como Extracto para paréntesis (Vista previa).
Te permite abrir plantillas en el formato PSD directamente en corchetes, y verlos como en Photoshop por capas. Con él, puede ver el tamaño de un elemento de la página, como bloques, en píxeles o porcentajes, así como su ubicación, y luego ingresar inmediatamente estos valores en el editor.
Extracto para paréntesis (Revisión) Inicialmente, la idea es genial y bastante útil. Pero el problema era que en versión 1.0 el complemento no funcionó correctamente, se ralentizó y cargó el sistema.
Otra desventaja es la necesidad de tener una cuenta en la "nube" de Adobe Creative Cloud, porque PSD las plantillas se cargan allí.
Para ser honesto, incluso después del lanzamiento de nuevas versiones, no uso esta función debido al "buggy".
administrador de extensiones
Los complementos están instalados en la ventana. administrador de extensiones, también puedes instalar temas de diseño.
Complementos in Brackets permite ampliar la funcionalidad estándar y facilitar el desarrollo de proyectos. Uno de estos complementos, muy conocido Hormiga.
Hormiga- un complemento que le permite escribir código grande usando abreviaturas, ahorrando tiempo.
Por ejemplo:
Escribiendo el siguiente código en un documento html:
XHTML
ul>li*4>a
ul> li* 4> a[ href= # ] |
Después de presionar las teclas de acceso rápido (establecido de forma predeterminada en la tecla PESTAÑA) el código escrito se “desdoblará” en
XHTML
vista previa en vivo Y finalmente, les hablaré de una función tan maravillosa como vista previa en vivo. Con esta función, puede ver el resultado en tiempo real. El principio es simple: elegir html documento, incluir vista previa en vivo. Se abrirá una ventana del navegador que muestra su proyecto en la ortografía actual. Vale agregar que esta función solo funciona con el navegador Cromo . Parece estar hablando de soporte para otros navegadores, pero solo en futuras versiones del programa. Pero esta función, en mi opinión, es clave. Especialmente para desarrolladores que trabajan con dos pantallas. ConclusiónAquí es donde quiero terminar esta revisión. tambien puedo agregar eso Soportes Perfecto principiantes desarrolladores de sitios de Internet. Como diseñador de sitios web principiante, recomiendo usarlo. Este editor no exige recursos, tiene una interfaz simple y, con la ayuda de teclas de acceso rápido y complementos, le permite acelerar y simplificar la escritura de código. Sitio web oficial del editor Soportes. |
Editor de texto Brackets 1.6: excelente para el diseño de sitios web. Esta es una gran herramienta de los desarrolladores de Adobe. Con la función de codificación en vivo, no tendrá que volver a cargar la página durante el diseño.
Descripción de Editor de corchetes
En general, la apariencia del editor se puede personalizar a tu gusto. Tiene un conjunto de temas estándar. Cada tema cambia la apariencia de la ventana de edición de código. Esto cambia tanto el fondo como el resaltado de sintaxis. Hay temas oscuros y claros. De forma predeterminada, todos los archivos y carpetas abiertos se agrupan en el panel izquierdo, pero también se pueden colocar como pestañas encima de un archivo editable abierto. Es decir, en Brackets todo se hace de tal manera que puedas hacer todo lo más conveniente para ti.
Características de los soportes
Este editor de texto está desarrollado utilizando tecnologías web y cuenta con todas sus ventajas. Por ejemplo, es multiplataforma. Es decir, puede ejecutar Brackets en cualquier plataforma, ya sea Windows, Linux o Mac.
Brackets tiene un selector de color incorporado para determinar el color durante el diseño. La finalización de código funciona de manera hermosa y rápida, y también hay un sistema para completar automáticamente las rutas de acceso a archivos e imágenes. Esto le ahorrará mucho tiempo y le evitará buscar los archivos necesarios en las carpetas. Además, hay un fragmento para insertar texto de peces (lorem ipsum).
Además, además de las funciones integradas de Brackets, puede ampliar su funcionalidad mediante complementos. Hay un ícono en la pequeña columna vertical a la derecha que parece un elemento de Lego. Al hacer clic en él, se abrirá una ventana modal con una lista de todos los complementos disponibles. Su instalación toma solo unos segundos y se realiza presionando un solo botón.
Probablemente la característica más importante y distintiva de Brackets es la función de codificación en vivo, que muestra todos los cambios en el código inmediatamente en la página web. Esta característica está bien implementada aquí. Esto no es un reinicio banal después de hacer cambios, esto es codificación en vivo. Para iniciarlo, debe hacer clic en el icono del rayo en el panel derecho del editor. Esta acción abrirá el archivo en el navegador para verlo en vivo. Además, aquí puede habilitar la función de resaltar en la página del lugar donde se encuentra en el código. Es muy conveniente y le ahorra mucho tiempo valioso si lo usa con frecuencia.
A pesar de toda esa rica funcionalidad, Brackets se puede descargar de forma gratuita. Es excelente para el trabajo diario y será un buen reemplazo para su editor actual.
Especificaciones:
Versión: Soportes 1.6
Estado: Gratis
idioma ruso
Autor: Adobe
Sistema: Windows
Tamaño: 36.7Mb
Introducción
No hace mucho tiempo, se publicaron muchos artículos sobre Habré, relacionados de una forma u otra con el editor de Brackets. Mucha gente inmediatamente tuvo preguntas bastante justas:- ¿Cómo es mejor que el %EDITOR_NAME% que uso?
- ¿Hay muchos complementos para ello?
- ¿Vale la pena perder el tiempo o es mejor usar algún IDE o editor de texto conocido?
Funcionalidad lista para usar
Aunque Brackets se posiciona como un editor de texto, de hecho se parece cada vez más a un IDE completo. Sin embargo, cabe decir sobre lo que conseguimos con una instalación básica de este editor:- complemento para Live Preview: solo funciona con Google Chrome. Realizamos cualquier cambio en el código en el editor; los cambios se muestran automáticamente en la ventana del navegador
- resaltado de sintaxis
- consejos para editar archivos CSS, JS y HTML
- visualización torpe de texto cirílico. Prometen arreglarlo en uno de los próximos lanzamientos. Ahora hay varias soluciones, más sobre eso a continuación.
Soportes fuera de la caja
propósito general
Clasificación de extensiones
Para los principiantes, les aconsejo que pongan este complemento primero. Le permite ordenar otras extensiones en el catálogo de acuerdo con varios criterios, y también muestra información adicional diversa: el número de descargas, estrellas y bifurcaciones en GitHub, lo que le permite evaluar, al menos aproximadamente, la utilidad de esta extensión.Antes y después de
Soportes Git
Todo queda muy claro en el título. Una extensión muy útil para trabajar con el conocido sistema de control de versiones.Git entre paréntesis
plegado de código
Sin este complemento, Brackets no tiene la funcionalidad necesaria como el plegado de código. Después de la instalación, aparecerán triángulos a la izquierda, junto a los números de línea, que le permitirán contraer los fragmentos que no se necesitan ahora.plegado de código
Hormiga
No necesita presentación, pero para los principiantes será interesante aprender sobre él. Este complemento le permite acelerar significativamente la entrada de texto al editar LESS, CSS y HTML.Por ejemplo, ingresamos la siguiente estructura:
button.btn.btn-primary(Botón)
Después de presionar la tecla Tab, se expandirá a esto:
Siga adelante:
div.btn-barra de herramientas>(botón.btn.btn-default(Botón))*3
se expande a
No haré más spoilers, es mejor leer las reseñas ya disponibles en Habré:
También recomiendo las instrucciones oficiales (en inglés).
descripción general del código
Habilita un pequeño panel en el lado derecho de la ventana del editor que muestra todo el código a vista de pájaro. Puede saltar rápidamente a cualquier punto de interés.Además del complemento CodeOverview, también hay BluePrint en Beta. Cuál es mejor: decide por ti mismo.
Revisión de código
Barra de herramientas del documento
Para aquellos que están acostumbrados a la interfaz con pestañas y no quieren abandonarla (a cambio, Brackets ofrece una lista de archivos abiertos encima del árbol).Fuentes de corchetes
Le permite seleccionar de la lista la fuente que se utilizará para mostrar el texto en el editor. Preste atención a cómo comenzaron a mostrarse los caracteres cirílicos. Además, hay varios otros complementos con la misma funcionalidad. Es posible abrir el elemento Ver / Temas en el menú, donde puede especificar manualmente qué fuentes se deben usar.fuentes
Servidor HTTP para soportes
Inicia un servidor HTTP local para depurar su proyecto. ¿Cuál es la diferencia con la vista previa en vivo incorporada?- Esto no es LivePreview, es decir, La página debe actualizarse manualmente.
- Puede acceder a este servidor desde cualquier navegador instalado en el sistema. Los desarrolladores de IE y Firefox están de enhorabuena.
Grunt para corchetes
Brackets puede ofrecer un complemento para Grunt "a. Su configuración es un tema aparte, algunos incluso escribieron libros completos al respecto. De mí mismo, solo señalaré que ahora, en 2014, no usar Grunt o Gulp es una señal de mal gusto y frivolidad del desarrollador.embellecer, embellecer
Simplemente presionando la combinación de teclas Ctrl+L o Ctrl+B, el código JS o HTML mal diseñado se transforma en código bien diseñado. En las imágenes de global_main.js de Habr antes y después de aplicar este complemento. ¡No use estos complementos por MENOS! Insertan espacios después de los dos puntos, lo que hace que el archivo LESS no se pueda compilar.¡Ayudante, todo está en la picadora de carne!
Búsqueda rápida
Al hacer doble clic en una expresión, se resaltan todas sus apariciones en el documento. El autor de la extensión está inspirado en Notepad ++, que no oculta.bloc de notas ++? No.
SFtpUpload, sincronización FTP
Le permite cargar archivos de proyecto a un servidor a través de (S)FTP. Son capaces de autorizar por clave.Sincronización FTP, SFtpUpload
diseñador de maquetación
MENOS autocompilación
Para aquellos que no quieren el dolor de cabeza de editar CSS, LESS existe desde hace mucho tiempo. Este complemento le permite compilar automáticamente sus archivos .less al guardar. En su estado actual, requiere un pequeño ajuste.- En el encabezado del archivo .less, debe escribir algo como:
//fuera: ../css/login.css
si es necesario anular el directorio de salida.css. De lo contrario, el archivo .css se creará en el mismo lugar que el archivo .less, lo cual no es muy bueno. Todas las demás configuraciones LESS para el archivo se escriben aquí. - En la configuración del proyecto, debe especificar explícitamente qué archivos debe procesar LESS. Para hacer esto, agregue a .brackets.json o compilar.json(ambos están en el directorio raíz del proyecto, el primero es creado automáticamente por Brackets) lo siguiente:
( "less": [ "static/login/less/login.less", "static/desktop/less/index.less" //Y todos los demás archivos LESS ] )
Autoprefijador de corchetes
Creo que este plugin no necesita presentación. Inserta las adiciones necesarias en el archivo CSS existente para admitir prefijos de proveedores y navegadores más antiguos. Dependiendo de la configuración, puede obtener una variedad de resultados. Tiene una ventana de opciones bastante simple. La lista completa se puede ver en la página de GitHub del proyecto.Minimalismo de la configuración de Autoperefixer
Formateador de hojas de estilo CSSLint, LESSLint, LESS
Tres complementos para ayudar a mejorar su código LESS y CSS. Señalarán errores típicos y no tan comunes. Un ejemplo en la imagen.Errores en CSS
HTMLHint, más sugerencias de código CSS, más sugerencias de código HTML5
Los complementos solo brindan más sugerencias al editar HTML y CSS. Teniendo en cuenta la velocidad con la que se agregan varias mejoras y adiciones a la entrega básica de Brackets, debemos esperar la integración de la funcionalidad de estos complementos en el núcleo.ColorHints, Selector de color de corchetes
El primero muestra información sobre herramientas al pasar el cursor sobre un código o nombre de color en el editor, y también puede mostrar degradados. El segundo muestra una ventana con una paleta para seleccionar el color deseado. Al editar archivos LESS, la ventana de selección de color debe llamarse Ctrl+Alt+K si no aparece automáticamente después de ingresar la palabra color.Sugerencias para ingresar degradados y colores
desarrollador de JavaScript
JSHint, JSLint, Configurador JSHint, Configurador JSLint
Complementos extremadamente útiles para desarrolladores que no solo escriben, sino que también escriben código en JavaScript. Puede elegir entre JSHint y JSLint, aunque puede usar ambos (el segundo estará mucho más sesgado hacia su código). Los configuradores, como su nombre lo indica, le permiten configurar varias opciones de verificación de código, por ejemplo, ignorar el uso de la función requirejs antes de que se declare.Todo el mundo ya sabe para qué sirve cada uno de los parámetros.
FuncDocr
El complemento le permite documentar rápidamente las funciones JS.Por ejemplo, existe el siguiente código:
Desktop.prototype.addResizeHandler = function(handler) ( if ($.isFunction(handler)) ( this.resizeActions.push(handler); ) );
Ponte delante de la declaración de la función y escribe /**. Después de presionar la tecla Enter, FuncDocr expandirá este comentario, reemplazando los espacios en blanco, donde solo necesita ingresar lo necesario:
/** * [] * @param ([]) handler [] */ Desktop.prototype.addResizeHandler = function(handler) ( if ($.isFunction(handler)) ( this.resizeActions.push(handler); ) ) ;
Sugerencias de código AngularJS, AngularJS para corchetes
Agregue sugerencias al ingresar directivas angulares. No estoy familiarizado con este marco, pero espero que estos dos complementos cumplan con las expectativas de los especialistas.Cambiar el nombre del identificador de JavaScript
Nos convertimos en un identificador, presionamos Ctrl + R, ingresamos un nuevo nombre: todas las apariciones de la variable en el script se renombran automáticamente.una cucharada de alquitrán
Con toda la variedad de configuraciones y parámetros, hay algunas quejas sobre Brackets. La primera y más importante es la velocidad. Con una gran cantidad de complementos y mucho CSS conectado al documento, comienza a ralentizar notablemente la aparición de información sobre herramientas al editar documentos. A veces hay que esperar mucho tiempo para ver la reacción del editor al editar scripts JS. El segundo es un árbol de navegación bastante inconveniente. En tercer lugar, algunos complementos pueden "colgar" el editor, evitando que se cierre normalmente y guardando la configuración.Hoy consideraremos uno de los programas que usaremos para trabajar con el diseño de página: se trata de Brackets. Puede descargar e instalar el programa desde el sitio web oficial en corchetes.io. No hay nada complicado en la instalación en sí, pero la configuración para un trabajo conveniente le llevará 5 minutos.
Instalar complementos en Brackets
Instalar complementos es tan fácil como dos y dos. Lanzamos Brackets, buscamos el panel del lado izquierdo y seleccionamos el botón “Extension Manager”.
En la primera ejecución, el programa inicializa las extensiones, actualizando su base de datos. El administrador de extensiones de Brackets tiene tres pestañas: Disponible, Temas, Instalado. En consecuencia, nos interesa la pestaña. Disponible.
En el campo de búsqueda, ingrese el nombre del complemento, seleccione el complemento y haga clic en "Instalar". Después de instalar todos los complementos, es recomendable reiniciar el programa.
Aquí hay una lista de complementos que necesitaremos:
- Hormiga- un complemento que le permite acelerar significativamente la escritura de código html y css utilizando abreviaturas y abreviaturas. Entonces, si desea que el signo de exclamación (!) se convierta en una página html completa después de presionar la tecla de tabulación, entonces necesita este complemento. También le permite envolver texto con etiquetas HTML.
- Pestañas - Trabajo personalizado es un complemento que agrega hermosas pestañas a Brackets. Marca los archivos no guardados con círculos verdes. El objetivo principal del complemento es hacer que el trabajo sea más visual.
- Desplazamiento excesivo- un complemento que le permite desplazar el código hasta el final de la página e incluso desplazar un área vacía.
- Fuente del código- en las versiones modernas de Brackets, te permite cambiar la fuente del código. En versiones anteriores, es simplemente necesario, ya que el programa mostraba la fuente rusa muy fea.
- Corchetes Menú contextual adicional- agrega muchas "cosas útiles" convenientes al menú contextual, por ejemplo, elementos "Copiar" y "Pegar".
- Guardar archivos automáticamente en el desenfoque de la ventana- Complemento para guardar automáticamente los archivos abiertos en el momento en que la ventana del programa pierde el foco (por ejemplo, si cambia al navegador).
Les recuerdo que después de instalar los complementos, vuelvan a cargar Brackets.
También mire nuestro video sobre la instalación de complementos en Brackets.
