Como habilitar o LINHing no SAVE no Código do Visual Studio usando ESLint

Em JavaScript, escrever código bem formatado pode ser difícil, para que possamos utilizar algumas ferramentas que automatizam esse processo para nós. Além disso, essas ferramentas fornecem reutilização e consistência do código. Este tutorial fornecerá uma visão geral detalhada do ESLint no código do Visual Studio. No JavaScript, podemos ativar o linhagem sobre a economia que aborda automaticamente os pequenos problemas em nosso código.

Como instalar ESLint no código do Visual Studio

Podemos usar Eslint com muitos editores de texto e IDEs, mas o código do Visual Studio é o que os desenvolvedores usam mais. Para instalar o ESLint no código do Visual Studio, precisamos seguir as seguintes etapas:

Primeiro, temos que pressionar o “Extensões” Botão no canto esquerdo e procure o Eslint como fizemos no trecho abaixo do dado:

Agora pressione o "instalar" Botão para instalar o ESLint no código do Visual Studio:

Como terminamos com a instalação do ESLint dentro do código do Visual Studio. Agora precisamos ter um projeto onde possamos testá -lo. Vamos inicializar um projeto primeiro.

Como criar um projeto de nó?

Para criar um projeto, use o comando:

Agora vamos usar o "cd" comando para acessar nosso projeto:

Agora é hora de inicializar nosso projeto, para esse fim, executamos o seguinte comando em nosso terminal:

> npm init -y

Agora vamos instalar o Eslint em nosso projeto e depois inicializá -lo:

> npm install [email protected]

Para inicializar o “Eslint” Em nosso projeto, digite o comando:

> npx eslint -init

Quando pressionamos o botão "Enter", uma sequência de perguntas aparece uma após a outra:

Selecione a segunda opção e pressione o botão "ENTER":

Em seguida, selecione a importação/exportação e opção e pressione o botão "Enter":

Aqui, selecione as opções "nenhuma dessas" para selecionar a estrutura:

Selecione a opção "não" para a pergunta acima e pressione o botão "Enter" para mover para a próxima pergunta:

Selecione as duas opções e pressione Enter, em seguida, selecione “JavaScript” Para a pergunta final,

Quando pressionarmos Enter, receberemos uma mensagem “Criado com sucesso”. Agora dentro do nosso projeto, temos os seguintes arquivos:

Agora vamos considerar um exemplo e quebraremos algumas regras básicas deliberadamente e observaremos como Eslint responderá quando quebrarmos algumas regras.

var string = "Olá, como você está";
Deixe Val = 20;
console.log (val);

O que fizemos neste exemplo? Criamos duas variáveis ​​e não utilizamos uma delas em nosso projeto:

Mas, como permitimos o ESLint em nosso código do Visual Studio, sublinha as variáveis ​​"String", como mostrado no trecho acima e mostra o seguinte erro na seção "Problemas":

E esse problema desaparecerá quando utilizarmos essa variável em algum lugar do nosso código:

var string = "Olá, como você está";
Deixe Val = 20;
console.log (val, string);

Agora dê uma olhada no abaixo dado o Scipped:

Você verá que desta vez não há esse problema aparecendo na seção Problema:

Para uma melhor compreensão de Eslint, vamos considerar outro exemplo em que quebraremos algumas regras, como a falta de semicolons e os espaços extras, e observaremos como Eslint responde a ele:

var string = "Olá, como você está";
Deixe Val = 20
console.log (val)
if (val == 20)

console.log (string)

Neste código, adicionamos alguns espaços brancos extras e perdemos os semicolons intencionalmente:

Então, tecnicamente nada de errado com isso, como mostrado na seção Problema. No entanto, essa não é uma boa prática de codificação para colocar espaços extras ou semicolons ausentes.

Eslint não mostra nenhum problema porque essas regras não são adicionadas no Eslint. Podemos especificá -los no seguinte arquivo:

Vamos abrir o ““.Eslinrc.js " Arquivo da pasta do nosso projeto e adicionaremos algumas regras:

Adicionamos a primeira regra para enfrentar os semicolons e a segunda regra para abordar com espaços brancos e salvar as mudanças. Agora, se perdermos o semicolon ou colocarmos espaços extras em nosso código, o Eslint os destacará na seção Problema:

Como ativar o linhagem em salvar

Podemos ativar o linhagem em todos. Para esse fim, primeiro pressione "Ctrl+" e selecione o "Área de trabalho" configurações:

Na caixa de pesquisa, procure o “Ações de código em salvar” e selecione o “Editar em configurações.json ” opção:

Adicione o seguinte código na configuração.Arquivo JSON:

Essas configurações permitirão o revestimento em salvamento.

Conclusão

Eslint é um pacote que facilita o seu projeto, e aplica um guia de estilo ao longo de nosso projeto, para que possamos manter um estilo consistente ao longo de todo o projeto. Neste artigo, descrevemos como instalar a extensão Eslint, depois criamos um projeto e observamos como o linering funciona no código do Visual Studio. Em seguida, determinamos como adicionar regras para o linhagem e, finalmente, aprendemos a ativar Eslint em salvar.