Olá Web Developers! No post anterior vimos algumas extensões para o VS Code. Aqui nesse post nós vamos continuar com a nossa lista de melhores extensões para Front-End.
1 - Visual Studio IntelliCode
Uma das características de um bom editor de código é nos ajudar a escrever nossos códigos mais rapidamente, sugerindo opções para completar automaticamente o que estamos escrevendo.
Porém, o VS Code foi criado para ser uma ferramenta simples e leve. Ou seja, suas sugestões padrão não são tão inteligentes.
Com o intuito de melhorar essas sugestões, a própria Microsoft criou a extensão Visual Studio IntelliCode. A saber, essa extensão utiliza Inteligência Artificial para trazer as melhores sugestões para você.
2 - Surround
É provável que já tenha acontecido de você escrever um código e depois pensar: “este trecho deveria ir dentro de um IF/FOR/TRY/Função/etc”.
Certamente muitos iriam recortar o trecho, criar a estrutura e colar o código lá dentro.
O Surround foi criado a fim de facilitar esses casos. Com ele podemos selecionar um trecho de código e mandar criar uma estrutura em volta como: If, For, While, Try/Catch, etc.
Curso
JavaScript - Fundamentos
Conhecer o curso
3 - CodeSnap
O CodeSnap não é uma ferramenta que ajuda no desenvolvimento. Ela simplesmente gera uma imagem bonita do seu código, como na imagem acima.
Isso é muito útil para quem costuma fazer perguntas em redes sociais ou para criadores de conteúdo, quando querem mostrar um trecho de código.
4 - Prettier
O Prettier é uma ferramenta que formata automaticamente nosso código assim que salvamos o arquivo. Isso é ótimo para manter um padrão de formatação.
Além disso, pode ser que você tenha escrito um código que não ficou bem formatado. Ao invés de gastar tempo arrumando, basta salvar o arquivo e a formatação será feita automaticamente.
5 - ESLint
Assim como o Prettier, o ESLint também é uma ferramenta que auxilia na escrita do código.
O foco do ESLint é definir determinadas regras que devem ser seguidas de tal forma que ajudam a evitar certos problemas. Dessa maneira, podemos evitar possíveis bugs.
6 - EditorConfig
O objetivo do EditorConfig é manter um padrão de formatação de arquivos entre diferentes ferramentas.
Um exemplo bem simples é o que você costuma usar para identar seu código: 3 espaços, 4 espaços, tab, etc.
Visto que diferentes editores de código possuem diferentes configurações padrão, e cada pessoa possui sua preferência, ter uma ferramenta que padronize isso num projeto ajuda a manter um código mais uniforme.
Curso
HTML5 + CSS3 - Fundamentos
Conhecer o curso
7 - Stylelint
O objetivo do Stylelint é bem parecido com o do ESLint. Porém, ele foca no CSS.
Além de ajudar a definir regras no CSS, também é possível definir certas regras para se seguir boas práticas. Um bom exemplo é sempre declarar uma classe primeiro e só depois as classes filhas.
Caso você declare seletores de níveis muito profundos, poderá ter problemas. O Stylelint também pode servir para te impedir de fazer isso.
Uma das minhas funcionalidades favoritas do Stylelint é definir quais são os navegadores que quero dar suporte. Ele automaticamente me avisa sobre alguma propriedade que meus navegadores alvo ainda não suportam totalmente. Isso já poupa muito tempo, pois evita que a gente descubra que algo está quebrando em um navegador específico depois de já ter várias coisas prontas.
