One place for hosting & domains

      Prettier

      Comment formater du code avec Prettier dans Visual Studio Code


      Introduction

      Le formatage cohérent du code est un défi, mais les outils de développement modernes permettent de maintenir automatiquement la cohérence dans la base de code de votre équipe.

      Dans cet article, vous allez mettre en place Prettier pour formater automatiquement votre code dans Visual Studio Code, également connu sous le nom de VS Code.

      À des fins de démonstration, voici l’exemple de code que vous allez formater :

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Si vous êtes familiarisé avec le formatage de code, vous remarquerez peut-être quelques erreurs :

      • Un mélange de guillemets simples et doubles.
      • La première propriété de l’objet person doit être sur sa propre ligne.
      • L’énoncé de la console à l’intérieur de la fonction doit être en retrait.
      • Vous pouvez aimer ou non la parenthèse optionnelle qui entoure le paramètre de la fonction flèche.

      Conditions préalables

      Pour suivre ce tutoriel, vous devez télécharger et installer Visual Studio Code.

      Pour travailler avec Prettier dans Visual Studio Code, vous devez installer l’extension. Pour ce faire, recherchez Prettier - Code Formatter dans le panneau d’extension de VS Code. Si vous l’installez pour la première fois, vous verrez un bouton install au lieu du bouton uninstall indiqué ici :

      Extension Prettier readme

      Étape 1 – Utilisation de la commande Format Document

      L’extension Prettier étant installée, vous pouvez maintenant l’utiliser pour formater votre code. Pour commencer, explorons la commande Format Document. Cette commande rendra votre code plus cohérent avec un espacement formaté, un retour à la ligne et des guillemets.

      Pour ouvrir la palette de commandes, vous pouvez utiliser COMMANDE + SHIFT + P sur macOS ou CTRL + SHIFT + P sur Windows.

      Dans la palette de commandes, recherchez “et choisissez ensuite Format Document.

      Palette de commande ouverte avec les résultats pour le format

      Vous pouvez ensuite être invité à choisir le format à utiliser. Pour ce faire, cliquez sur le bouton Configure :

      Demande de sélection d'un formateur par défaut

      Choisissez ensuite Prettier – Code Formatter.

      Choisir Prettier

      Remarque : Si vous ne voyez pas d’invite pour sélectionner un format par défaut, vous pouvez le modifier manuellement dans vos Settings. Mettre Editor: Default Formatter à ebsenp.prettier-vscode.

      Votre code est maintenant formaté avec un espacement, un retour à la ligne et des guillemets cohérents :

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Cela fonctionne également sur les fichiers CSS. Vous pouvez transformer quelque chose avec une indentation incohérente, des accolades, de nouvelles lignes et des points-virgules en un code bien formaté.  Par exemple :

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Sera reformaté comme :

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Maintenant que nous avons exploré cette commande, voyons comment elle peut être mise en œuvre pour s’exécuter automatiquement.

      Étape 2 – Formater le code sur Save

      Jusqu’à présent, vous avez dû exécuter manuellement une commande pour formater votre code. Pour automatiser ce processus, vous pouvez choisir un paramètre dans VS Code pour que vos fichiers soient automatiquement formatés lors de l’enregistrement. Cela garantit également que le code ne soit pas vérifié par un contrôle de version non formaté.

      Pour modifier ce paramètre, appuyez sur COMMAND + , sur macOS (ou CTRL + , sur Windows) pour ouvrir le menu Settings. Une fois le menu ouvert, recherchez Editor: Format On Save et assurez-vous que cette option soit cochée :

      Editor: Format On Save coché

      Une fois ce réglage effectué, vous pouvez écrire votre code comme d’habitude et il sera automatiquement formaté lorsque vous enregistrerez le fichier.

      Étape 3 – Changer les paramètres de configuration de Prettier

      Prettier fait beaucoup de choses pour vous par défaut, mais vous pouvez également personnaliser les paramètres.

      Ouvrez le menu Settings. Ensuite, recherchez Prettier. Vous obtiendrez ainsi tous les paramètres que vous pouvez modifier :

      Paramètres de configuration pour Prettier

      Voici quelques uns des réglages les plus courants :

      • Single Quote – Choisissez entre des citations simples et doubles.
      • Semi – Choisissez d’inclure ou non des points-virgules à la fin des lignes.
      • Tab Width l’onglet – Indiquez le nombre d’espaces que vous souhaitez insérer dans un onglet.

      L’inconvénient de l’utilisation du menu de paramètres intégré dans le code VS est qu’il n’assure pas la cohérence entre les développeurs de votre équipe.

      Étape 4 – Créer un fichier de configuration Prettier

      Si vous modifiez les paramètres de votre code VS, quelqu’un d’autre pourrait avoir une configuration entièrement différente sur sa machine. Vous pouvez établir un formatage cohérent au sein de votre équipe en créant un fichier de configuration pour votre projet.

      Créez un nouveau fichier appelé .prettierrc.extension avec l’une des extensions suivantes :

      Voici un exemple de fichier de configuration simple utilisant JSON :

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Pour plus de détails sur les fichiers de configuration, consultez les Prettier Docs. Après avoir créé l’un d’entre eux et l’avoir intégré à votre projet, vous pouvez vous assurer que chaque membre de l’équipe suit les mêmes règles de formatage.

      Conclusion

      Avoir un code cohérent est une bonne pratique. C’est particulièrement bénéfique lorsque l’on travaille sur un projet avec des collaborateurs multiples. Se mettre d’accord sur un ensemble de configurations aide à la lisibilité et à la compréhension du code. Il est possible de consacrer plus de temps à la résolution de problèmes techniques difficiles au lieu de se battre sur des problèmes résolus comme l’indentation du code.

      Prettier assure la cohérence du formatage de votre code et automatise le processus.



      Source link

      Como formatar um código com o Prettier no Visual Studio Code


      Introdução

      Formatar código de maneira consistente é um desafio, mas ferramentas de desenvolvimento modernas tornam possível manter automaticamente uma consistência em toda a base de código da sua equipe.

      Neste artigo, você irá configurar o Prettier para formatar automaticamente seu código no Visual Studio Code, também conhecido como VS Code.

      Para fins de demonstração, aqui está um código de amostra que você irá formatar:

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Se estiver familiarizado com a formatação de código, irá notar alguns erros:

      • Uma mistura de aspas simples e duplas.
      • A primeira propriedade de persons deve estar em sua própria linha.
      • A declaração de console dentro da função deve estar recuada.
      • Você pode gostar ou não dos parênteses opcionais em torno do parâmetro da função de seta.

      Pré-requisitos

      Para acompanhar este tutorial, será necessário baixar e instalar o Visual Studio Code.

      Para trabalhar com o Prettier no Visual Studio Code, será necessário instalar a extensão. Para fazer isso, procure por Prettier - Code Formatter no painel de extensão do VS Code. Caso esteja instalando-o pela primeira vez, verá um botão install ao invés de uninstall mostrado aqui:

      Leia-me da extensão Prettier

      Passo 1 — Usando o comando de formatação de documento

      Com a extensão Prettier instalada, implante-a agora para formatar o seu código. Para começar, vamos explorar o uso do comando Format Document. Esse comando tornará seu código mais consistente com espaçamento formatado, quebra automática de linha e aspas.

      Para abrir a paleta do comando, utilize COMMAND + SHIFT + P no macOS ou CTRL + SHIFT + P no Windows.

      Na paleta do comando, procure por format e então escolha Format Document.

      Paleta de comando aberta com os resultados para format

      Em seguida, você pode ser solicitado a escolher qual formato deve ser usado. Para fazer isso, clique no botão Configure:

      Prompt para selecionar um formatador padrão

      Em seguinda, escolha Prettier – Code Formatter.

      Selecionando o Prettier

      Nota: caso não veja um prompt para selecionar um formato padrão, altere manualmente isso em suas Settings. Defina Editor: Default Formatter como ebsenp.prettier-vscode.

      Seu código agora está formatado com espaçamento, quebra automática de linha e aspas consistentes:

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Isso também funciona em arquivos CSS. Você pode transformar algo com recuo, chaves, novas linhas e pontos-e-vírgulas inconsistentes em um código bem formatado. Por exemplo:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Será reformatado como:

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Agora que explorado esse comando, vamos ver como isso pode ser implementado para ser executado automaticamente.

      Passo 2 — Formatando o código ao salvar

      Até aqui, foi necessário executar um comando manualmente para formatar seu código. De forma a automatizar esse processo, é possível escolher uma configuração no VS Code para que seus arquivos sejam formatados automaticamente quando forem salvados. Isso também garante que o código não seja verificado no controle de versão que não está formatado.

      Para alterar essa configuração, pressione COMMAND + , no macOS ou CTRL + , no Windows para abrir o menu Settings. Quando o menu abrir, procure por Editor: Format On Save e certifique-se de que essa opção esteja marcada:

      Opção Editor: Format On Save marcada

      Quando isso estiver definido, você pode escrever seu código como sempre e ele será formatado automaticamente quando você salvar o arquivo.

      Passo 3 — Alterando as configurações do Prettier

      O Prettier faz muitas coisas por você no modo padrão, mas também é possível personalizar suas configurações.

      Abra o menu Settings. Em seguida, procure por Prettier. Isso irá trazer todas as configurações que você pode alterar:

      Definições de configuração para o Prettier

      Aqui estão algumas das configurações mais comuns:

      • Single Quote – escolha entre aspas simples e duplas.
      • Semi – escolha se devem ser incluídos pontos-e-vírgulas no final das linhas.
      • Tab Width – especifique quantos espaços você deseja que um tab insira.

      O ponto negativo de usar o menu de configurações embutido no VS Code é que ele não garante uma consistência entre todos os desenvolvedores de sua equipe.

      Passo 4 — Criando um arquivo de configuração do Prettier

      Se você alterar as configurações em seu VS Code, outra pessoa pode acabar tendo uma configuração totalmente diferente em sua máquina. Para estabelecer uma formatação consistente entre toda a sua equipe, crie um arquivo de configuração para o seu projeto.

      Crie um novo arquivo chamado .prettierrc.extension com uma das seguintes extensões:

      Aqui está um exemplo de um arquivo de configuração simples utilizando o JSON:

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Para mais detalhes sobre os arquivos de configuração, confira os Docs do Prettier. Depois de criar um desses arquivos e verificá-lo em seu projeto, você é capaz de garantir que todos os membros da sua equipe irão seguir as mesmas regras de formatação.

      Conclusão

      Ter um código consistente é considerado uma boa prática. É especialmente benéfico ao trabalhar em um projeto com vários colaboradores. Concordar com um conjunto de configuração ajuda com a legibilidade e a compreensão do código. Dessa fora, mais tempo pode ser dedicado resolvendo problemas técnicos desafiadores ao invés de lutando contra problemas como o recuo no código.

      O Prettier garante uma consistência em sua formatação de código e torna o processo automático.



      Source link

      Форматирование кода с помощью Prettier в Visual Studio Code


      Введение

      Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.

      В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

      Для демонстрации мы будем форматировать следующий код:

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

      • Смесь одинарных и двойных кавычек.
      • Первое свойство объекта person должно находиться в отдельной строке.
      • Выражение консоли внутри функции должно быть выделено отступами.
      • Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.

      Предварительные требования

      Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

      Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier - Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:

      Файл readme расширения Prettier

      Шаг 1 — Использование команды форматирования документа

      После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

      Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

      Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

      Открытая палитра команд с результатами поиска format

      Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

      Строка выбора средства форматирования по умолчанию

      Затем выберите Prettier – Code Formatter.

      Выбор Prettier

      Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение ebsenp.prettier-vscode.

      Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Будет переформатирован как:

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.

      Шаг 2 — Форматирование кода при сохранении

      До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.

      Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

      Опция Editor: Format On Save включена

      Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.

      Шаг 3 — Изменение параметров конфигурации Prettier

      Prettier выполняет много действий по умолчанию, но вы также можете внести индивидуальные изменения в его настройки.

      Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

      Параметры конфигурации для Prettier

      Вот несколько наиболее распространенных параметров:

      • Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
      • Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
      • Tab Width — укажите, сколько пробелов должно вставляться при табуляции.

      Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.

      Шаг 4 — Создание файла конфигурации Prettier

      Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.

      Создайте новый файл .prettierrc.extension с одним из следующих расширений:

      Вот пример простого файла конфигурации в формате JSON:

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.

      Заключение

      Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.

      Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.



      Source link