Há uma dúzia ou dois anos, os sites eram feitos com as mãos e um editor de texto comum. Escrevendo suas próprias tags HTML, um pouco de mágica usando estilos inline em CSS, temperados com animações divertidas - e o site está pronto para uso. Hoje em dia, criar e desenvolver um site ou aplicativo é um processo estruturado. Você pode criar um site usando o construtor de sites em um minuto ou pode ficar angustiado por vários meses. À medida que o desenvolvimento web muda, novas estruturas, plug-ins e aplicativos surgem para agilizar a codificação. Ferramentas adicionais simplificam seu ambiente de trabalho e aumentam a produtividade. Usamos sistemas de controle de versão para gerenciamento colaborativo de projetos de código aberto e bibliotecas como jQuery. O ambiente de desenvolvimento desempenha um papel muito importante no processo de criação de um site. Escolher o processador de texto ideal pode ser uma tarefa desafiadora, mas factível, que requer a aplicação de pesquisas empíricas. Como não se perder nesse oceano de ferramentas, aplicativos e plugins? Qual editor de texto você deve escolher para o trabalho diário e qual para projetos favoritos? Compilamos uma pequena lista das ferramentas mais populares para desenvolvedores front-end iniciantes. Esquecemos de mencionar seu editor favorito no artigo? Deixe comentários!
Bloco de notas++
Lançamento: 24 de novembro de 2003. O editor de texto mais simples com destaque de sintaxe e tabulações. Suporta muitas linguagens de programação e tecnologias. Perfeito para um iniciante que acabou de entrar na ladeira escorregadia do desenvolvimento web.
Possibilidades:
criação de marcadores;
cópia e salvamento automático de arquivos criados;
suporte e conversão de codificações de texto padrão;
os usuários podem definir regras de forma independente para realce de sintaxe;
instalação de vários plugins úteis;
configurar e redefinir teclas de atalho;
verificação ortográfica e criptografia de texto;
jogar Tetris (caso você esteja cansado de programar);
pode gerenciar grandes volumes de dados.
Um “recurso” adicional deste editor é considerado um “ovo de Páscoa” na forma de exibição de citações do Pai Sombrio – Darth Vader e do pai da “pasta do ódio” – Bill Gates.
A mosca na sopa: uma interface excessivamente simplificada que não atende aos padrões de desenvolvimento atuais. Pode ser comparado à luz de uma lanterna durante o dia. Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade do sistema operacional: Windows, ReactOS. Versão gratuita: sim. Link: https://notepad-plus-plus.org/download/v7.5.1.html
Colchetes
Lançamento: 4 de novembro de 2014. A Adobe tem muitos produtos interessantes que são adorados por desenvolvedores e designers de Frontend. E Colchetes é um deles. Este editor gratuito, de código aberto e multiplataforma é baseado em JavaScript, HTML5 e CSS3, portanto seu trabalho é focado especificamente neles. Se você tem um conhecimento básico de JavaScript, então este é o editor com o qual você deve começar a trabalhar. Porque é ele quem fornecerá todas as ferramentas necessárias para a expansão. O editor precisa de algumas melhorias, mas no geral está sendo desenvolvido de forma bastante ativa e é popular entre os desenvolvedores. Além disso, cada usuário pode fazer suas próprias alterações e criar extensões adicionais.
Possibilidades:
dicas para editar arquivos JS, CSS e HTML;
suporte para visualização de código em um navegador em tempo real (Live Preview);
sincronização com servidor FTP;
suporte e compilação automática de CSS em menos arquivos;
oferece uma seleção de fontes (com possibilidade de adicioná-las) que você pode usar ao trabalhar com texto;
trabalhando com o sistema de controle de versão – Git.
A nova versão de 2017 introduziu a possibilidade de pesquisar no histórico, enviar e receber arquivos com diferentes codificações, navegar pelo histórico de edição usando teclas de atalho, ativar e desativar extensões e um menu nativo para Linux.
Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade do sistema operacional: macOS, Windows e Linux. Versão gratuita: sim. Link: http://brackets.io
Sublime
Lançamento: 18 de janeiro de 2008. Editor de código multiplataforma e ambiente de desenvolvimento integrado (IDE). Adoramos este editor por sua velocidade e facilidade de uso, enquanto Coda e TextMate caíram no esquecimento e decepcionaram a principal base de usuários com atualizações muito inconvenientes.
Possibilidades:
navegação rápida por arquivos, símbolos e certas seções de código (é por isso que é apreciado por muitos usuários);
A função de verificação de sintaxe funciona imediatamente quando você insere caracteres;
otimização e repetição de ações recentes utilizando macros;
salvamento automático do código, o que evita sua perda;
suporte para diversos temas visuais e linguagens de programação;
salvar palavras-chave e fragmentos de código usados com frequência;
um conjunto de plugins prontos em Python;
Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade do sistema operacional: Windows, Mac OS, GNU/Linux. Versão gratuita: sim (sem limitações funcionais), mas após analisar o aplicativo é necessário adquirir uma licença. Link: http://www.sublimetext.com/3
WebStorm
Lançamento: 2015. Este não é um editor de texto comum, mas também um ambiente de desenvolvimento integrado para JavaScript, CSS e HTML. Seus autores são a JetBrains, mesma empresa que criou o ambiente IntelliJ IDEA, querido pelos estudantes JavaRush. WebStorm é um dos editores mais inteligentes e populares. Suporta os principais frameworks: AngularJS, React e Meteor e é utilizado para criar uma aplicação em Node.js. WebStorm é um ambiente bastante complexo, mas ao mesmo tempo é ótimo para quem precisa de muitas extensões e recursos.
Possibilidades:
Funciona de forma eficaz com projetos de diferentes tamanhos graças à integração com sistemas de controle de versão Git, GitHub, Mercurial. Isso permite que você “confirme” arquivos, revise alterações e resolva conflitos diretamente no IDE;
LiveEdit - mostra alterações preliminares sem recarregar a página (funciona com o navegador Google Chrome);
análise de código durante a edição;
refatoração e depuração de código para aplicações Javascript e Node.js;
suporte para linguagens ECMAScript, TypeScript, CoffeeScript e Dart;
criação de aplicativos usando o modelo Node.js Express;
lançando e depurando com frameworks como Mocha, Karma e Protractor. Você pode testá-lo no próprio editor ou em um conveniente menu em árvore, a partir do qual você pode retornar rapidamente ao texto;
Os pré-processadores LESS, Sass, SCSS e Stylus são totalmente suportados;
pesquisa rápida na janela do terminal;
estruturação de projetos que envolvam múltiplas bibliotecas Javascript;
suporte para JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo e Bindows;
suporte inicial e trabalho com Angular 2.
Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade do sistema operacional: Windows, Mac OS, GNU/Linux. Versão gratuita: Existe uma versão de teste por 30 dias, então você precisa adquirir uma licença. Link: http://www.jetbrains.com/webstorm/
Átomo
Lançamento: 26 de fevereiro de 2014. Software de código aberto gratuito criado pelos autores do Github favorito de todos . É construído em 50 módulos e escrito em Node JS, CoffeeScript, CSS, HTML e C++. Você também pode desenvolver seus próprios módulos e publicá-los em um repositório para acesso aberto. Este ambiente de desenvolvimento é bastante fácil de usar e plug-ins adicionais ajudam a expandir as possibilidades de trabalhar com ele.
Possibilidades:
usa GUI para configuração em vez de arquivos json;
visualizar um minimapa do código e seus fragmentos;
busca rápida por projetos e arquivos;
barra lateral e árvore de arquivos convenientes;
um grande número de pacotes de extensão disponíveis no Github;
Emmet, Autoprefixer, suporte para Livereload;
visualizar um arquivo através da árvore da barra lateral;
a capacidade de personalizar o editor de acordo com as preferências individuais do usuário;
presença de um gerenciador de arquivos integrado;
não há necessidade de instalar pacote de controle com plugins, basta utilizar a interface gráfica do usuário;
suporte para plugins escritos em Node.js;
visualizar imagens PNG, JPEG diretamente no editor;
oferece trabalho com o sistema de controle de versão Git.
O problema pode ser que ele requer muita memória e não é capaz de lidar com grandes arquivos de dados. Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade do sistema operacional: Windows 7, 8, Mac OS 10.8, Linux. Versão gratuita: sim. Link: https://atom.io
Vim
Lançamento: 2 de novembro de 1991. Você pode perguntar: o que o velho Vim esqueceu nesta lista de editores modernos? Na verdade, o Vim é um editor de texto totalmente moderno e poderoso, criado com base no antigo vi, disponível em sistemas operacionais UNIX. E está em constante evolução. Os desenvolvedores fazem alterações quase todos os anos, adicionando novos plug-ins e complementos. A última vez que isso aconteceu foi em 2016, e a quantidade de extensões e a velocidade são realmente incríveis e vale a pena conferir. Vim é um editor multimodo. Você pode trabalhar em vários ao mesmo tempo: comando, inserção ou visual. Porém, vale considerar que é bastante complexo para um desenvolvedor iniciante. Embora especialistas com muitos anos de experiência não conheçam muitas de suas funções.
Possibilidades:
suporte para codificações de texto padrão;
você pode trabalhar com vários arquivos ao mesmo tempo;
reconhecimento e conversão automáticos de arquivos;
compatibilidade com linguagens de programação Perl, Tcl, Python e Ruby;
criando configurações confortáveis para as necessidades de cada usuário;
gravar e implementar macros;
o modo visual pode executar muitas funções úteis (por exemplo, destacar blocos de texto);
suporte para idiomas não padrão escritos da direita para a esquerda (como árabe ou hebraico);
configurações convenientes para palavras de pesquisa e histórico de comandos;
suporta uso total do teclado sem mouse;
demonstra um desempenho incrível ao trabalhar com arquivos grandes.
Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade de SO: Windows, DOS, Linux, BSD e Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Versão gratuita: sim. Link: https://vim.sourceforge.io/download.php
Netbeans
Lançado: 1997. IDE gratuito e de código aberto, patrocinado pela Oracle e apoiado por desenvolvedores entusiasmados. Ele está sendo constantemente desenvolvido e complementado com diversas extensões para maior comodidade e velocidade. Possibilidades:
gerenciamento de janelas e armazenamento;
alterações de interface e design (incluindo menus e pop-ups);
configurar uma conexão com um servidor remoto;
Refatoração de código disponível;
existem complementos, modelos e geradores de código;
suporta muitas linguagens de programação;
verificação e correção automática de sintaxe;
customizar o editor para atender às necessidades do usuário;
iniciar e depurar aplicativos JavaScript e Node.JS;
suporte para frameworks PHP (Symfony, Zend e Yii).
Voe na pomada: consome muita memória. Destaque de sintaxe: + Detecção automática de tags: + Compatibilidade com sistemas operacionais: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris e Solaris. Versão gratuita: sim. Só que é grátis. Link: https://netbeans.org
Bônus hardcore: Bloco de notas, também conhecido como “Bloco de notas”
Lançamento: 1985, junto com o Windows 1.0. Sim, sim, o mesmo Bloco de Notas instalado por padrão em todos os seus computadores Windows. "O que esta antiguidade esqueceu aqui? O que ISSO tem a ver com desenvolvimento?" Na verdade, entendemos que é improvável que alguém hoje crie algo sério no bloco de notas clássico. No entanto, é neste programa que muitos desenvolvedores novatos passaram os últimos 15-20 anos “montando” seus primeiros sites e escrevendo seus primeiros programas.
O que queremos dizer é que se você quiser aprender, nada deve impedi-lo. Para um verdadeiro desenvolvedor (e alguém que deseja se tornar um), o Bloco de Notas não é um obstáculo. Características: apenas texto em preto, apenas hardcore.
Esta é a aparência do primeiro bloco de notas
Mosca na pomada: sem mosca na pomada: “Notepad” é perfeito em seu minimalismo! Destaque de sintaxe: não. Treine sua memória! Detecção automática de tags: uau! Versão gratuita: o Bloco de Notas é tão gratuito quanto o seu Windows.
GO TO FULL VERSION