Qual é a próxima melhor coisa para codificação? O editor de código, é claro!
Os editores de código são a segunda razão mais significativa para as guerras de fogo dos programadores (a primeira é a formatação de código).
Para alguns, o Vim é o único editor sensato já criado, enquanto para outros, tudo o que não se encaixa no mundo espiralado do Emacs, semelhante a Inception, é apenas digno de ridículo. Se você está procurando muito por atenção, tudo que você precisa fazer é ir a uma comunidade de programação e iniciar um tópico como “Por que eu acho que o X (escolha qualquer editor de código popular) é ruim/é o melhor”, pegue um pouco de cerveja e relaxe.
Argumentos, contra-argumentos e insultos continuarão entrando e saindo da discussão a noite toda, e levará muitos meses até que o veneno do tópico esfrie.
A pergunta é: por quê?
Claro, os seres humanos conseguem fazer um grande negócio com tudo, mas acho que os editores de código são específicos quando se trata de programadores. Um programador típico gasta quase todo o seu tempo (mais de 98%, se eu apostar) no editor de código de sua escolha. Eles conhecem o editor – seus pontos fortes, fracos, limites, peculiaridades e joias escondidas.
Nada é mais frustrante do que ter que lutar com o editor quando você está escrevendo código (pense em como é irritante quando você precisa enviar um e-mail demorado e urgente em um novo teclado!). Editores de código reduzem o atrito mental e permitem que você seja mais produtivo, e é por isso que eles são tão importantes e recebem tanta atenção.
Então, qual é o melhor editor de código?
Sinceramente, eu nem me atrevo a ir lá! 😀 😀
No entanto, se você gosta de desenvolvimento Web, há uma alternativa que eu quero que você pense – editores de código online! Você também pode chamá-los de editores de código baseados em nuvem.
Não confunda o editor de código com um ambiente de desenvolvimento integrado (IDE). Ambos são duas coisas diferentes e, como desenvolvedor, você deve estar familiarizado com esses IDEs multilíngue.
Em poucas palavras, estes são editores que residem inteiramente em um servidor remoto e são acessíveis através do navegador.
Soa estranho, certo?
Eu também me senti assim quando me deparei com eles 3-4 anos atrás. Por que diabos alguém iria querer entregar tudo para um navegador estúpido?
Pode até competir com um editor de código instalado nativamente?
Acontece que na maioria dos casos, e principalmente para desenvolvimento Web, a resposta é sim. Agora, embora eu não tenha adotado os editores online como meu meio principal, eu me vejo usando-os cada vez mais em cenários específicos.
Antes de nos aprofundarmos em quais editores de código existem para serem usados, vamos fazer uma pausa e pensar sobre quando os editores de código online podem fazer sentido.
últimas postagens
Configuração zero
Não sei quanto a você, mas configurar meu editor favorito ao meu gosto em um novo sistema não é algo que eu espero. Plugins, temas, fontes, atalhos, trechos, configurações . . . Há uma lista interminável de coisas que devem ser equilibradas antes que a coisa toda se torne utilizável. É fácil ignorar algo, apenas para se irritar mais tarde quando seu fluxo de trabalho é interrompido.
Por outro lado, não há nada a ver com um editor online depois que a primeira configuração termina. Compilações oficiais, atualizações, compilações noturnas, plataformas suportadas, arquitetura do sistema, sincronização FTP, pipelines de CI/CD — nada disso importa desde que você tenha um navegador!
Colaboração
Na maioria das vezes, você precisa colaborar com outros desenvolvedores ao resolver problemas ou depurar algo.
O editor de código tradicional não foi criado para isso — não há escopo para edição de código, comentários ou realce simultâneos, e é um desafio adicionar suporte para isso.
Segurança de dados
Agora, é certo que nenhum projeto hoje está sem controle de versão, o que significa que uma cópia do código existe no repositório o tempo todo. Dito isso, há momentos em que o controle de versão não é suficiente:
- Você esquece de enviar commits recém-criados e seu laptop pega fogo.
- Você tem outros arquivos importantes e despejos de dados com os quais seu código interage, embora eles não façam parte do aplicativo ativo. O que acontece com eles se o seu laptop pegar fogo?
(Ok, parece que sou obcecado por cadernos pegando fogo, mas você entendeu, certo?!)
Aplicação da disciplina
Isso também pode ser contestado no tribunal dos direitos dos desenvolvedores (se tal coisa existir), mas a verdade é que os desenvolvedores raramente sacrificam seus caprichos pelo bem comum.
Por exemplo, um entusiasta hardcore do Sublime Text sempre abraçará totalmente qualquer um dos excelentes editores do JetBrains e encontrará todas as oportunidades para apontar para sua natureza faminta de memória e desempenho mais lento.
O mesmo vale para tabulações vs. espaços (ou mesmo tabulações de dois espaços vs. tabulações de quatro espaços) — você é ingênuo se acha que os programadores de sua equipe não vão travar chifres.
Nesses casos, um editor online é uma benção – você decide as configurações dos projetos (até mesmo como o código deve ser formatado) e ele simplesmente se recusa a aceitar o trabalho até que cumpra todos os padrões. Duro para o indivíduo, talvez, mas ótimo para o projeto!
Até agora, estou ficando sem casos de uso, então vamos ver qual opção temos quando se trata de editores de código online, especialmente para desenvolvimento Web.
JSFiddleGenericName
Enquanto JSFiddleGenericName não pode substituir um editor de texto completo, ele faz um ótimo trabalho ao lidar com scripts frontend únicos.
É tão popular que sites de perguntas e respostas como o StackOverflow já suportam a incorporação de links JSFiddle diretamente em sua plataforma.
Para começar as coisas rapidamente, o JSFiddle oferece alguns clichês no início; o que significa que se você quiser obter uma demonstração de, digamos, React, iniciado, tudo o que você precisa fazer é clicar no botão relevante e começar a escrever o código. Depois de clicar em Salvar, o “fiddle” é salvo, você obtém uma URL permanente (Confira este violino bobo que criei: https://jsfiddle.net/tuqd76c4/ e observe que você pode fazer suas alterações e pressionar Salvar para criar um novo versão deste URL).
Aqui está o que torna o JSFiddle uma plataforma viável para desenvolvimento web front-end:
- Grátis para usar (sem taxas ocultas ou recursos freemium). O JSFiddle se suporta por meio de anúncios (pelo menos até o momento), e você pode ver um anúncio da Adobe no canto inferior esquerdo da captura de tela acima.
- Recursos de colaboração de código — ideais para construir conceitos juntos, entrevistas, etc.
- Vários layouts, tamanhos de fonte, temas claros/escuros, etc.
- Formatação de código (arrumação), suporte futuro para linters (CSS e JS) e muito mais.
E agora, soluço, soluço, para as coisas ruins:
- JSFiddle é um editor puramente front-end. Não há como codificar e executar sua linguagem de back-end favorita.
- Não há conceito de arquivos e pastas aqui (ou uploads). Tudo o que você tem é um único espaço para código, não importa quanto dele exista.
- JSFiddle não pode ser usado para hospedar código em seu servidor. O código tem que estar no JSFiddle e é público o tempo todo.
- Não há como construir um pipeline de CI/CD, usar Git, etc.
Dito isto, JSFiddle tem seu ponto ideal e brilha quando você precisa distribuir provas de conceito e colaborar na velocidade da luz. É e continuará sendo uma grande identidade entre os editores online.
CodeSandbox
CodeSandbox pode ser pensado como uma versão muito mais poderosa e completa do JSFiddle. Fiel ao seu nome, o CodeSandbox fornece uma experiência completa de editor de código e um ambiente de área restrita para desenvolvimento front-end.
CodeSandbox é uma verdadeira potência e um produto doce e doce. Eu ficaria sem papel se tentasse listar todas as suas vantagens, mas aqui estão alguns recursos matadores:
- Suporte Npm: Sim, você pode adicionar praticamente qualquer pacote disponível no npm.
- Arquivos, pastas, módulos: você pode dividir seu código em vários arquivos, adicionar/remover imagens da pasta pública e construir/importar módulos como achar melhor. O fluxo de trabalho espelha o de um empacotador de módulos moderno, então você não precisa configurar (quase) nada.
- Suporte para TypeScript, recarregamento a quente, exportação do GitHub, hospedagem de arquivos estáticos, etc.
- É construído no editor Monaco, a mesma fera que alimenta o favorito Código VS editor. Isso traz recursos poderosos como “Go To”, “Find References” e refatoração necessária ao seu alcance!
- Suporte de trecho para Emmet
- DevTools integrados, linting, sobreposições de erros, estruturas de teste (Jest), atalhos de teclado e muito mais.
- Poderosa CLI para importar diretamente projetos locais para o CodeSandbox.
Embora a versão gratuita do CodeSandbox não suporte código privado, você pode obter esse recurso (e aumentar os limites de tamanho em geral) ajudando-os a Patreon por apenas US$ 5 por mês (pague o que quiser, até US$ 50 por mês).
CodeAnywhere
Um problema com a maioria dos editores de código nesta lista (pelo menos até agora) é que eles esperam que você mantenha o código em seus servidores o tempo todo ou exigem que você sincronize o código através da linha de comando regularmente.
Não é assim com CodeAnywhere.
No seu ponto mais forte, o CodeAnywhere tem dois recursos que se destacam para mim:
- Imagens de contêiner pré-construídas para mais de 72 linguagens e estruturas de programação. Isso significa que você pode provisionar um novo ambiente de desenvolvimento diretamente do editor! É claro que o código é hospedado automaticamente no contêiner recém-criado e os arquivos são servidos diretamente de lá.
- Conecte-se a qualquer coisa. Sim, literalmente qualquer coisa. Você não é obrigado a armazenar seu código nos servidores da CodeAnywhere. Quer seu código resida em FTP, plataformas de compartilhamento de arquivos como Dropbox, Amazon S3 ou em plataformas sofisticadas de controle de versão como GitHub, você pode configurar facilmente o CodeAnywhere para ler e gravar nessa fonte, usando o editor de código exclusivamente para arquivos . . . Bem, edição de código. 😛
Mais uma coisa que gostaria de salientar: se você não estiver confortável com o Git quando se trata de visualizar o histórico e as diferenças, o CodeAnywhere pode parecer um suspiro de alívio. O editor usa seu sistema diff para comparar arquivos, que permite comparar dois arquivos em quaisquer duas revisões (uma revisão é criada toda vez que você salva um arquivo).
No entanto, há um pequeno problema com as revisões – a versão gratuita permite que você mantenha apenas uma revisão, enquanto o menor plano pago permite no máximo 20 revisões. De um modo geral, não é um problema, pois raramente você deseja olhar além da última 20ª revisão, mas como a maioria dos programadores tem o hábito de pressionar Salvar algumas vezes por minuto, pode se tornar doloroso.
Tudo dito e feito, o CodeAnywhere é uma oferta sólida e agradável para quem deseja migrar para a nuvem e permanecer lá. 🙂 Como seus poderes vão além do código front-end, na minha opinião, é altamente recomendado!
StackBlitz
Se você gosta principalmente de front-end e não pode se afastar da interface do VSCode, StackBlitz foi criado apenas para você.
Não viu nada de especial?
Eu também não, até rolar um pouco para baixo e clicar no botão Angular. Estrondo!
Adivinhe, isso não é deliberadamente criado para se parecer com o VSCode – é construído no editor VSCode! Tanto que você pode instalar extensões, pesquisar nas pastas e organizar arquivos da maneira que você esperaria de uma instância regular do VSCode.
Mas, espere, tem mais!
Você pode ou não ter notado que:
- Todos os aplicativos criados no StackBlitz também são implantados automaticamente em seus servidores! Então, este aplicativo de brinquedo Angular que acabei de criar é hospedado automaticamente em https://angular-yvyi2j.stackblitz.io/. Muito provavelmente, o URL ainda está funcionando (no entanto, carregará lentamente, como seria de esperar quando hospedado gratuitamente)!
- Você pode bifurcar e compartilhar o projeto. Ao compartilhar, você obtém um controle mais preciso sobre o que os outros podem fazer.
- Você pode se conectar a um repositório do GitHub e também permitir que o código seja puxado/enviado diretamente de lá. Ou você pode simplesmente baixar o projeto como um arquivo zip no bom e velho jeito.
Mas, espere, tem mais!
Seriamente! 😀
Aqui está a lista de recursos oficiais oferecidos pelo StackBlitz:
- Suporte nativo para Firebase (que é algo que eu pessoalmente não uso, mas é uma benção para aqueles que não querem mergulhar nas profundezas obscuras do back-end)
- Intellisense, Pesquisa de Projetos
- Recarregamento a quente enquanto você digita
- Importar pacotes npm
- Edite offline quando não estiver conectado!
O StackBlitz está cheio de (lindas) surpresas quando se trata de eliminar os obstáculos do desenvolvimento e implantação da Web. Incorporar o VSCode em seu site não é mais coisa dos sonhos!
Nuvem AWS9
Nuvem9 foi indiscutivelmente o primeiro IDE baseado em navegador que oferecia recursos sérios e levava a ideia do navegador-como-editor mainstream. Não é à toa que a Amazon o adquiriu mais tarde e, hoje, o Cloud9 faz parte das ofertas da AWS.
Se você estiver remotamente conectado (ou interessado) na plataforma AWS, o Cloud9 é onde sua busca por um editor perfeito (ok, quase perfeito) termina.
Vamos ver porque:
- Não há cobranças adicionais pelo uso do Cloud9. Você pode conectar o Cloud9 a uma instância de computação nova/existente da AWS e paga apenas por essa instância. Também é possível conectar-se a um servidor de terceiros por SSH — sem nenhuma taxa! 🙂
- Suporte de primeira classe para aplicativos AWS Serverless (depuração, etc.)
- Acesso direto ao terminal da AWS a partir do editor (honestamente, um editor decente, o terminal com guias é o que ainda sinto falta no VSCode)
- Mais de 40 linguagens de programação suportadas (Go, C++, Ruby, Node, Python, PHP, Java… faça a sua escolha)
Os recursos de colaboração no Cloud9 também são desejáveis, permitindo que revisões/entrevistas sejam conduzidas sem problemas.
Outro recurso matador é uma reprodução em estilo de vídeo das alterações feitas em um arquivo, tornando o processo de revisão uma alegria:
Meu conselho?
Se você gosta da AWS, não espere e pegue o Cloud9 agora mesmo. E se você ainda não está na nuvem, mas está pensando em fazer uma mudança, adote a AWS e integre o Cloud9 ao seu fluxo de trabalho. Você não pode tomar uma decisão melhor de qualquer maneira!
Gitpod
Gitpod é uma versão atualizada dos editores de código em nuvem (ou IDEs, se preferir) que visa manter seu código sempre testado e atualizado. Em outras palavras, ele está profundamente integrado ao GitHub e, toda vez que você adiciona código, ele executa seus testes e pipelines de CI/CD para garantir que o código esteja sempre com 100% de integridade.
Vale a pena conferir se você ama a experiência do VSCode e quer algo que suporte todas as principais linguagens e estruturas de back-end/front-end (Django, Rails, Revel, você escolhe).
Theia
Se você é um fã obstinado do SOLID e um arquiteto de software exigente, o Theia IDE vai agradar seu osso de separação de preocupações. É um IDE de código codificado em TypeScript (cinco pontos para o estilo imediatamente!) que possui um front-end e um back-end perfeitamente separados. O front-end é executado em um navegador, enquanto o back-end pode estar em qualquer lugar – máquina local ou na nuvem!
Mas isso não é tudo – o front-end pode ser executado como um aplicativo Electron com um ambiente de navegador isolado e totalmente funcional, dando a você a aparência de um aplicativo de desktop nativo, caso você deseje.
Codespaces do GitHub
Codespaces do GitHub fornece máquinas virtuais de alto desempenho para executar códigos para desenvolver aplicativos da web. Usando o Visual Studio Code que inclui um editor e um ecossistema completo, você achará mais fácil trabalhar no navegador.
Experimente o ambiente de desenvolvimento mais recente para os projetos, juntamente com imagens pré-criadas. Você experimentará baixa latência em várias regiões dimensionando suas VMs para até 64 GB de RAM e 32 núcleos. Comece a codificar com os ambientes padronizados, especificações de hardware, configurações do editor, extensões e requisitos de tempo de execução.
Você pode isolar as dependências entre os projetos com docker-compose e contêineres. Além disso, visualize as alterações feitas facilmente no navegador e compartilhe portas públicas e privadas com colegas de equipe. Você também pode editar ou adicionar detalhes nerds como espaços, abas, claro, escuro, embelezar, mais bonito, solarizado, Monokai e muito mais.
Iniciantes que querem tentar a sorte podem usar o GitHub Codespaces gratuitamente com benefícios limitados, mas você terá recursos suficientes para continuar. Se você é uma equipe ou uma empresa, pode começar a usar o GitHub Codespaces por US$ 40/usuário/ano.
JetBrains
Obtenha ambientes de desenvolvimento de nuvem espacial novos, reproduzíveis, prontos para uso e automatizados em segundos e comece a codificar com JetBrains IDE – Espaço. É a solução única para projetos e equipes de software, assumindo a responsabilidade pelo ciclo de vida de desenvolvimento completo, começando pelos pipelines de CI/CD e hospedando repositórios Git para os pacotes de publicação.
O espaço é a máquina virtual dedicada com o contêiner do Docker. Você pode instalar todas as bibliotecas e ferramentas essenciais necessárias no projeto. Simplifique e acelere a experiência de integração compartilhando e reproduzindo os espaços de trabalho de codificação sempre que desejar.
Permita que os recém-chegados comecem a desenvolver um código instantaneamente sem perder tempo desenvolvendo uma máquina local. Você obterá um IDE completo e pronto para uso sempre que precisar começar a escrever o código, depurar e executá-lo em segundos para testar a saída. A JetBrains oferece uma plataforma centralizada para gerenciar os ambientes de desenvolvimento.
Tudo o que você faz e todos os recursos que você usa são rastreados em um único lugar. Você também pode integrar os recursos no pipeline de desenvolvimento com bastante facilidade. De acordo com o seu projeto, você pode escolher o tipo de Máquina Virtual preferível para se adequar ao tamanho do projeto. O Space economizará seus recursos hibernando o espaço de trabalho de codificação para que você possa começar a trabalhar no mesmo após o intervalo.
Comece seu passeio hoje e experimente a beleza desta fera gratuitamente.
Código Gostoso
Código Gostoso é um IDE de nuvem extensível, inteligente e moderno com muitos recursos adicionais que você vai adorar. Ele ajuda você a escrever código limpo e legível de forma mais inteligente em tempo real em seu idioma preferido.
Obtenha o editor de código para ter uma experiência tranquila com compilação integrada, conclusão de código, ferramentas de detecção de erros e muito mais. Não se preocupe com a configuração; levante-se e comece a trabalhar nos projetos bem na sua frente.
Você terá a mesma sensação de trabalhar com seu desktop ao editar seus códigos na nuvem enquanto desfruta do mesmo desempenho e velocidade. CodeTasty entende as necessidades de cada desenvolvedor; e, portanto, permite que você instale quantas extensões desejar para aumentar sua produtividade. Além disso, ele suporta mais de 40 idiomas e centenas de linhas de código em um arquivo.
Experimente o CodeTasty gratuitamente para obter um espaço de trabalho sandbox, 2 espaços de trabalho FTP/SSH, colaboração, opção de terminal e 2 colaboradores. Você também pode começar com um plano pago de $ 4/mês e ter a chance de revisar seus códigos antes de executar.
Replicar
Aprenda, escreva e crie código com ReplicarIDE gratuito, no navegador e colaborativo que suporta mais de 50 idiomas sem gastar muito tempo em configurações. Você pode começar a codificar em seu idioma em qualquer dispositivo, sistema operacional e plataforma.
Convide seus colegas de equipe, colegas ou amigos para editar o código no Google Docs. Você pode importar seu código para o GitHub para executar e colaborar com repositórios do GitHub sem configurações. Se você está familiarizado com C++, Python, CSS ou HTML, você pode escrever o código e editá-lo em uma única plataforma.
Além disso, no momento em que você estiver pronto com o código, ele será instantaneamente transmitido ao mundo. Se você também quiser aprender sobre código, a Replit tem mais de três milhões de tecnólogos, criativos, programadores apaixonados e muito mais. Com a colaboração em tempo real com suas equipes, sua equipe será mais produtiva. Além disso, você pode criar aplicativos, bots, etc., com a ajuda de plugins durante a codificação. A ferramenta também ajuda você a desenvolver seus projetos diretamente do seu navegador.
Inscreva-se para uma conta e comece a codificar agora.
PaizaCloud
Crie aplicativos da Web em seu navegador com PaizaCloud IDE. É um ambiente de desenvolvimento web para Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress e muito mais.
PaizaCloud permite que você escreva seus códigos perfeitamente sem se preocupar em configurar o ambiente. Basta abrir o navegador e seu ambiente estará pronto em três segundos. Esteja você usando a versão Mac, iPad, OS ou Windows, você pode operar o mesmo ambiente em todos os navegadores.
Além disso, você pode usar shells do Linux para configurar ambientes de desenvolvimento baseados na Web com mais facilidade e flexibilidade. Você também pode publicar os serviços ideais para seu portfólio, como serviços de hospedagem, atualizando para o plano básico.
Execute comandos, gerencie arquivos, edite códigos e muito mais no próprio navegador. PaizaCloud elimina a necessidade de adicionar comandos como vim, ssh, etc., para editar arquivos ou fazer login. Em vez disso, você pode operar os servidores de maneira fácil e eficiente como se estivesse executando um desktop.
Faça um test drive com o plano gratuito com 2 núcleos e 2 GB de memória. Ou aproveite a vida útil ilimitada do servidor com US$ 9,80/mês e obtenha um espaço extra em disco de 1 GB.
Conclusão
Isso cobre mais ou menos todos os IDEs e editores de código disponíveis no momento. Deixei de fora dois tipos de ofertas nesta lista: aquelas que são focadas puramente em entrevistas e não têm ambientes completos (exceto nosso amado clássico JSFiddle, é claro) e aquelas que não pareciam oferecer algo substancial e tinha pouco mais do que uma página inicial elegante.
Se você precisa de algo leve para o desenvolvimento web, pode explorar esses editores de código.