vscode + prettier заботится о чистоте кода (1)

TypeScript Visual Studio Code SCSS

предисловие

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

В прошлом мы испробовали множество способов, отEditorConfigразличным***Lint, Нам также необходимо изучить различные конфигурации, но пока нет возможности удовлетворить наши потребности. Сейчас,prettierпомочь тебе.

представлять

prettierЭто относительно произвольный инструмент форматирования (официальное введение в забавный перевод). Сначала я не мог понять эту вещь, потому что привык возиться с различными конфигурациями линта, и мне всегда хотелось придумать конфигурацию, которая действительно соответствовала бы стилю и привычкам моей команды. .

зачем говоритьprettierЭто произвольно? Он отличается от различных инструментов для удаления ворса,prettierОн фокусируется только на форматировании и не имеет возможности проверять грамматику с помощью lint, поэтому поначалу вы можете часто сталкиваться с словосочетаниями lint.prettierКонфликты возникнут. а такжеprettierПроизвольно владеет набором стилей форматирования.Хоть и обеспечивает настройку, но настраивает лишь небольшое количество ключевых атрибутов.В определенной степени может обеспечить единообразие стиля кода, а порог использования крайне низок.Ключ Дело в том, что его стиль не безобразен, и его легче сделать так, чтобы все его принимали.

в то же время,prettierПоддержите большую часть текущей языковой обработки нашего большого интерфейса, в том числеJavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown, что означает, что вы можете решить практически все проблемы с форматированием кода с помощью одного инструмента.

Как играть

фактическиprettierОфициальный сайт предоставляет различные позы для использования, Здесь мы сначала представим наши часто используемые.vscodeИнтеграция с редактором

  • плагин

    VSCode First Установка плагиновprettier-vscode

    alt + shift + f

  • настроить

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

    Здесь вы можете изменить глобальную конфигурацию некоторых редакторов в соответствии с личными или групповыми предпочтениями.Рекомендуется использовать файлы конфигурации в реальных проектах..prettierrcСпособ выполнить целевую настройку, чтобы облегчить использование коллективной работы. Параметры конфигурационного файла можно найти на официальном сайте:красивее.IO/docs/en/con…

Пример введения

Вот первый, чтобы показать вамvue + typescript + scssКонфигурация, связанная с проектом

Плагин Vue vscode божественного уровняveturЯ не буду вводить здесь больше, инструмент форматирования Vetur по умолчанию также красивее, что очень близко.

  • typescirpt, еще нужно использоватьtslintа такжеtslint-config-prettierнастроить

    $ yarn add -D tslint tslint tslint-config-prettier

    Добавьте в корневой каталог проектаtslint.json, здесь используется официальная рекомендуемая конфигурация: tslint:recommended

    {
  "extend": ["tslint:recommended", "tslint-config-prettier"],
}

    Таким образом, tslin-config-prettier перезапишет и перезапишет конфигурацию, включающую форматирование в вашей исходной конфигурации lint, и то же самое верно для других lint.

  • scssЗдесь нам нужно использоватьstylelintа такжеprettier-stylelint

    $ yanr add -D stylelint prettier-stylelint stylelint-config-ydj

    Добавьте файл конфигурации stylint в корневой каталог проекта..stylelintrc.js

    module.exports = {
    extends: [
        'stylelint-config-ydj/scss', // your stylint config
        './node_modules/prettier-stylelint/config.js'
    ],
    rules: {
        'string-quotes': 'double'
    }
};

  • prettierнастроить

    Конфигурация на уровне проекта, добавьте файл конфигурации в корневой каталог проекта..prettierrc

    {
    "eslintIntegration": true,
    "stylelintIntegration": true,
    "tabWidth": 4,
    "singleQuote": true,
    "semi": false
}

PS: Здесь следует отметить, что шаблон vetur еще не отформатирован и плохо поддерживает красивее, следует сказать, что официальное использование только рекомендуется.js-beautify-html, хотя он вот-вот будет объявлен устаревшим, ноreshapeИнтеграция не выпустила официальную версию, используйтеjs-beautify-htmlПри использовании плагина +prettier блок шаблона может не форматироваться, необходимо добавить этот пункт в настройки редактора.

// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",

// prettier configuration
"prettier.disableLanguages": [
    "vue"
],

демонстрация финального эффекта

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

Категории