Vi un artículo que introdujo WebStrom en Internet y sentí que la función es realmente poderosa. También sé por qué los archivos transmitidos a GitHub en el front-end de Alibaba tienen un archivo .idea. (Se dice que Taobao recomienda escribir JS para usar WebStrom dentro de él)
Podemos entender que IDE integra muchas características que desea, o características que no desea. En otras palabras, los editores con muchos complementos están instalados, así que hasta ahora, todavía siento que no hay necesidad de instalar ningún complemento para ello.
Entonces comencemos a presentar las características especiales de WebStrom :
WebStorm es una herramienta comercial de desarrollo de JavaScript lanzada por JetBrains
Cualquier editor necesita ser guardado (CTRL + S), que es la característica de editar software en todas las plataformas WIN, pero la esquina superior derecha del archivo de edición de WebStorm no tiene tan familiares*.
Beneficios: después de eliminar Ctrl + S, puede ver la página de resultados sin mover el mouse.
Desventaja: sin el logotipo * anterior, se almacenará inmediatamente si el teclado está operado incorrectamente.
Mientras el archivo esté cerrado, no habrá antecedentes para ningún editor, pero Webstorm lo tiene. VCS-> Historia local -> Show History (tecla de acceso directo: Alt+~ -> 7)
Ventaja: mientras Webstorm no esté cerrado, su archivo se puede devolver a la operación anterior en cualquier momento (es por eso que Ctrl+Y es la razón por la cual en Webstorm, se debe a eliminar una línea).
Desventajas: estos registros históricos se han ido después de que se cierre y se reinicie Webstorm; Otra desventaja es que el consumo de memoria causado por esto inevitablemente será relativamente grande.
Cualquier editor no tiene una versión local, excepto el SVN del servidor, pero WebStorm proporciona un historial de modificación de archivos local (tecla de acceso directo: Alt+Shift+C). También puede CTRL + E para aparecer el archivo abierto recientemente.
Beneficios: equivalente a la SVN local.
Desventaja: el consumo de memoria debe ser relativamente grande.
Integra Zencoding, HTML5, FTP, Edición instantánea (Chrome), finalización automática, JavaScript Debugger basado en Mozilla, JSLint, menos soporte, soporte de cafés, Node.js, pruebas unitarias, control de versión GIT y SVN integrado y otras características.
Al escribir CSS, solicitará inteligentemente varios archivos e imágenes, por lo que ya no necesita confirmar si este archivo existe.
Se introducen otras características. Si desea saber más, puede ir al sitio web oficial de WebStrom para continuar buscando. Después de leer esta introducción y tantas características poderosas, ¿se le insta a probar este legendario artefacto frontal de inmediato? .
Primero, después de descargar WebStrom en la página de descarga oficial, haga clic en Instalar y luego continúe al siguiente paso. Finalmente, aparecerá la interfaz del código de registro, porque WebStrom es un IDE comercial y, por supuesto, la parte delantera de seda de Tianghao no tiene ese dinero para comprar un artefacto tan costoso. No se preocupe, podemos usar la tecla WebStorm para aprender a usar este artefacto frontal. Jeje ~~~~
Después de que la instalación sea exitosa, definitivamente me sentiré un poco incómodo, al igual que creo que este esquema de color es realmente demasiado sensato. Hay algunas configuraciones que tampoco quiero. Luego a continuación enumeraré la configuración a la que estoy acostumbrado.
Algunos consejos de configuración después de la instalación de Webstorm :
Cómo cambiar el tema (fuentes y esquema de color):
Archivo -> Configuración -> Editor -> Colores y fuentes -> Nombre del esquema. Dirección de descarga del tema
Cómo evitar que Webstorm abriendo archivos del proyecto al comenzar:
Archivo -> Configuración-> General Eliminar Reopen Last Project en el inicio.
Cómo mostrar perfectamente el chino:
Verifique las fuentes predeterminadas de anulación por (no recomendado) en el archivo -> Configuración-> Apariencia, Nombre de configuración: NSIMSUN, Tamaño: 12
Cómo mostrar números de línea:
Archivo -> Configuración-> Editor, "Mostrar números de línea" verifíquelo y se mostrará el número de línea.
Cómo envolver el código automáticamente:
Archivo -> Configuración -> Editor "Usar envolturas suaves en el editor" está conectado y el código envolverá automáticamente la línea
Cómo hacer clic en el cursor, se mostrará al final de esta línea:
Archivo -> Configuración-> Editor "Permitir la colocación de Caret después del final de la línea" Simplemente retire el gancho.
Cómo modificar la tecla rápida:
Archivo-> Configuración-> KEYMAP, y luego haga doble clic en la función que desea modificar rápidamente. Habrá un cuadro inmediato. Sigue las indicaciones.
Cambie a las teclas rápidas que está familiarizado con el editor:
Archivo -> Configuración-> KEYMAP admite IDES convencionales como Visual Studio, Eclipse y NetBeans.
Solicitudes de biblioteca de clases JavaScript.
Archivo -> Configuración -> JavaScript -> Bibliotecas -> Luego seleccione la biblioteca de clases JavaScript que usa a menudo en la lista, y finalmente descargar e instalar estará bien.
Al desarrollar JS, se encuentra que se necesita CTRL + retorno para seleccionar candidatos:
Archivo -> Configuración -> Editor -> Código de finalización -> preseleccionar la primera sugerencia: "inteligente" a "siempre"
El aviso de JS es lento
Archivo -> Código de finalización -> AutoPopup en 1000 a 0
Configuración de GIT:
Archivo -> Configuración -> Editor -> GitHub, entra y cambia la cuenta GitHub, si no hay GIT, no lo necesitas.
Instalación del complemento:
Archivo -> complementos, luego seleccione los potentes complementos e instálelos. (El complemento "CSS-X-Fire" se utiliza para modificar los atributos CSS usando Firebug, el código CSS en el editor también cambiará).
Actualización más tarde
Experiencia de uso de Webstorm
Función de favoritos:
Cuando el directorio del proyecto es enorme, algunos subdirectorios están abiertos muy a menudo, pero los niveles son muy profundos. En este momento, puede agregar el directorio a sus favoritos. Después de una adición exitosa, hay un menú de "favoritos" a la izquierda.
Navegación de panrumb:
Además de la página del proyecto a la izquierda, puede seleccionar un directorio, en el menú superior, un directorio similar al sitio web Breadcrumb Navigation también puede lograr la misma función. Al hacer clic en cada directorio, tendrá un menú desplegable para mostrar los subdirectorios debajo, lo cual es muy práctico.
Interfaz de constructor:
Si los comentarios están en línea con el formato, aparecerá. Si es un archivo JS, es una función y objeto de la clase JS; Si se trata de un archivo CSS, es un resumen del archivo CSS; Si es un archivo HTML, es un diagrama de estructura de nodo. Por cierto, estos son para la conveniencia de ver la estructura del código.
interfaz de to:
Esta interfaz aparecerá si agrega comentarios de TODO al código
Interfaz de código de columna doble:
Haga clic derecho en el archivo en la pestaña Código y haga clic con el botón derecho-> derramado verticalmente (dos pantallas a la izquierda y a la derecha) o se derramó horizontalmente (dos pantallas en la parte superior e inferior)
Características de la historia local:
Una buena manera de recuperar el código
Use Git
WebStorm solo integra operaciones comunes de GIT y no puede reemplazar completamente las herramientas de línea de comandos. En la esquina inferior derecha de la interfaz, puede verificar en qué rama GIT se encuentra. También puede hacer clic para cambiar o crear una nueva rama arriba.
Verifique la diferencia entre el código actual y el código del repositorio:
Haga clic con el botón derecho en cualquier área de la interfaz de código, seleccione Git -> Compare y seleccione la biblioteca de versiones que desea comparar.
Descripción de la tecla de acceso directo de Webstorm:
Edición de llaves de acceso directo de edición
CTRL + espacio:
Finalización básica de código (el nombre de cualquier clase, método o variable) finalización básica del código (cualquier clase, función o nombre de variable), cambiado a Alt+S
Ctrl + Shift + Enter:
Declaración completa Completa la declaración actual
CTRL + P:
Información de parámetros (dentro de los argumentos de llamadas de método) La información del parámetro incluye los parámetros de llamadas de método
Ctrl + mouse sobre código
Información breve información simple
CTRL + F1
Mostrar descripción de error o advertencia en el error de visualización de atención o advertencia en la atención
Alt + inserto
Generar código ... (getters, setters, constructores) crear un nuevo archivo o generar código, ... constructores, puede crear métodos getters y setter para cualquier campo en la clase
CTRL + O
Métodos de anulación Método de sobrecarga
Ctrl + I
Implementar métodos Método de implementación
Ctrl + Alt + T
Rode con ... (si, de lo contrario, prueba, atrapa, para, etc.) usa * para rodear la línea de código seleccionada, ( * incluye si, mientras, intente atrapar, etc.)
Ctrl + /
Comentario/incommento con comentario de comentario de línea de línea/desenfrenado
Ctrl + Shift + /
Comentario/incommento con comentario de bloques Bloque Comentario/Uncopment
Ctrl + W
Seleccione Bloques de código Aumento con éxito Seleccionar bloques de código, generalmente selección incremental
Ctrl + Shift + W
Disminución de la selección actual para el estado anterior El retroceso de la clave de acceso directo anterior, el código de selección de disminución
Alt + Q
Información de contexto Información de contexto
Alt + Enter
Mostrar acciones de intención y fijaciones rápidas
Ctrl + Alt + L
Formatos de código de reformato Código de acuerdo con el formato de plantilla
Tab/ Shift + Tab
Líneas seleccionadas de sangría/Undent
Ctrl + x o shift + eliminar
Corte la línea actual o el bloque seleccionado al portapapeles
Ctrl + c o ctrl + insertar
Copie la línea actual o el bloque seleccionado para copiar la línea actual o el bloque de código seleccionado al portapapeles
Ctrl + V o Shift + Insert
Pegar del portapapeles
Ctrl + Shift + V
Pegar de los buffers recientes Pegue el último contenido en el búfer
Ctrl + D
Línea actual duplicada o bloque seleccionado copia la línea actual o bloque de código seleccionado
CTRL + Y
Eliminar línea en la línea de eliminación de cuidado en el cursor
Ctrl + Shift + J
Smart Line Join (HTML y JavaScript solamente)
CTRL + Enter
Smart Line Split (solo HTML y JavaScript)
Shift + Enter
Iniciar nueva línea
Ctrl + Shift + U
Caso de alternativa para Word at CARE o conversión de caja de bloque seleccionada
Ctrl + Shift +]/[
Seleccione TIPA BLOQUE DE CÓDIGO FIN/Inicio Seleccionar hasta que finalice el final/inicio del bloque de código
Ctrl + Eliminar
Eliminar a Word End Eliminar el texto final
CTRL + Backspace
Eliminar a Word Inicio Eliminar el texto Comenzar
Ctrl + Numpad +/-
BLOQUE DE CÓDIGO EXPAND/COLOPSE BLOQUE DE CÓDIGO DE EXPAND/COLOPSE
Ctrl + Shift + Numpad +
Expandir todo
Ctrl + Shift + Numpad-
Colapsar todo
CTRL + F4
Cerrar la pestaña del editor activo Cerrar etiqueta de edición activa
Buscar/reemplazar buscar/reemplazar claves de acceso directo relacionados
Ctrl + F
Encuentre el código de búsqueda rápido en el archivo actual
Ctrl + Shift + F
Buscar en la ruta Especifique la ruta para encontrar en el archivo
F3
Encontrar a continuación
Cambio + F3
Encontrar anterior
Ctrl + R
Reemplace el reemplazo del código en el archivo actual
Ctrl + Shift + R
Reemplazar en ruta Especifique la sustitución del código de lotes en el archivo
Claves de acceso directo relacionados con la búsqueda de búsqueda de uso
Alt + F7/Ctrl + F7
Encuentre usos/encuentres usos en el archivo Find Usage/Find Usage
Ctrl + Shift + F7
Resaltar los usos en el archivo
CTRL + ALT + F7
Mostrar uso
Correr
Alt + Shift + F10
Seleccione la configuración y ejecute
Alt + Shift + F9
Seleccione Configuración y Depurar Seleccione la arquitectura para corregir vulnerabilidades
Cambio + F10
Correr
Cambio + F9
Vulnerabilidades del parche de depuración
Ctrl + Shift + F10
Ejecutar la configuración de contexto desde el editor Ejecutar la arquitectura de contenido del editor
Ctrl + Shift + X
Ejecutar línea de comando
Depuración de llaves de acceso directo de depuración
F8
Pasar no ingresa a la función
F7
Pase en paso a paso
Cambio + F7
Paso inteligente en un paso inteligente en
Cambio + F8
Salir
Alt + F9
Corre para cursor Run to Cursor
Alt+ F8
Evaluar la expresión
F9
El programa de reanudación reinicia el programa
CTRL + F8
Punto de interrupción del interruptor de punto de interrupción de alternativa
Ctrl + Shift + F8
Ver puntos de interrupción
Posicionamiento de navegación Teclas de acceso directo relacionados con
Ctrl + N
Ir a la clase saltar a la clase especificada
Ctrl + Shift + N
Vaya a archivar rápidamente Buscar archivos en un proyecto a través de nombres de archivos
Ctrl + Alt + Shift + N
Vaya al símbolo encontrar la posición de la función por un carácter
Alt + derecha/ izquierda
Vaya a la pestaña Siguiente/ Anterior Editor Vaya a la opción Siguiente/ Editor anterior
F12
Vuelve a la ventana de herramienta anterior
ESC
Vaya al editor (desde la ventana de la herramienta) Ingrese el editor desde la ventana de la herramienta
Cambio + ESC
Esconder la ventana activa o última activa
Ctrl + Shift + F4
Cerrar activo run/mensaje/find/... pestaña Cerrar actividad ...
Ctrl + G
Ir a la línea salta a la línea
CTRL + E
Archivos recientes emergentes emergentes el archivo recientemente abierto
Ctrl + Alt + Izquierda/Derecha
Navegue hacia atrás/hacia adelante Navegue hacia adelante/hacia atrás
Ctrl + Shift + Backspace
Navegue hasta la última ubicación de edición navegue hasta la última ubicación de edición
Alt + F1
Seleccione el archivo o símbolo actual en cualquier vista Busque la ubicación del código o archivo seleccionado actualmente en otros módulos de interfaz
Ctrl + B o Ctrl + Haga clic
Ir a la declaración Jump a la definición
Ctrl + Alt + B
Vaya a la implementación (s) de la ubicación de implementación del método de salto
Ctrl + Shift + B
Vaya a Tipo de definición del método de salto de declaración
Ctrl + Shift + I
Abra la búsqueda de definición rápida, la búsqueda rápida de definición
Ctrl + u
Vaya a un método de salto súper método/súper clase/súper clase
Alt + arriba/abajo
Vaya al método anterior/siguiente, mueva rápidamente el posicionamiento entre métodos
Ctrl +]/[
Mover al bloque de código final/inicio de salto al final/inicio del bloque de codificación
CTRL + F12
Estructura de archivos PopUp Structure PopUp
CTRL + H
Jerarquía de jerarquía tipo
Ctrl + Alt + H
Jerarquía de llamadas de jerarquía de llamadas
F2/ Shift + F2
Siguiente/anterior error resaltado salta al siguiente error/anterior, resalte el error o la advertencia para localizar rápidamente, use esta tecla de acceso directo para saltar rápidamente entre las declaraciones incorrectas.
F4/CTRL + Enter
Editar fuente/Ver fuente Editar fuente/Ver fuente
Alt + Inicio
Mostrar barra de navegación
F11
Marcador de marcadores de marcador de marcadores
CTRL + F11
Alternar marcador con Mnemonic
Ctrl + #[0-9]
Ir al marcador numerado saltar a la marca numerada
Cambio + F11
Espectáculo de marcadores
Refactorización de claves de atajo relacionadas con la refactorización
F5
Copiar
F6
Mover
Alt + Eliminar
Safe Eliminar Safe Eliminar
Cambio + F6
Cambiar el nombre de cambio de nombre
Ctrl + Alt + N
Variables de inserción de variables en línea
Ctrl + Alt + M
Extraer el método (solo JavaScript) Función de extracción
Ctrl + Alt + V
Variable de introducción
Ctrl + Alt + F
Campo de introducción
Ctrl + Alt + C
Introducción constante
VCS/Sistema de control de versiones de VCS/Historia Local/Historial local Cayas de acceso directo relacionados con
Alt + BackQuote ()
'VCS'quick PopUp VCS rápidamente
Ctrl + K
Comprometer el proyecto a VCS Enviar proyecto a VCS
Ctrl + t
Actualizar el proyecto del proyecto de actualización de VCS desde VCS
Alt + Shift + C
Ver cambios recientes Ver los últimos cambios
Cayos de acceso directo relacionados con comúnmente para general
Ctrl + Shift + A
Encontrar acción la función de encontrar y llamar al editor
Alt + #[0-9]
Abra la ventana de herramienta correspondiente, cambie rápidamente para abrir el módulo de interfaz
CTRL + ALT + F11
Alternar el modo de pantalla completa alternar el modo de pantalla completa
Ctrl + Shift + F12
Alternar maximizando el editor
Alt + Shift + F
Agregar a los favoritos Agregar el archivo actual a sus favoritos
Alt + Shift + I
Inspeccione el archivo actual con el perfil actual Verifique el archivo actual con el perfil actual
Ctrl + BackQuote ()
Esquema de corriente de interruptor rápido esquema de corriente de interruptor rápido
Ctrl + Alt + S
Abra el cuadro de diálogo Configuración Abra el cuadro de diálogo Configuración
Pestaña CTRL +
Cambie entre pestañas y la conversión de la ventana de herramientas (conflictos con las teclas de acceso directo de Windows)
¿Ya conoce esta herramienta de desarrollo de JavaScript WebStrom? No puedo esperar para probarlo, y te garantizo que te encantará después de usarlo.