Vi um artigo apresentando a Webstrom na Internet e senti que a função é realmente poderosa. Eu também sei por que os arquivos transmitidos ao GitHub no front-end do Alibaba têm um arquivo .idea. (Dizem que Taobao recomenda escrever JS para usar a Webstrom dentro dela)
Podemos entender que o IDE integra muitos recursos que você deseja ou os recursos que você não deseja. Em outras palavras, os editores com muitos plug-ins são instalados, então até agora, ainda sinto que não há necessidade de instalar nenhum plug-ins.
Então vamos começar a apresentar os recursos especiais do Webstrom :
Webstorm é uma ferramenta comercial de desenvolvimento JavaScript lançada pela JetBrains
Qualquer editor precisa ser salvo (Ctrl + S), que é o recurso de edição de software em todas as plataformas de vitória, mas o canto superior direito do arquivo de edição da Webstorm não tem esse familiar*.
Benefícios: Depois de eliminar o Ctrl + S, você pode ver a página de resultado sem mover o mouse.
Desvantagem: sem o logotipo anterior *, ele será armazenado imediatamente se o teclado for operado incorretamente.
Enquanto o arquivo estiver fechado, não haverá histórico para nenhum editor, mas o WebStorm tem. VCS-> História local -> Show History (Chave de atalho: Alt+~ -> 7)
Vantagem: Desde que a WebStorm não esteja fechada, seu arquivo poderá ser retornado à operação anterior a qualquer momento (é por isso que o Ctrl+Y é a razão pela qual na Webstorm, é por causa da exclusão de uma linha).
Desvantagens: Esses registros históricos desapareceram depois que a tempestade da web é fechada e reiniciada; Outra desvantagem é que o consumo de memória causado por isso será inevitavelmente relativamente grande.
Qualquer editor não possui uma versão local, exceto o Server SVN, mas o WebStorm fornece um histórico de modificação de arquivos local (tecla de atalho: Alt+Shift+C). Você também pode Ctrl + E para exibir o arquivo aberto recentemente.
Benefícios: equivalente ao SVN local.
Desvantagem: o consumo de memória deve ser relativamente grande.
Integra Zencoding, HTML5, FTP, Edição Instantânea (Chrome), Conclusão Automática, Javascript Debugger, JSLINT, menos suporte, suporte ao CoffeeScript, Node.js, Teste de unidade, controle integrado de versão Git e SVN e outros recursos.
Ao escrever CSS, você solicitará de maneira inteligente vários arquivos e imagens, portanto não precisa mais confirmar se esse arquivo existe.
Outros recursos são introduzidos. Se você quiser saber mais, pode ir ao site oficial da Webstrom para continuar pesquisando. Depois de ler esta introdução e tantas características poderosas, você deve experimentar este lendário artefato de front-end imediatamente? Hum.
Primeiro, depois de baixar o Webstrom na página de download oficial, clique em Instalar e continue até a próxima etapa. Finalmente, a interface do código de registro aparecerá, porque o Webstrom é um IDE comercial e, é claro, o front -end da seda do Tianchao não tem esse dinheiro para comprar um artefato tão caro. Não se preocupe, podemos usar a tecla Webstorm para aprender a usar esse artefato front-end. Hehe ~~~~
Depois que a instalação for bem -sucedida, definitivamente me sentirei um pouco desconfortável, assim como acho que esse esquema de cores é realmente muito sensato. Existem algumas configurações que eu também não quero. Então, abaixo, listarei as configurações que estou acostumado.
Algumas dicas de configuração após a instalação da Webstorm :
Como mudar o tema (esquema de fontes e cores):
Arquivo -> Configurações -> Editor -> Cores e fontes -> Nome do esquema. Endereço para download de temas
Como impedir a Webstorm de abrir os arquivos do projeto ao iniciar:
Arquivo -> Configurações-> Remova geral Reabrir o último projeto na inicialização.
Como exibir perfeitamente chinês:
Verifique a substituição das fontes padrão por (não recomendado) no arquivo -> Configurações-> Aparência, Definir nome: NSIMSUN, Tamanho: 12
Como exibir números de linha:
Arquivo -> Configurações-> Editor, "Mostrar números de linha" Verifique e o número da linha será exibido.
Como envolver o código automaticamente:
Arquivo -> Configurações -> Editor "Use Soft Wraps in Editor" está viciado e o código embrulhará automaticamente a linha
Como clicar no cursor, ele será exibido no final desta linha:
Arquivo -> Configurações-> Editor "Permita a colocação do Caret após o final da linha", basta remover o gancho.
Como modificar a chave rápida:
Arquivo-> Configurações-> Chavesp e clique duas vezes na função que você deseja modificar rapidamente. Haverá uma caixa rápida. Siga os prompts.
Mude para as chaves rápidas que você está familiarizado com o editor:
Arquivo -> Configurações-> O keymap suporta IDEs convencionais, como Visual Studio, Eclipse e NetBeans.
Javascript Class Library Slots.
Arquivo -> Configurações -> Javascript -> Bibliotecas -> Selecione a biblioteca da classe JavaScript que você costuma usar na lista e, finalmente, o download e a instalação ficará OK.
Ao desenvolver JS, verifica -se que o retorno CTRL + é necessário para selecionar candidatos:
Arquivo -> Configuração -> Editor -> Conclusão do código -> pré -selecionar a primeira sugestão: "Smart" para "sempre"
Prompt JS é lento
Arquivo -> Conclusão do código -> AutoPopup em 1000 a 0
Configuração do Git:
Arquivo -> Configurações -> Editor -> Github, entre e altere a conta do Github, se não houver git, você não precisa.
Instalação do plug -in:
Arquivo -> Plugins, selecione os plugins poderosos e instale -os. (O plugin "CSS-X-Fire" é usado para modificar os atributos CSS usando o Firebug, o código CSS no editor também mudará.)
Atualizar mais tarde
Experiência de uso da Webstorm
Função favorita:
Quando o diretório do projeto é enorme, algumas subdiretas estão abertas com muita frequência, mas os níveis são muito profundos. Neste momento, você pode adicionar o diretório aos seus favoritos. Após a adição bem -sucedida, há um menu "favoritos" à esquerda.
Navegação de pão de espraça:
Além da página do projeto à esquerda, você pode selecionar um diretório, no menu superior, um diretório semelhante à navegação de breção do site também pode obter a mesma função. Clicar em cada diretório terá um menu suspenso para exibir os subdiretos sob ele, o que é muito prático.
Interface construtora:
Se os comentários estiverem alinhados com o formato, será exibido. Se for um arquivo JS, é uma função e objeto da classe JS; Se for um arquivo CSS, é um resumo do arquivo CSS; Se for um arquivo HTML, é um diagrama de estrutura de nó. A propósito, estes são para a conveniência de visualizar a estrutura do código.
Interface TODO:
Esta interface aparecerá se você adicionar comentários de TODO ao código
Interface de código de coluna dupla:
Clique com o botão direito do mouse no arquivo na guia Código e clique com o botão direito do mouse-> derramado verticalmente (duas telas à esquerda e direita) ou derramou horizontalmente (duas telas na parte superior e inferior)
Recursos de história local:
Uma boa maneira de recuperar o código
Use git
O WebStorm integra apenas operações comuns do Git e não pode substituir completamente as ferramentas da linha de comando. No canto inferior direito da interface, você pode verificar em qual git você está. Você também pode clicar para alternar ou criar uma nova ramificação acima.
Verifique a diferença entre o código atual e o código do repositório:
Clique com o botão direito do mouse em qualquer área da interface de código, selecione Git -> Compare e selecione a biblioteca de versões que você deseja comparar.
Descrição da chave de atalho da Webstorm:
Editando edição de teclas de atalho relacionadas
Ctrl + Espaço:
Conclusão básica do código (o nome de qualquer classe, método ou variável) Conclusão do código básico (qualquer classe, função ou nome da variável), alterado para alt+s
Ctrl + Shift + Enter:
Declaração completa completa a declaração atual
Ctrl + P:
Informações sobre o parâmetro (dentro do método Call Argumments) Informações do parâmetro Inclui parâmetros de chamada de método
Ctrl + mouse sobre o código
Informações breves informações simples
Ctrl + F1
Mostrar descrição do erro ou aviso no CARE Display Error ou aviso no atendimento
Alt + inserir
Gere código… (Getters, Setters, Constructors) Crie um novo arquivo ou gerar código,… Construtores, você pode criar métodos Getters e Setter para qualquer campo da classe
Ctrl + o
Métodos de sobrecarga de métodos de substituição
Ctrl + i
Método de implementação de métodos de implemento
Ctrl + alt + t
Cercando com ... (se, senão, tente, pegue, por etc.) usa * para cercar a linha de código selecionada ( * inclui se, enquanto, tente pegar etc.)
Ctrl + /
Comentário/descomamento com comentário de linhas de comentário de linha/descomment
Ctrl + Shift + /
Comentário/descomamento com comentários em bloco Comentário/descomment
Ctrl + W.
Selecione o aumento dos blocos de código com sucesso Selecione blocos de código, geralmente seleção incremental
Ctrl + Shift + W
Diminuir a seleção atual para o estado anterior o fallback da chave de atalho anterior, o código de seleção de decréscimo
Alt + q
Informações de contexto Informações de contexto
Alt + digite
Mostrar ações de intenção e fixos rápidos
Ctrl + Alt + L
Código de Código Reformato Código de acordo com o formato de modelo
Guia/ shift + guia
Indent/linhas selecionadas não indentas Recupeamento/linhas selecionadas não indicadas Recunda/indentação não indental
Ctrl + X ou Shift + Excluir
Corte a linha atual ou bloco selecionado para a área de transferência
Ctrl + C ou Ctrl + Inserir
Copie a linha atual ou o bloco selecionado para copiar a linha de folga ou o bloco de código selecionado para a área de transferência
Ctrl + V ou Shift + Inserir
Colar da área de transferência
Ctrl + Shift + V
Cole de buffers recentes Cole o conteúdo mais recente no buffer
Ctrl + d
Duplicar a linha atual ou o bloco selecionado copiar a linha atual ou o bloco de código selecionado
Ctrl + y
Excluir linha na linha CARE DELETE NO CURSOR
Ctrl + Shift + J
Junção de linha inteligente (apenas HTML e JavaScript)
Ctrl + enter
Smart Line Split (apenas HTML e JavaScript)
Shift + Enter
Inicie a nova linha
Ctrl + Shift + U
Alternar o caso da Word no cuidado ou conversão de casos de bloco selecionada
Ctrl + Shift +]/[
Selecione até o código do bloco de código/iniciar selecione até o final/início do bloco de código
Ctrl + Excluir
Exclua ao fim de excluir o final do texto
Ctrl + Backspace
Exclua para iniciar a palavra Starte Excluir Texto Iniciar
Ctrl + Numpad +/-
Bloco de Código de Expanda/Colapso Expanda/Código de Colapso Bloco
Ctrl + Shift + Numpad +
Expandir tudo
Ctrl + Shift + Numpad-
Desmaiar tudo
Ctrl + F4
Guia de editor ativo fechado tag de edição ativa próxima
Pesquise/substitua as teclas de atalho de pesquisa/substituição
Ctrl + f
Encontre o código de pesquisa rápido no arquivo atual
Ctrl + Shift + F
Encontre no caminho Especifique o caminho a ser encontrado no arquivo
F3
Encontre a seguir
Shift + F3
Encontre anterior
Ctrl + r
Substitua a substituição do código no arquivo atual
Ctrl + Shift + R
Substitua no caminho Especifique a substituição de código em lote no arquivo
Pesquisa de pesquisa Chaves de atalho relacionadas à pesquisa
Alt + f7/ctrl + f7
Encontre usos/Encontre usos no arquivo Encontre o uso/Encontre o uso
Ctrl + Shift + F7
Destacar os usos no arquivo
Ctrl + alt + f7
Mostre uso
Correndo
Alt + Shift + F10
Selecione Configuração e Execute
Alt + Shift + F9
Selecione Configuração e depuração Selecione a arquitetura para corrigir vulnerabilidades
Shift + F10
Correr
Shift + F9
Vulnerabilidades de patch de depuração
Ctrl + Shift + F10
Execute a configuração de contexto do editor Run Content Architecture do editor
Ctrl + Shift + X
Executar linha de comando
Depuração de depuração Chaves de atalho relacionadas
F8
Passo não entra na função
F7
Entre passo a passo
Shift + F7
Smart entra em um passo inteligente para
Shift + F8
Saia
Alt + F9
Corra para o cursor Run to Cursor
Alt+ F8
Avalie a expressão
F9
Currículo Programa reinicia o programa
Ctrl + F8
Alternar o ponto de interrupção do ponto de interrupção do ponto de interrupção
Ctrl + Shift + F8
Ver pontos de interrupção
Chaves de atalho relacionadas ao posicionamento de navegação
Ctrl + n
Vá para a aula saltando para a classe especificada
Ctrl + Shift + N
Vá para o arquivo, encontre rapidamente arquivos em um projeto através de nomes de arquivos
Ctrl + alt + shift + n
Vá para o símbolo, encontre posição da função por um personagem
Alt + direita/ esquerda
Vá para a guia do editor seguinte/ anterior, vá para a opção de editor a seguir/ anterior
F12
Volte para a janela da ferramenta anterior
Esc
Vá para o editor (da janela da ferramenta) Digite o editor da janela da ferramenta
Shift + ESC
Ocultar janela ativa ou a última
Ctrl + Shift + F4
Feche a execução/mensagem/encontre/… FECT/… FECHAR EMPRESSIONO….
Ctrl + g
Vá para a linha saltar para a linha
Ctrl + e
Pop -up de arquivos recentes, o arquivo aberto recentemente
Ctrl + alt + esquerda/direita
Navegue para trás/para a frente, navegue para frente/para trás
Ctrl + Shift + Backspace
Navegue até a última edição do local, navegue até a última edição do local
ALT + F1
Selecione Arquivo ou símbolo atual em qualquer visualização Encontre a localização do código ou arquivo atualmente selecionado em outros módulos de interface
Ctrl + B ou Ctrl + Clique
Vá para a declaração saltar para a definição
Ctrl + alt + b
Vá para a implementação (s) Método de Jump Método Localização
Ctrl + Shift + B
Vá para Digite Declaration Jump Method Definição
Ctrl + Shift + i
ABERTA RAIS RÁPIDA DE DEFINIÇÃO ABERTA DE Pesquisa rápida
Ctrl + u
Vá para o método de salto super-metod/super classe/super-classe
Alt + para cima/para baixo
Vá para o método anterior/próximo, mova rapidamente o posicionamento entre os métodos
Ctrl +]/[
Mova para o código Block End/Start Jump to End/Start of Encoding Block
Ctrl + F12
Estrutura pop -up da estrutura do arquivo pop -up
Ctrl + h
Hierarquia de hierarquia de tipos
Ctrl + alt + h
Hierarquia de chamadas Hierarquia de chamadas
F2/ shift + f2
PRÓXIMO/ANTERIOR ERRO DESPECTADO PULL para o próximo/anterior Erro, destaque o erro ou aviso para localizar rapidamente, use esta tecla de atalho para pular rapidamente entre as instruções erradas.
F4/CTRL + ENTER
Editar fonte/exibir fonte de edição/fonte de visualização
Alt + home
Mostrar barra de navegação
F11
Alternar marcador de alternância de marcadores
Ctrl + F11
Alterar marcador com Mnemonic
Ctrl + #[0-9]
Vá para o salto de marcador numerado para a marca numerada
Shift + F11
Mostrar marcador
REFATORIAGEM REFATORAGEM RETORTE RETORTE CHAVES
F5
Cópia
F6
Mover
Alt + exclua
Excluir seguro seguro excluir
Shift + F6
Renomear renomear
Ctrl + alt + n
Variáveis variáveis em linha variáveis
Ctrl + alt + m
Método de extração (somente JavaScript) Função de Extrato
Ctrl + Alt + V
Variável de introdução
Ctrl + alt + f
Campo de introdução
Ctrl + Alt + C
Introdução constante
VCS/História Local Sistema de Controle de Versão/História Local Tectas de Atalho Relacionadas
Alt + backQuote ()
'VCS'Quick pop -up VCs rapidamente
Ctrl + k
Comprome o Projeto para o VCS Enviar Projeto para VCs
Ctrl + T.
Atualizar projeto do projeto de atualização do VCS da VCS
Alt + shift + c
Veja as mudanças recentes Ver as últimas alterações
Chaves de atalho relacionadas comumente usadas para geral
Ctrl + Shift + A
Encontre ação a função de encontrar e chamar o editor
Alt + #[0-9]
Abra a janela da ferramenta correspondente alternar rapidamente para abrir o módulo de interface
Ctrl + alt + f11
Alternar o modo de tela inteira alternar o modo de tela inteira
Ctrl + Shift + F12
Alternar o editor de maximização
Alt + shift + f
Adicionar aos favoritos Adicione o arquivo atual aos seus favoritos
Alt + shift + i
Inspecione o arquivo atual com o perfil atual, verifique o arquivo atual com o perfil atual
Ctrl + backQuote ()
Esquema de corrente de corrente de interruptor rápido esquema de corrente rápida
Ctrl + alt + s
Abra a caixa de diálogo de configuração Abra a caixa de diálogo Configurações
Guia Ctrl +
Alterne entre as guias e a conversão da janela da ferramenta (conflitos com as teclas de atalho do Windows)
Você já conheceu esta ferramenta de desenvolvimento JavaScript Webstrom? Mal posso esperar para experimentar e garanto que você vai adorar depois de usá -lo.