diff --git a/src/content/docs/pt-br/editor-setup.mdx b/src/content/docs/pt-br/editor-setup.mdx
index 19bcaa79ced12..5ed0a4a157e50 100644
--- a/src/content/docs/pt-br/editor-setup.mdx
+++ b/src/content/docs/pt-br/editor-setup.mdx
@@ -4,21 +4,22 @@ description: Configure seu editor para desenvolver com Astro.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"
-Customize seu editor de código para melhorar a sua experiência de desenvolvimento com Astro e desfrute de novas funcionalidades.
+Personalize seu editor de código para melhorar a experiência de desenvolvedor Astro e destravar novas funcionalidades.
## VS Code
-[VS Code](https://code.visualstudio.com) é um popular editor de código para desenvolvedores web, feito pela Microsoft. O motor do VS Code também viabiliza editores de código populares no navegador como o [GitHub Codespaces](https://github.com/features/codespaces) e o [Gitpod](https://gitpod.io).
+[VS Code](https://code.visualstudio.com) é um editor de código popular para desenvolvedores web, feito pela Microsoft. O motor do VS Code também alimenta editores de código no navegador populares como [GitHub Codespaces](https://github.com/features/codespaces) e [Gitpod](https://gitpod.io).
-Astro funciona com qualquer editor de código. Porém, VS Code é o nosso editor recomendado para projetos Astro. Nós mantemos uma [extensão Astro oficial para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) que permite desfrutar de várias funcionalidades-chave e melhorias na experiência do desenvolvedor em projetos Astro.
+Astro funciona com qualquer editor de código. Entretanto, VS Code é o nosso editor recomendado para projetos Astro. Nós mantemos uma [extensão Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) oficial que destrava diversas funcionalidades-chave e melhorias na experiência do desenvolvedor em projetos Astro.
-- Syntax highlighting para arquivos `.astro`.
-- Informação de tipos do TypeScript para arquivos `.astro`.
-- [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense) para complementação de código, dicas e mais.
+- Destaque de sintaxe em arquivos `.astro`.
+- Informação de tipos TypeScript em arquivos `.astro`.
+- [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense) para preenchimento de código, dicas e mais.
-Para começar, instale a [extensão Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) hoje.
+Para começar, instale a [extensão Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) hoje.
import ReadMore from '~/components/ReadMore.astro';
@@ -26,76 +27,115 @@ import ReadMore from '~/components/ReadMore.astro';
## Zed
-[Zed](https://zed.dev/) é um editor de código aberto que adicionou suporte para Astro na versão 0.123.2. Você pode instalar a [extensão Astro](https://github.com/zed-industries/zed/tree/main/extensions/astro) na aba de Extensões da IDE. Esta extensão inclui funcionalidades como syntax highlighting, code completion e formatação.
+[Zed](https://zed.dev/) é um editor de código aberto que adicionou suporte para Astro na versão 0.123.2. Você pode instalar a [extensão Astro](https://github.com/zed-industries/zed/tree/main/extensions/astro) na aba de Extensões da IDE. Esta extensão inclui funcionalidades como destaque de sintaxe, preenchimento de código e formatação.
## IDEs da JetBrains
-Suporte inicial para Astro foi lançado no WebStorm 2023.1. Você pode instalar o plugin oficial no [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) ou pesquisando por "Astro" na aba de Plugins da IDE. Este plugin inclui funcionalidades como syntax highlighting, code completion e formatação, com planos para adicionar funcionalidades ainda mais avançadas no futuro. Ele está também disponível em todos as outras [IDEs da JetBrains com suporte para JavaScript](https://www.jetbrains.com/products/#lang=js&type=ide).
+[Webstorm](https://www.jetbrains.com/webstorm/) é uma IDE de JavaScript e TypeScript que adicionou suporte para Astro Language Server na versão 2024.2. Essa atualização trás funcionalidades como destaque de sintaxe, preenchimento de código e formatação.
+
+Instale o plugin oficial através do [Marketplace JetBrains](https://plugins.jetbrains.com/plugin/20959-astro) ou ao procurar por "Astro" na aba de plugins da IDE. Você pode ativar ou desativar o Astro Language Server em `Configurações | Linguagens & Frameworks | TypeScript | Astro`.
+
+Para mais informações sobre o suporte de Astro no Webstorm, confira [a documentação oficial Webstorm Astro](https://www.jetbrains.com/help/webstorm/astro.html).
## Outros Editores de Código
-Nossa espetacular comunidade mantém várias extensões para outros editores populares, incluindo:
+Nossa comunidade incrível mantém várias extensões para outros editores populares, incluindo:
-- [Extensão para VS Code na Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) - A extensão oficial do Astro para VS Code, disponível no registro Open VSX para plataformas abertas como [VSCodium](https://vscodium.com/)
-- [Extensão para Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) - Oferece syntax highlighting e autocompletar de código para o Astro dentro do Nova
-- [Plugin para Vim](https://github.com/wuelnerdotexe/vim-astro) - Oferece syntax highlighting, indentação e code folding para Astro dentro do Vim ou Neovim
-- Plugins Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) e [TreeSitter](https://github.com/virchau13/tree-sitter-astro) - Oferece syntax highlighting, treesitter parsing e autocompletar de código para Astro dentro do Neovim
-- Emacs - Consulte as instruções para [Configurar o Emacs e o Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) para funcionar com o Astro
-- [Syntax highlighting do Astro para o Sublime Text](https://packagecontrol.io/packages/Astro) - O pacote Astro para o Sublime Text, disponível no gerenciador de pacotes do Sublime Text.
+- [Extensão VS Code no Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) - A extensão oficial do Astro para VS Code, disponível no registro Open VSX para plataformas abertas como [VSCodium](https://vscodium.com/)
+- [Extensão Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) - Fornece destaque de sintaxe highlighting e preenchimento de código para Astro dentro do Nova
+- [Plugin Vim](https://github.com/wuelnerdotexe/vim-astro) - Fornece destaque de sintaxe, indentação e suporte para arquivamento de código em Astro dentro do Vim ou Neovim
+- Plugins Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) e [TreeSitter](https://github.com/virchau13/tree-sitter-astro) - Fornece destaque de sintaxe, interpretação treesitter e preenchimento de código em Astro dentro do Neovim
+- Emacs - Veja as instruções para [Configurar Emacs e Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) com Astro
+- [Destaque de sintaxe Astro para Sublime Text](https://packagecontrol.io/packages/Astro) - O pacote Astro para Sublime Text, disponível no gerenciador de pacotes Sublime Text.
## Editores no Navegador
-Além dos editores locais, o Astro também funciona bem em editores hospedados no navegador, incluindo:
+Além dos editores locais, Astro também funciona bem em editores direto no navegador, incluindo:
-- [StackBlitz](https://stackblitz.com) e [CodeSandbox](https://codesandbox.io) - editores online que rodam no seu navegador, com syntax highlight por padrão para arquivos `.astro`. Sem instalação ou configuração necessária!
-- [GitHub.dev](https://github.dev) - permite que você instale a extensão Astro para VS Code como uma [extensão web](https://code.visualstudio.com/api/extension-guides/web-extensions), que te dá acesso a somente algumas das funcionalidades da extensão completa. Atualmente, apenas o syntax highlight é suportado.
-- [Gitpod](https://gitpod.io) - um completo ambiente de desenvolvimento na nuvem em que se pode instalar a extensão oficial Astro para VS Code pela Open VSX.
+- [StackBlitz](https://stackblitz.com) e [CodeSandbox](https://codesandbox.io) - editores online que rodam no seu navegador, com destaque de sintaxe embutido para arquivos `.astro`. Sem instalação ou configuração necessária!
+- [GitHub.dev](https://github.dev) - permite que você instale a extensão Astro VS Code como uma [extensão web](https://code.visualstudio.com/api/extension-guides/web-extensions), que te dá acesso a apenas algumas das funcionalidades da extensão completa. Atualmente, apenas o destaque de sintaxe é suportado.
+- [Gitpod](https://gitpod.io) - um ambiente de desenvolvimento completo na nuvem que pode instalar a extensão oficial Astro VS Code do Open VSX.
## Outras ferramentas
### ESLint
-[ESLint](https://eslint.org/) é um popular linter para JavaScript e JSX. Para suporte com o Astro, [um plugin mantido pela comunidade](https://github.com/ota-meshi/eslint-plugin-astro) pode ser instalado.
+[ESLint](https://eslint.org/) é um _linter_ popular para JavaScript e JSX. Para suporte Astro, [um plugin mantido pela comunidade](https://github.com/ota-meshi/eslint-plugin-astro) pode ser instalado.
-Veja [o Guia de Usuário do projeto](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) para mais informações em como instalar e configurar o ESLint para seu projeto.
+Veja [o Guia de Usuário do projeto](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) para mais informações sobre como instalar e configurar o ESLint para seu projeto.
### Stylelint
-[Stylelint](https://stylelint.io/) é um linter popular para CSS. [Uma configuração do Stylelint mantida pela comunidade](https://github.com/ota-meshi/stylelint-config-html) adiciona suporte ao Astro.
+[Stylelint](https://stylelint.io/) é um _linter_ popular para CSS. [Uma configuração do Stylelint mantida pela comunidade](https://github.com/ota-meshi/stylelint-config-html) fornece suporte ao Astro.
Instruções de instalação, integração com editores e informações adicionais podem ser encontradas no README do projeto.
### Prettier
-[Prettier](https://prettier.io/) é um popular formatador para JavaScript, HTML, CSS e mais. Se você está utilizando a [Extensão do Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) ou [o servidor da linguagem do Astro em outro editor](#outros-editores-de-código), formatação de código com Prettier está inclusa.
-
-Para adicionar suporte para formatação de arquivos `.astro` fora do editor (por exemplo, CLI) ou em editores que não suportam nossas ferramentas de editor, instale [o plugin oficial do Prettier para Astro](https://github.com/withastro/prettier-plugin-astro).
-
-Para começar, primeiro instale Prettier e o plugin:
-
-
-
- ```shell
- npm install --save-dev prettier prettier-plugin-astro
- ```
-
-
- ```shell
- pnpm add -D prettier prettier-plugin-astro
- ```
-
-
- ```shell
- yarn add --dev prettier prettier-plugin-astro
- ```
-
-
-
-Prettier irá automaticamente detectar o plugin e usá-lo para processar arquivos `.astro` quando você executá-lo:
-
-```shell
-prettier --write .
-```
-
-Veja o [README do plugin do Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) para mais informações sobre as opções suportadas, como configurar o Prettier dentro do VS Code e mais.
+[Prettier](https://prettier.io/) é um formatador popular para JavaScript, HTML, CSS e mais. Se você está utilizando a [Extensão Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) ou [o servidor da linguagem Astro dentro de outro editor](#outros-editores-de-código), a formatação de código com Prettier está inclusa.
+
+Para adicionar suporte para formatação de arquivos `.astro` fora do editor (como na CLI) ou dentro de editores que não suportam nossas ferramentas de editor, instale [o plugin oficial Astro Prettier](https://github.com/withastro/prettier-plugin-astro).
+
+
+1. Instale `prettier` e `prettier-plugin-astro`.
+
+
+
+ ```shell
+ npm install --save-dev prettier prettier-plugin-astro
+ ```
+
+
+ ```shell
+ pnpm add -D prettier prettier-plugin-astro
+ ```
+
+
+ ```shell
+ yarn add --dev prettier prettier-plugin-astro
+ ```
+
+
+
+2. Crie um arquivo de configuração `.prettierrc.mjs` no diretório raiz do projeto e adicione `prettier-plugin-astro` nele.
+
+ Neste arquivo, também especifique manualmente o interpretador para arquivos Astro.
+
+ ```js title=".prettierrc.mjs"
+ /** @type {import("prettier").Config} */
+ export default {
+ plugins: ['prettier-plugin-astro'],
+ overrides: [
+ {
+ files: '*.astro',
+ options: {
+ parser: 'astro',
+ },
+ },
+ ],
+ };
+ ```
+
+3. Execute o comando `prettier . --write` no terminal para formatar seus arquivos.
+
+
+
+ ```shell
+ npx prettier . --write
+ ```
+
+
+ ```shell
+ pnpm exec prettier . --write
+ ```
+
+
+ ```shell
+ yarn prettier . --write
+ ```
+
+
+
+
+Veja o [README do plugin Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) para mais informações sobre as opções suportadas, como configurar o Prettier dentro do VS Code e mais.