Para projetos recentes, usamos o guia de estilo JavaScript do Airbnb para nossos projetos. Sou f\u00e3 e acho que ajuda escrever JavaScript limpo e leg\u00edvel (que parece ter sido escrito pela mesma pessoa \u2013 o objetivo final dos padr\u00f5es de codifica\u00e7\u00e3o, certo?).<\/p>\n
Neste post, mostrarei o processo de configura\u00e7\u00e3o no Visual Studio Code.<\/a><\/strong><\/p>\n Esta postagem pressup\u00f5e que voc\u00ea esteja familiarizado com a configura\u00e7\u00e3o do Node Package Manager<\/a><\/strong> em sua m\u00e1quina local.<\/p>\n Se voc\u00ea n\u00e3o for, ent\u00e3o eu tenho um guia de como fazer isso neste post<\/a><\/strong>. O atalho? \u00c9 literalmente t\u00e3o simples quanto isso<\/a><\/strong> (uma vez que o Homebrew \u00e9 instalado):<\/p>\n Depois de configur\u00e1-lo (usando a referida postagem ou se j\u00e1 estiver configurado), voc\u00ea estar\u00e1 pronto para avan\u00e7ar com a instala\u00e7\u00e3o das ferramentas necess\u00e1rias para configurar o linting JavaScript no Visual Studio Code.<\/p>\n Digamos, por exemplo, que voc\u00ea esteja executando um projeto em um diret\u00f3rio chamado acme no diret\u00f3rio Projetos do Dropbox. Se for esse o caso, navegue at\u00e9 o diret\u00f3rio de plugins para o referido projeto. Provavelmente ser\u00e1 algo assim:<\/p>\n Por aqui, voc\u00ea precisar\u00e1 instalar o ESLint e os arquivos de configura\u00e7\u00e3o do Airbnb. Felizmente, \u00e9 muito f\u00e1cil de fazer. No terminal, basta digitar o seguinte comando:<\/p>\n Estou assumindo que nenhum dos pacotes acima j\u00e1 est\u00e1 instalado. Nesse caso, como eslint, voc\u00ea pode remover esse argumento espec\u00edfico da linha acima.<\/p>\n Al\u00e9m disso, \u00e9 importante entender que o projeto eslint-plugin-import \u00e9 importante para adicionar suporte para importa\u00e7\u00e3o e exporta\u00e7\u00e3o de m\u00f3dulos JavaScript.<\/p>\n H\u00e1 mais uma etapa necess\u00e1ria antes de obter a configura\u00e7\u00e3o no Visual Studio Code. Ou seja, \u00e9 uma quest\u00e3o de criar um arquivo de configura\u00e7\u00e3o ESLint. De dentro do diret\u00f3rio acme-plugin<\/strong> como mostrado acima, digite o seguinte comando:<\/p>\n Isso criar\u00e1 um arquivo vazio (ou arquivo de ponto vazio, como alguns podem se referir a ele) e \u00e9 aqui que nossa configura\u00e7\u00e3o far\u00e1 refer\u00eancia ao guia de estilo do Airbnb.<\/p>\n No arquivo, basta adicionar as seguintes linhas de c\u00f3digo de configura\u00e7\u00e3o:<\/p>\n Agora que voc\u00ea instalou o ESLint, tem uma refer\u00eancia ao guia de estilo do Airbnb e tem uma refer\u00eancia para dar suporte a sintaxe adicional, \u00e9 hora de configurar o Visual Studio Code.<\/p>\n Na minha opini\u00e3o, essa \u00e9 a parte mais f\u00e1cil. Abra o painel de extens\u00f5es da maneira que melhor lhe convier (clicando no \u00edcone ou usando o atalho) e, em seguida, execute uma pesquisa por ESLint. Voc\u00ea pode ver v\u00e1rios resultados, mas o que voc\u00ea quer \u00e9 aquele que se parece com isso:<\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634149707.png\")
<\/a><\/p>\nLinting JavaScript no Visual Studio Code<\/h2>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e763461bd2a.png\")
<\/a><\/p>\n1 Instalando ESLint<\/h3>\n
$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n2 A configura\u00e7\u00e3o do ESLint<\/h3>\n
$ touch .eslintrc.js<\/code><\/pre>\nmodule.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n3 Configurando o c\u00f3digo do Visual Studio<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634f24def.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7635536e51.png\")
<\/a><\/p>\n