{"id":3524,"date":"2019-04-14T08:51:00","date_gmt":"2019-04-14T08:51:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"modified":"2026-04-24T11:32:09","modified_gmt":"2026-04-24T11:32:09","slug":"qualidade-primeiro-5-passos-faceis-para-aplicar-lint-ao-seu-codigo-com-fluxos-de-trabalho-do-github-num-projeto-javascript","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pt\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"A qualidade em primeiro lugar! 5 passos f\u00e1ceis para aplicar lint ao seu c\u00f3digo com fluxos de trabalho do GitHub no projeto JavaScript"},"content":{"rendered":"<p>O que \u00e9 que devemos fazer, quando o <a href=\"https:\/\/thecodest.co\/pt\/dictionary\/why-do-projects-fail\/\">projeto<\/a> \u00e9 pequeno ou o cliente ainda n\u00e3o sabe se vale a pena investir mais? Obviamente, no <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">Fase MVP do projeto<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/pt\/dictionary\/what-is-code-refactoring\/\">c\u00f3digo<\/a> Os testes de estilo ou unit\u00e1rios n\u00e3o s\u00e3o a principal prioridade. Os investidores geralmente querem ter um bom <a href=\"https:\/\/thecodest.co\/pt\/dictionary\/how-to-make-product\/\">produto<\/a> e se funciona, n\u00e3o precisa de ser testado, certo?<\/p>\n\n\n\n<p>De facto, tenho alguma experi\u00eancia em <strong><a href=\"https:\/\/thecodest.co\/contact\">criar aplica\u00e7\u00f5es de raiz<\/a><\/strong>mesmo sem utilizar as melhores pr\u00e1ticas. Algumas circunst\u00e2ncias comerciais obrigaram-me a procurar o compromisso entre os planos or\u00e7amentais de um investidor e a lista de \"coisas boas a ter\" do programador. Felizmente, se utilizar o GitHub, a maioria dos problemas comuns relacionados com a qualidade do c\u00f3digo podem ser resolvidos em poucos minutos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Neste artigo, vou mostrar como usar os fluxos de trabalho do GitHub no ambiente Node.js para padronizar sua base de c\u00f3digo.<\/strong><\/h2>\n\n\n\n<p>Alguns pressupostos antes de come\u00e7armos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Est\u00e1 familiarizado com o NPM e a consola Linux.<\/li>\n\n\n\n<li>Tem alguma experi\u00eancia com pr\u00e9-processadores de estilo, carregadores de m\u00f3dulos, agrupadores, etc.<\/li>\n\n\n\n<li>Sabe para que servem os linters e quer mesmo utiliz\u00e1-los nos seus projectos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Estrutura t\u00edpica do projeto JavaScript<\/strong><\/h2>\n\n\n\n<p>Se alguma vez utilizou <a href=\"https:\/\/thecodest.co\/pt\/blog\/javascript-tools-in-action\/\">JS<\/a> estruturas como <a href=\"https:\/\/thecodest.co\/pt\/blog\/hire-vue-js-developers\/\">Vue<\/a> ou <a href=\"https:\/\/thecodest.co\/pt\/blog\/conditional-component-visibility-in-react\/\">React<\/a>, pode facilmente detetar algumas coisas comuns entre eles, por exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/src<\/em> com toda a sua l\u00f3gica e componentes JS,<\/li>\n\n\n\n<li><em>\/teste<\/em> para os testes unit\u00e1rios e e2e,<\/li>\n\n\n\n<li><em>\/activos<\/em> para estilos, imagens, etc.<\/li>\n<\/ul>\n\n\n\n<p>Mesmo que estejamos a falar de <a href=\"https:\/\/thecodest.co\/pt\/blog\/hire-javascript-developer\/\">JavaScript<\/a> projeto, trabalhamos em <a href=\"https:\/\/thecodest.co\/pt\/dictionary\/what-is-node-js-used-for\/\">N\u00f3<\/a> por isso, obviamente, tamb\u00e9m deve haver algumas coisas do Node, como <em>package.json<\/em>, <em>package-lock.json<\/em> e <em>\/node_modules<\/em> no nosso diret\u00f3rio raiz.<\/p>\n\n\n\n<p>Todas estas coisas est\u00e3o no seu lugar - \u00e9 a isso que chamamos o <strong>conven\u00e7\u00e3o<\/strong>. As frameworks s\u00e3o inventadas para fornecer algumas conven\u00e7\u00f5es razo\u00e1veis, por isso, normalmente, nem precisamos de nos preocupar com o padr\u00e3o de design inicial. Como neste exemplo, eu quero explicar algumas abordagens, n\u00e3o vou aplicar nenhuma solu\u00e7\u00e3o pronta para uso como o Vue CLI.<\/p>\n\n\n\n<p><strong>Est\u00e1 na altura de perceber o que est\u00e1 por detr\u00e1s de todos estes gui\u00f5es m\u00e1gicos de cot\u00e3o!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Extens\u00e3o do projeto Node t\u00edpico<\/strong><\/h2>\n\n\n\n<p>Para fornecer solu\u00e7\u00f5es de alta qualidade, os linters s\u00e3o a primeira coisa com que devemos come\u00e7ar ao configurar um novo projeto. Vamos focar-nos em dois linters - Stylelint para estilos (<em>*.scss<\/em>) e ESLint para ficheiros fonte (<em>*.js<\/em>). Ambos os linters est\u00e3o dispon\u00edveis no NPM e s\u00e3o bastante f\u00e1ceis de configurar. Para usar os linters \u00e9 necess\u00e1rio passar pelo processo de instala\u00e7\u00e3o, adicionar arquivos de configura\u00e7\u00e3o e definir scripts de projeto. Vamos fazer isso passo a passo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Adicionar o Stylelint<\/strong><\/h2>\n\n\n\n<p>A instala\u00e7\u00e3o do Stylelint no ambiente Node \u00e9 muito simples. De acordo com o <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">documentos oficiais<\/a>, s\u00f3 precisa de correr:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install --save-dev stylelint stylelint-config-standard<\/code><\/pre>\n\n\n\n<p>e esperar at\u00e9 estar pronto.<\/p>\n\n\n\n<p><em>stylelint-config-padr\u00e3o<\/em> fornece um conjunto predefinido de regras de linting e pode ser substitu\u00eddo por qualquer pacote que se adapte melhor \u00e0s suas necessidades (por exemplo <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Estilo Airbnb<\/a>). Em seguida, crie um novo ficheiro oculto <em>.stylelintrc.json<\/em>, que \u00e9 o ficheiro de configura\u00e7\u00e3o do Stylelint, respons\u00e1vel por carregar as nossas regras pr\u00e9-definidas:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">{\n    \"extends\": \"stylelint-config-standard\"\n}<\/code><\/pre>\n\n\n\n<p>Neste momento, a \u00fanica coisa que falta \u00e9 algum script NPM (ou scripts) declarado no ficheiro package.json para come\u00e7ar a fazer o linting dos nossos ficheiros SCSS. Aqui est\u00e1 a minha proposta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\": {\n    \"lint:scss\": \"stylelint '**\/*.scss' --sintaxe scss -f verbose --color\",\n    \"lint:scss:fix\": \"stylelint '**\/*.scss' --sintaxe scss --fix -f verbose -color\"\n}<\/code><\/pre>\n\n\n\n<p>Como podem ver, declarei o script que cont\u00e9m <strong>-Corre\u00e7\u00e3o<\/strong> esta op\u00e7\u00e3o deve ser utilizada antes de efetuar o push das altera\u00e7\u00f5es para o reposit\u00f3rio.<\/p>\n\n\n\n<p><strong>N\u00e3o se esque\u00e7a - \u00e9 uma m\u00e1 pr\u00e1tica utilizar <em>-Corre\u00e7\u00e3o<\/em> no seu fluxo de CI, porque ent\u00e3o o c\u00f3digo que passa para a produ\u00e7\u00e3o n\u00e3o \u00e9 estilizado corretamente no reposit\u00f3rio.<\/strong> \u00c9 por isso que precisamos de ambos os gui\u00f5es.<\/p>\n\n\n\n<p>Vamos testar o nosso linter criando um ficheiro <em>\/assets\/scss\/styles.scss<\/em> com algum conte\u00fado, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">corpo {\n                    cor de fundo: #fff;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:scss<\/code><\/pre>\n\n\n\n<p>Dever\u00e1 ver na sua consola algo como isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; stylelint '**\/*.scss' --sintaxe scss -f verbose --color\n\nassets\/scss\/styles.scss\n\n2:21 \u2716 Recuo esperado de 2 espa\u00e7os recuo\n\n1 fonte verificada\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 problema encontrado\n\nn\u00edvel de gravidade \"erro\": 1\n\nindenta\u00e7\u00e3o: 1\n\nnpm ERR! c\u00f3digo ELIFECYCLE\n\nnpm ERR! errno 2\n\nnpm ERR! github-workflow-demo@1.0.0 lint:scss: `stylelint '**\/*.scss' --sintaxe scss -f verbose --color`\n\nnpm ERR! Estado de sa\u00edda 2<\/code><\/pre>\n\n\n\n<p>Isto significa, de facto, que o nosso linter funciona!<\/p>\n\n\n\n<p>O resultado mostra exatamente qual a linha que causa um erro e descreve o problema a resolver. Alguns problemas n\u00e3o podem ser corrigidos automaticamente, pois precisam da decis\u00e3o de um desenvolvedor, mas na maioria dos casos, basta executar o mesmo comando com <strong>-Corre\u00e7\u00e3o<\/strong> por isso vamos execut\u00e1-la.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:scss:fix<\/code><\/pre>\n\n\n\n<p>Agora deve ver uma sa\u00edda verde sem erros encontrados:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">stylelint '**\/*.scss' --sintaxe scss --fix -f verbose --color\n\n\n1 fonte verificada\n\n\/Users\/wojciechbak\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 problemas encontrados<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Adi\u00e7\u00e3o do ESLint<\/strong><\/h2>\n\n\n\n<p>Este passo \u00e9 quase o mesmo que o anterior. Vamos instalar o ESLint, definir um conjunto de regras padr\u00e3o e declarar dois scripts NPM cham\u00e1veis - um para CI, outro para pre-push. Vamos l\u00e1!<\/p>\n\n\n\n<p>Se usa o NPM no seu trabalho di\u00e1rio, talvez queira instalar o ESLint globalmente. Se n\u00e3o o fizer, por favor verifique as instru\u00e7\u00f5es de instala\u00e7\u00e3o em <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">documentos oficiais<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install -g eslint<\/code><\/pre>\n\n\n\n<p>Quando o comando eslint estiver dispon\u00edvel na sua m\u00e1quina, basta execut\u00e1-lo no seu projeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">eslint --init<\/code><\/pre>\n\n\n\n<p>Seguindo as instru\u00e7\u00f5es apresentadas no seu terminal, basta tomar algumas decis\u00f5es de projeto como<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript ou <a href=\"https:\/\/thecodest.co\/pt\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Estilo Airbnb ou estilo Google<\/li>\n\n\n\n<li>tipo de configura\u00e7\u00e3o (ficheiro JSON, ficheiro JS ou inline em <em>package.json<\/em>)<\/li>\n\n\n\n<li>M\u00f3dulos ES (<em>importa\u00e7\u00e3o\/exporta\u00e7\u00e3o<\/em>) ou <em>exigir<\/em> sintaxe<\/li>\n<\/ul>\n\n\n\n<p>Neste lugar, vale a pena escrever uma palavra sobre o formatador de c\u00f3digo chamado Prettier. \u00c9 totalmente padronizado e compat\u00edvel com a maioria dos editores de c\u00f3digo (por exemplo, VS Code). O Prettier fornece muitos conjuntos de regras de estilo de c\u00f3digo predefinidas, trabalha em conjunto com linters e pode ser um grande apoio na procura da melhor qualidade do c\u00f3digo. Para saber o que \u00e9 exatamente o Prettier, visite este <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">compara\u00e7\u00e3o<\/a> dos documentos oficiais.<\/p>\n\n\n\n<p>Se for feito, o ficheiro de configura\u00e7\u00e3o do ESlint (e.g. <em>.eslintrc.json<\/em>dependendo do que tiver escolhido anteriormente) deve aparecer no seu diret\u00f3rio raiz, algures ao lado de <em>.stylelintrc.json<\/em> criado anteriormente.<\/p>\n\n\n\n<p>Agora temos que definir os scripts em <em>package.json<\/em> o mesmo que para os ficheiros SCSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\": {\n    \"lint:js\": \"eslint '**\/*.js' --ignore-pattern node_modules\/\",\n    \"lint:js:fix\": \"eslint '**\/*.js' --ignore-pattern node_modules\/ --fix\"\n}<\/code><\/pre>\n\n\n\n<p>Parab\u00e9ns! O ESLint est\u00e1 pronto a ser utilizado agora mesmo. Vamos verificar se funciona corretamente. Criar <em>\/src\/index.js<\/em> ficheiro com algum conte\u00fado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">consola.log(\"algo\");<\/code><\/pre>\n\n\n\n<p>Executar o linter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:js<\/code><\/pre>\n\n\n\n<p><code><br><\/code>O resultado deve ter o seguinte aspeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; eslint '**\/*.js' --ignore-pattern node_modules\/\n\n~\/Codest\/Projectos\/github-workflow-demo\/src\/index.js\n\n1:1 aviso Declara\u00e7\u00e3o de consola inesperada no-console\n\n1 problema (0 erros, 1 aviso)<\/code><\/pre>\n\n\n\n<p>Este aviso n\u00e3o desaparece depois de utilizar <em>-Corre\u00e7\u00e3o<\/em> op\u00e7\u00e3o, porque <strong>n\u00e3o afectam o c\u00f3digo potencialmente significativo. Eles servem apenas para estilizar o c\u00f3digo<\/strong>incluindo espa\u00e7os em branco, novas linhas, ponto e v\u00edrgula, aspas, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. Definir fluxos de trabalho do GitHub<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">Fluxos de trabalho do GitHub<\/a> s\u00e3o uma coisa bem documentada. Sinta-se \u00e0 vontade para se aprofundar no assunto, mas, por enquanto, vou implementar um fluxo de trabalho simples para fazer o lint do nosso c\u00f3digo ap\u00f3s o push para o reposit\u00f3rio remoto (obviamente, hospedado no GitHub).<\/p>\n\n\n\n<p>Criar <em>\/.github\/workflows<\/em> e o novo diret\u00f3rio <em>code-quality-workflow.yml<\/em> uma vez que os fluxos de trabalho do GitHub t\u00eam de ser definidos com ficheiros YAML.<\/p>\n\n\n\n<p>Para executar um fluxo de trabalho adequado, temos de responder a algumas perguntas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quando \u00e9 que queremos executar o nosso fluxo de trabalho (no envio, no pedido pull, na fus\u00e3o, etc.)?<\/li>\n\n\n\n<li>Pretendemos excluir algumas situa\u00e7\u00f5es (como o envio para o ramo principal)?<\/li>\n\n\n\n<li>Que ambiente precisamos de configurar para executar corretamente os nossos comandos (neste exemplo - Node)?<\/li>\n\n\n\n<li>Precisamos de instalar depend\u00eancias? Em caso afirmativo, como devemos armazen\u00e1-las em cache?<\/li>\n\n\n\n<li>Que passos temos de dar para concluir o controlo?<\/li>\n<\/ul>\n\n\n\n<p>Ap\u00f3s algumas considera\u00e7\u00f5es e algumas horas de trabalho com o exemplo da documenta\u00e7\u00e3o <em>.yml<\/em> pode ter o seguinte aspeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">Nome: Qualidade do c\u00f3digo\n\non: \"push\" (empurrar)\n\ntrabalhos:\n  code-quality:\n    nome: Lint c\u00f3digo fonte\n    executa em: ubuntu-latest\n    passos:\n    - usa: actions\/checkout@v1\n\n    - nome: Configurar N\u00f3\n      usa: actions\/setup-node@v1\n      com:\n        node-version: '12.1'\n\n    - nome: Depend\u00eancias de cache\n      usa: actions\/cache@v1\n      com:\n        caminho: .\/node_modules\n        chave: $(( runner.OS ))-dependencies-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        chaves de restaura\u00e7\u00e3o: |\n          $(( runner.OS ))-dependencies-$(( env.cache-name ))-\n          $(( runner.OS ))-dependencies-\n          $(( runner.OS ))-\n\n    - nome: Instalar depend\u00eancias\n      executar: |\n        npm install\n\n    - nome: Lintar ficheiros\n      executar: |\n        npm run lint<\/code><\/pre>\n\n\n\n<p>O GitHub fornece todo o material ambiental de que precisamos. Na \u00faltima linha, estamos a executar o comando <strong><em>npm run lint<\/em><\/strong> que n\u00e3o estava definido anteriormente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\": {\n    \"lint\": \"npm run lint:js &amp;&amp; npm run lint:scss\"\n}<\/code><\/pre>\n\n\n\n<p>Note-se que no nosso fluxo de trabalho n\u00e3o estou a utilizar <strong>:fix<\/strong> comandos.<\/p>\n\n\n\n<p>Quando todos estes passos estiverem conclu\u00eddos, pode desfrutar deste belo resultado do GitHub antes de fazer o merge do seu Pull Request: <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/ec82df2be0b1977d857d5f5c1d2d893010fc44a4\/68747470733a2f2f692e696d6775722e636f6d2f425848465370372e706e67\" alt=\"\"> <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/00e93d296b7bf5b089c7b785ecc1cbd18de54ead\/68747470733a2f2f696d6775722e636f6d2f6f63736e6762362e706e67\" alt=\"\"><\/p>","protected":false},"excerpt":{"rendered":"<p>A qualidade do c\u00f3digo \u00e9 uma parte crucial do processo de desenvolvimento, especialmente quando se pretende trabalhar de forma eficiente e a longo prazo. Existem muitas abordagens e melhores pr\u00e1ticas, incluindo todo o material de metodologias \u00e1geis, mas a maioria delas est\u00e1 relacionada com um grande projeto empresarial conduzido por pelo menos 6 pessoas.<\/p>","protected":false},"author":2,"featured_media":3525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/pt\/blogue\/qualidade-primeiro-5-passos-faceis-para-aplicar-lint-ao-seu-codigo-com-fluxos-de-trabalho-do-github-num-projeto-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\" \/>\n<meta property=\"og:description\" content=\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/pt\/blogue\/qualidade-primeiro-5-passos-faceis-para-aplicar-lint-ao-seu-codigo-com-fluxos-de-trabalho-do-github-num-projeto-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-14T08:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"wordCount\":1187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/pt\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A qualidade em primeiro lugar! 5 passos simples para aplicar lint no seu c\u00f3digo com fluxos de trabalho do GitHub no projeto JavaScript - The Codest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/pt\/blogue\/qualidade-primeiro-5-passos-faceis-para-aplicar-lint-ao-seu-codigo-com-fluxos-de-trabalho-do-github-num-projeto-javascript\/","og_locale":"pt_PT","og_type":"article","og_title":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","og_description":"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.","og_url":"https:\/\/thecodest.co\/pt\/blogue\/qualidade-primeiro-5-passos-faceis-para-aplicar-lint-ao-seu-codigo-com-fluxos-de-trabalho-do-github-num-projeto-javascript\/","og_site_name":"The Codest","article_published_time":"2019-04-14T08:51:00+00:00","article_modified_time":"2026-04-24T11:32:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"wordCount":1187,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","articleSection":["Software Development"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","url":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","name":"A qualidade em primeiro lugar! 5 passos simples para aplicar lint no seu c\u00f3digo com fluxos de trabalho do GitHub no projeto JavaScript - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/pt\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/pt\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}