Os suportes da Adobe são um ambiente de desenvolvimento integrado simples e poderoso para HTML, CSS e JavaScript. Ele suporta adicionar plug-ins para fornecer extensões funcionais adicionais. Atualmente, os plug-ins disponíveis, como adicionar detecção de erros, prefixo CSS específico do navegador, anotações JSDOC etc. O editor a seguir apresenta brevemente o uso e as configurações dos colchetes:
1. Configurações do projeto
1. Suportes abertos, toda a interface é muito simples e a barra de menu superior fornece apenas o arquivo> função do editor de saída. À esquerda está a árvore de arquivos da estrutura da organização do projeto. Use Ctrl/CMD+Shift+H para chamar e fechar a árvore de arquivos. O lado direito é a área de edição, a parte superior é a barra de ferramentas, a parte do meio é a área de documentos e a parte inferior é a área imediata.
2. Abra o projeto. Use o comando Arquivo> Abra a pasta para abrir a pasta do projeto. O nome do projeto da árvore de arquivos à esquerda é atualizado para o nome da pasta do projeto e a árvore de arquivos é atualizada para a árvore de arquivos do projeto atual.
Clique no botão esquerdo no nome do projeto para exibir o menu de edição do projeto. O menu de edição exibirá o projeto histórico e o comando de edição do projeto.
Comando de pasta aberta: abra um novo projeto.
Comando Configurações do projeto: define o endereço da Web do projeto atual, que será usado durante a depuração e visualização da página.
Requisitos de configuração: Deve ser um endereço da Web começando com http: //.
Conforme mostrado na figura acima, quando definido como http://127.0.0.1/demo/slide, a página correspondente será aberta através do endereço da Web quando o navegador for visualizado.
Se não estiver definido, a página será aberta através do endereço da letra da unidade do arquivo.
2. Edição de arquivo
Clique em Index.html na árvore de arquivos e abra o documento index.html na área principal.
1. O brackest verificará se o documento está em conformidade com a especificação HTML. Como mostrado na figura abaixo, há um bloco de estilo em 20 linhas que precisam ser colocadas no nó da cabeça.
2. Coloque o cursor no nome da etiqueta de um atributo de classe ou identificação, pressione Ctrl/CMD + E (editar) ou edição de saída. Os colchetes pesquisarão todos os arquivos CSS no projeto e abrirão um editor incorporado para incorporá -lo no arquivo HTML, permitindo modificar rapidamente o código CSS.
Quando a tag de classe/identificação atual possui várias definições de estilo, a janela de edição fornece um botão de alternância para alternar o estilo de exibição ou você pode usar as teclas de seta ALT + UP/UP/APARAÇÃO para alternar.
Deve -se notar que os colchetes detectarão o documento HTML atual e todos os arquivos CSS no projeto para encontrar estilos de classe/ID, mesmo que alguns arquivos CSS não sejam referenciados no documento HTML atual.
3. Os colchetes também suportam visualização/edição rápida das definições de objetos JS. Coloque o cursor em um nome de função JS, pressione Ctrl/cmd + E (editar) ou edição de saída.
4. Os colchetes possuem seletor de cores embutido, fornecendo formulários de codificação de cores de RGBA, Hex e HSLA. Coloque o cursor em um código de cores, pressione Ctrl/CMD + E (editar). Você precisa usar a tecla ESC para sair da janela de coletor de cores.
3. Visualização instantânea
Os colchetes fornecem visualização instantânea das páginas da web. Ao usar essa função, os colchetes chamam o navegador Chrome para abrir a página atual. Depois de modificar o HTML, o CSS, o JavaScript e o Saving, o conteúdo modificado responderá à página no navegador imediatamente sem atualizar manualmente a página. Este é um dos maiores destaques dos colchetes. Abençoado com dois codificadores de monitor, você pode exibir colchetes e cromo na tela dividida, modificação instantânea de visualizações instantâneas sem alternar editor/navegador e páginas refrescantes.
Algumas limitações do atual recurso de visualização ao vivo:
Ele funciona apenas com o navegador Chrome como o navegador de destino, você deve instalar o Chrome.
Ele depende da depuração remota no Chrome, que é ativada por um sinalizador de linha de comando. Em um Mac, se você já está usando o Chrome, inicie a visualização instantânea, os colchetes perguntarão se você deseja reiniciar o Chrome para ativar a depuração remota.
Apenas um arquivo HTML pode ser visualizado ao mesmo tempo - se você alternar outro arquivo HTML, os suportes fecharão a visualização original.
4. Algumas teclas de atalho
Ctrl/cmd+shift+h pode chamar e fechar a árvore de arquivos
Ctrl/cmd + e visualização rápida/editar estilo css/função javascript
Ctrl/cmd + +/- zoom dentro e fora do tamanho da fonte da área de edição
Ctrl/cmd + 0 redefinir o tamanho da fonte da área de edição
Ctrl/cmd + alt + p liga a função de visualização instantânea
Comentários Ctrl / CMD + / Linha
Comentários ctrl / cmd + alt + / bloco
Nota: Ao comentar o código CSS e o código HTML, você pode usar apenas as teclas de atalho de comentários.