Visual studio code убрать пробелы
Можно ли отображать пробельные символы, такие как пробел, в коде Visual Studio?
Похоже, что нет опции для этого settings.json (хотя это опция в Atom.io ), и я не смог отобразить пробельные символы с помощью CSS.
VS Code 1.6.0 и выше
Как упомянуто aloisdg ниже , editor.renderWhitespace теперь enum принимает либо none , boundary либо all . Чтобы просмотреть все пробелы:
До VS Code 1.6.0
До версии 1.6.0, вы должны были набор editor.renderWhitespace для true :
Есть ли способ сделать это только для выбранных символов, как "draw_white_space": "selection" вариант Sublime ?
@drzaus, "editor.renderWhitespace": "boundary" будет началом и концом строк, где as "deitor.renderWhitespace": "all" будет показывать все пробелы. @AlexanderGonchiy, я нашел полезным открыть файл> настройки> настройки пользователя (или настройки рабочего пространства) и использовать команду «найти» в папке настроек по умолчанию, чтобы найти то, что мне нужно.
Файл -> Настройки -> Настройки. Ищите «пробел». Под «Редактор: Render Whitespace» есть выпадающий список, чтобы выбрать новый параметр. (v1.13.2)
Это также можно сделать через главное меню. View -> Render Whitespace
Для тех, кто хочет переключать пробельные символы с помощью сочетания клавиш, вы можете легко добавить связывание клавиш для этого.
В последних версиях кода Visual Studio теперь имеется удобный графический интерфейс (т.е. нет необходимости вводить данные JSON и т. Д.) Для просмотра и редактирования всех доступных сочетаний клавиш. Это все еще под
Файл> Настройки> Сочетания клавиш (или использовать Ctrl + K Ctrl + S )
Существует также поле поиска, которое поможет быстро найти (и отфильтровать) нужные сочетания клавиш. Так что теперь добавлять новые и редактировать существующие сочетания клавиш теперь намного проще:
Переключение пробельных символов не имеет привязки по умолчанию, поэтому вы можете добавить ее. Просто нажмите + знак слева от соответствующей строки (или нажмите Enter , или дважды щелкните в любом месте этой строки) и введите нужную комбинацию во всплывающем окне.
И если выбранная вами привязка клавиш уже используется для каких-либо других действий, появится удобное предупреждение, по которому можно щелкнуть и посмотреть, какие действия уже используют выбранную привязку клавиш:
Как видите, все очень интуитивно понятно и удобно.
Хорошая работа, Microsoft!
Для тех, кто хочет переключать пробельные символы с помощью сочетания клавиш , вы можете добавить пользовательскую привязку к файлу keybindings.json (« Файл»> «Установки»> «Сочетания клавиш» ).
Здесь я назначил комбинацию Ctrl + Shift + i для переключения невидимых символов, вы можете, конечно , выбрать другую комбинацию.
Моя Visual Studio использует ctrl+e ctrl+s по умолчанию. Для сочетаний клавиш, подобных этой, вам нужно поставить пробел между двумя комбинациями, а не запятую.
Показать пробельные символы в коде Visual Studio
измените setting.json, добавив следующие коды!
именно так!
(PS: нет «истинного» варианта!, Даже он тоже работает.)
Просто , чтобы продемонстрировать изменения , которые editor.renderWhitespace : none||boundary||all будут делать для вашего VSCode я добавил этот скриншот:
.
Есть ли способ отключить удаление пробела перед круглыми скобками при редактировании функции в VS Code?
Допустим, у меня есть функция
Когда я начинаю редактировать его, VS Code удаляет пробел перед круглыми скобками и преобразует этот код в:
Есть ли способ отключить это поведение?
Я узнал, что у меня включен параметр "editor.formatOnType": true . Это то, что заставляет редактор автоматически форматировать код при вводе. Отключение помогло решить проблему.
- В VS Code откройте Файл -> Настройки -> Настройки
- Добавьте в конфигурацию JSON:
- Теперь вы можете продолжать использовать опцию автоматического форматирования "editor.formatOnType": true
У меня была аналогичная проблема, когда VSCode удалял пробелы после конструктора, а ESLint жаловался на отсутствие пробела.
- Зайдите в Файл -> Настройки -> Настройки
- Искать constructor
- Поставьте галочку рядом с JavaScript › Format: Insert Space After Constructor
В моем случае мне пришлось явно включить ESLint в моем проекте Vue.js, хотя у меня был файл .eslintrc.js, который должен был реализовывать:
Для этого я нажал CTRL + Shift + P и поискал «ESLint: Enable ESLint».
Перейдите в «Настройки» и найдите insertSpaceBeforeFunctionParenthesis в строке поиска вверху.
Теперь установите флажок, который говорит: JavaScript: Format: Insert Space Before Function Parenthesis
Вот еще одно решение. Вы можете добавить это в свой файл settings.json vscode. "prettier.disableLanguages": [ "javascript" ],
Также добавив к ответу Яна, вы можете просто нажать Command + , на Mac или CTRL + , на клавиатуре, а затем добавить следующие строки в свой settings.json
Вторая запись также отключает пространство для анонимных функций, например, в формате
В моем случае мне хотелось нормального поведения отступов / форматирования VS Code, поэтому я отключил предупреждение eslint:
В файле .eslintrc.js я ввел правила:
В качестве обходного пути попробуйте следующее:
- Установите расширение eslint: ext install eslint
- Добавьте "eslint.autoFixOnSave": true в свое рабочее пространство или в настройки пользователя
В корне вашего проекта создайте .eslintrc.json с помощью:
Расширение eslint может создать для вас стартовый .eslintrc.json с помощью команды create .eslintrc.json .
Это автоматически отформатирует функции, чтобы после них оставался пробел при сохранении файла.
У меня была противоположная проблема с анонимными функциями. Мы используем более красивое расширение. При автокоррекции перед скобками вставляется пробел. А потом красивее жалуется на это.
Есть аналогичный вариант кода, который решает мою проблему:
По умолчанию это true . Мне потребовалось время, пока я не устал исправлять автокоррекцию.
Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».
Не каждый будет изучать все приемы работы в VS Code: их попросту слишком много! В этой статье я перечислил свои любимые сочетания клавиш, позволяющие мне работать быстрее. Надеюсь, они пригодятся и другим людям.
Объединить строку
- Mac — Ctrl+j
- Ubuntu, Windows: откройте существующие сочетания клавиш File -> Preferences -> Keyboard shortcuts и назначьте удобное сочетание для editor.action.join.
Форматирование кода
Это сочетание помогает выровнять код в соответствии с заранее прописанными настройками редактора.
- Windows — Shift + Alt + F
- Mac — Shift + Option + F
- Ubuntu — Ctrl + Shift + I
Обрезка множественных пробелов
Данное сочетание клавиш помогает избавиться от лишних пробелов в начале или конце строки.
Совет: применяйте в самом конце, когда завершаете работу над кодом в текущем файле.
Есть и альтернативный подход. Можно включить обрезку пробелов в самих настройках:
- Откройте пользовательские настройки (Preferences > Settings > вкладка User Settings).
- Кликните значок <> в верхней правой части окна. Это откроет документ.
- Добавьте новое правило «files.trimTrailingWhitespace«: true в документ User Settings (если его там еще нет). Таким образом вы не редактируете дефолтные настройки напрямую, а добавляете к ним новое правило.
- Сохраните файл User Settings.
Также мы добавили новую команду для запуска вручную (Trim Trailing Whitespace в палитре команд).
Если вы используете более новую версию VS Code, после открытия пользовательских настроек вы увидите следующее окно (поставьте галочку, как показано):
Сворачивание блоков кода
Иногда, если размер файла велик или если вы просто хотите понять код в целом, без подробностей, вам пригодится функция сворачивания блоков кода.
Свернуть внутреннюю область возле курсора вам помогут следующие сочетания клавиш:
- Windows /Ubuntu — Ctrl + Shift + [
- Mac — Command+ Option + [
Чтобы развернуть, применяйте те же сочетания, но с закрывающей квадратной скобкой:
- Windows /Ubuntu — Ctrl + Shift + ]
- Mac — Command+ Option + ]
Скопировать строку сверху или снизу
- Windows — Shift + Alt + стрелка вверх / вниз
- Mac — Shift + Option + стрелка вверх / вниз
- Ubuntu — Ctrl + Shift + Alt + стрелка вверх / вниз
Назначенные сочетания можно посмотреть и отредактировать, пройдя по пути File > Preferences > Keyboard Shortcuts.
Разбить окно редактора по вертикали
- Windows — Shift + Alt + \ или 2,3,4
- Mac — Command + \ или 2,3,4
- Ubuntu — Shift + Alt + \ или 2,3,4
Чтобы разбить окно редактора, можно воспользоваться командой split editor. Оригинальное сочетание клавиш для разделения окна — 123. Функция разделения полезна для параллельного редактирования файлов.
Назначенные сочетания также можно отредактировать, выбрав новые по своему вкусу (File > Preferences > Keyboard Shortcuts).
Окно редактора в виде сетки
По умолчанию группы редактора располагаются в вертикальных столбцах (например, когда вы разбиваете окно, чтобы открыть параллельно два файла). Но вы можете с легкостью расположить группы так, как вам больше нравится (хоть вертикально, хоть горизонтально).
Для поддержки гибких макетов можно создать пустые группы редактора. По умолчанию закрытие последнего редактора группы закрывает и саму группу, но это поведение можно изменить, добавив в настройках workbench.editor.closeEmptyGroups: false.
В меню View > Editor Layout можно посмотреть набор готовых вариантов разделения окна.
Выделить слово
- Windows, Ubuntu — Ctrl+ d
- Mac — Command + d
Если нажать command + d больше одного раза, к выделению добавится еще одно вхождение того же слова далее по тексту.
Открыть или закрыть боковую панель
- Windows, Ubuntu — Ctrl+ b
- Mac — Command + b
Иногда очень пригождается возможность закрыть боковую панель, например, если у файла слишком большая ширина или если хотите разбить окно и открыть одновременно два файла.
Переход к указанной строке
Примечание: чтобы перейти к нужной строке в файле, используйте сочетание клавиш ctrl + g, после которого введите номер строки. Или же сначала откройте меню файла при помощи command + p, затем введите двоеточие и номер нужной строки.
- Windows, Ubuntu — Ctrl + g
- Mac — Ctrl + g или Ctrl + p
Переход к символу в файле
- Windows, Ubuntu — Ctrl + Shift + o
- Mac — Command + Shift+ o
Символы можно группировать, добавив двоеточие:
Переход к символу в рабочем окружении
- Windows, Ubuntu — Ctrl + t
- Mac — Command + t
Удаление предыдущего слова
- Windows, Ubuntu — Ctrl + backspace
- Mac — Command + delete
Полезно в ситуациях, если набрали лишнее, а жать несколько раз backspace не любите.
Выделение целых слов
- Windows, Ubuntu — Ctrl + Shift + стрелка вправо / влево
- Mac — Command + Shift + стрелка вправо / влево
Очень полезно для более быстрого выделения и редактирования.
Дублирование строки
- Windows, Ubuntu — Ctrl + Shift + d
- Mac — Command + Shift +d
Дублирование строк это очень полезный и хорошо известный функционал.
Удаление строки
- Windows, Ubuntu — Ctrl + x
- Mac — Command + x
Добавление курсора сверху / снизу
- Windows, Ubuntu — Ctrl + Alt + стрелка вверх / вниз
- Mac — Command + Alt + стрелка вверх / вниз
Функция дублирования курсоров в VS Code, пожалуй, сэкономит вам больше всего времени.
Переименование символа
Выделите нужный символ, а затем нажмите f2. Также можно использовать контекстное меню.
Выделение столбца
- Windows, Ubuntu — Shift + Alt
- Mac — Shift + Option
При помощи этих сочетаний клавиш и движения мыши можно выделять блоки текста. В конце каждой выделенной строки будет добавлен курсор.
Палитра команд
- Windows, Ubuntu — Ctrl + p
- Mac — Command + p
При помощи этих сочетаний клавиш можно получить доступ ко всем доступным в вашем контексте командам. Вот самые используемые из них:
1. Открыть файл
Чтобы перейти к определенному файлу, введите сочетание клавиш для открытия палитры команд, а затем начните вводить название искомого файла. Это позволит быстро найти нужный файл.
2. Посмотреть сочетание клавиш для команды
Все команды в палитре команд приводятся с назначенными им сочетаниями клавиш (если такие назначения есть). Поэтому, забыв нужное сочетание, можно подсмотреть его в палитре.
Полезных сочетаний клавиш в VS Code очень много. При желании можно ознакомиться с ними подробнее:
Существуют встроенные функции и настройки, которые могут стать заменой многим популярным расширениям. Возможно, очередное такое расширение вам не нужно!
«Лекарство от болезней часто в нас самих», — Вильям Шекспир
1. Обернуть выбранный HTML-код в тег
Иногда требуется обернуть блок HTML другим элементом при рефакторинге HTML-документа. Делать это вручную неудобно.
Например, в приведенном ниже коде, чтобы заключить 3 элемента div в основной элемент, придётся перейти к строке 10 и ввести открывающий тег main. Если у нас включена опция автоматического добавления закрывающих тегов, возможно, нам придется удалить этот закрывающий тег. Затем нам нужно перейти к строке 26 и ввести закрывающий тег main .
Было бы неплохо просто выделить блок и запустить команду, чтобы обернуть его нужными тегами.
Расширения
-
(277K установок): «Переносит выбранный код в HTML-теги» (165K установок): «Оборачивает выбранный тег html при нажатии ctrl + i , также позволяет легко изменить имя внешнего тега».
Настройка VS Code
Emmet также может сделать это за вас. Выберите нужный код и запустите команду Emmet: wrap with abbreviation . Вам будет предложено ввести сокращение (можно просто ввести название нужного тега). Набираем main и нажимаем Enter.
Если вы хотите обернуть более чем одним тегом и включить класс, вы можете указать сокращение Emmet, например main>div.container , которое даст вам такой HTML-код:
2. Расцвечивание пар скобок
Стилизация пар совпадающих скобок может помочь определить область видимости в вашем коде. В частности, очень популярно раскрашивание скобок в зависимости от уровня их вложенности.
Довольно много расширений так или иначе выполняют эту работу.
Расширения
-
(6,2 млн установок): «Настраиваемое расширение для раскрашивания соответствующих скобок». Тот же автор написал Bracket Pair Colorizer 2 в качестве замены с кардинальными изменениями и большим упором на производительность. (3,2 млн установок): «Настраиваемое расширение для раскрашивания пар скобок». Сейчас не поддерживается. (1 млн установок): «Раскрашивает в цвета радуги круглые, квадратные и фигурные скобки». (945K установок): «Подсвечивает совпадающие закрывающие и открывающие теги». (88K установок): «Подчеркивание соответствующих скобок и многое другое».
Настройка VS Code
VS Code представил собственную раскраску пар скобок в версии 1.6.0 (август 2021 г.). Это намного быстрее, чем любое из перечисленных расширений. Подробности можно почитать в посте «Bracket pair colorization 10,000x faster».
Раскрашивание пар скобок можно включить, установив для editor.bracketPairColorization.enabled значение true .
Цвета скобок могут быть заданы в теме, либо их можно установить с помощью параметра workbench.colorCustomizations .
Чтобы настроить цвета для установленной темы с помощью параметра workbench.colorCustomizations , требуется указать название темы в квадратных скобках, а затем задать значения свойств, как показано ниже.
Свойство editorBracketHighlight.foreground1 относится к первому набору скобок, editorBracketHighlight.foreground2 — ко второму набору скобок и так далее. Кроме того, есть свойство editorBracketHighlight.unexpectedBracket.foreground для любых лишних скобок.
Настройки для раскраски пары скобок
Некоторые из вышеупомянутых расширений позволяют применять к скобкам больше стилей. Например, добавлять подчеркивание и контур. В настоящее время встроенная функция VS Code не предоставляет таких возможностей. Однако есть вероятность, что это будет добавлено в будущем, потому что алгоритм распознавания пар скобок работает по тому же принципу, что и подсветка синтаксиса. Будет ли это добавлено? Время покажет.
3. Раскрашивание направляющих отступов
Направляющие отступов – это вертикальные линии, обозначающие блоки вашего кода. Они помогают увидеть структуру кода. VS Code называет их «направляющими пар скобок» (bracket pair guides).
Расширения
-
2,4 млн установок): «Это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета с каждым шагом. Цвет отступа зависит от размера табуляции».
Настройка VS Code
Начиная с версии 1.61 (сентябрь 2021 г.) редактор поддерживает цвета направляющих отступов. VS Code называет их «направляющими пар скобок». По умолчанию они используют те же цвета, что и функция раскраски пары скобок, о которой говорилось выше.
Направляющие пар скобок можно включить, установив для editor.guides.bracketPairs значение true (по умолчанию там false ). Есть третья опция — active. Если она включена, отображаться будет направляющая отступа только для активного блока. Этот параметр следует использовать вместо устаревшего editor.renderIndentGuides .
Как видно из примера ниже, цвета отступов по умолчанию приглушены и выглядят ненасыщенными.
Вы можете включить выделение направляющей отступа для текущей области, установив для editor.guides.highlightActiveIndentation значение true. Его следует использовать вместо устаревшего параметра editor.highlightActiveIndentGuide .
Как видно из приведенного ниже примера, активная направляющая отступа отображается более насыщенным цветом.
Существует также параметр editor.guides.bracketPairsHorizontal , который определяет, нужно ли (и, если нужно, то когда) отображать горизонтальные линии, если строка кода пересекает другой уровень отступа. По умолчанию стоит active .
Как и в случае со скобками, цвета могут быть объявлены в теме или установлены с помощью параметра workbench.colorCustomizations . Можно изменить цвет линий на каждом уровне отступа с помощью свойств editorBracketPairGuide.background и editorBracketPairGuide.activeBackground .
Настройки направляющих отступов
4. Запуск и автоматизация скриптов (NPM, Gulp, Make и др.)
Большинство проектов требует выполнения таких задач, как линтинг, тестирование, сборка, упаковка и развертывание. В зависимости от типа проекта вы можете использовать разные инструменты для этого, такие как NPM, Grunt, Gulp, Make и т. д. Хотя это часто делается из командной строки, бывает удобно запустить некоторые из этих действий в редакторе без переключения контекста.
Расширения
-
(2,7 млн установок): «Это расширение поддерживает выполнение скриптов npm, определенных в файле package.json, и проверку установленных модулей на предмет зависимостей, определенных в package.json». (39K установок): «Расширение для визуализации и выполнения задач gulp для Visual Studio Code». (31К установок): «Запускаем Make легко».
Настройка VS Code
В VS Code существуют задачи (Tasks). Задачи могут быть настроены для запуска скриптов в VS Code с помощью палитры команд (command palette). Можно настроить способ их запуска, добавить к ним привязку клавиш, выполнять несколько скриптов в последовательности или запускать их автоматически при открытии рабочего пространства.
VS Code может автоматически находить скрипты для Gulp, Grunt, Jake и npm. Вы также можете запускать shell-скрипты, однако они не обнаруживаются автоматически.
Я вкратце покажу вам, как можно запускать скрипты NPM в виде задач. VS Code берет их из вашего package.json.
Задача сборки по умолчанию
Нажатие Ctrl + Shift + B или запуск команды «Run Build Task» покажет вам все автоматически обнаруженные задачи, из которых можно выбрать нужную. Что касается NPM, он сужает для вас этот список:
Обычно первый вариант — правильный.
Выполнение задачи
Вы можете запустить задачу с помощью команды Tasks: Run Tas k. Выведется список автоматически обнаруженных задач из вашей рабочей области и пользовательских задач, созданных вами.
Если вы хотите запустить задачу для определенного инструмента, можно использовать быстрое открытие файла, нажав Ctrl + P или через меню File>Go to File , наберите «task» и нажмите пробел, а затем раскрывающийся список покажет вам варианты для различных инструментов.
Для своего проекта на JavaScript я выбираю npm и получаю список своих скриптов npm.
Выберите скрипт, и он запустится.
Автоматизировать задачи
Вы можете определить пользовательские задачи для своего проекта в /.vscode/tasks.json . Можно создать файл самостоятельно или запустить команду Tasks: Configure Task , чтобы создать файл шаблона, выбрав параметр Create task.json file from template .
Вы можете настроить запуск задачи при открытии проекта через свойство runOptions . Я часто использую это в проектах для запуска сервера разработки всякий раз, когда открываю проект. Вот как выглядит tasks.json для этого:
Добавление сочетания клавиш для задачи
Если вы часто запускаете задачу, вы можете определить для нее сочетание клавиш.
Например, чтобы связать Ctrl + R с задачей запуска сервера разработки, нужно добавить следующее в файл keybindings.json:
Свойство args должно соответствовать значению label из tasks.json.
Вы можете прочитать руководство по задачам , чтобы узнать о них побольше.
5. Форматирование кода
Правильное форматирование упрощает чтение кода и экономит вычислительные ресурсы вашего мозга.
Если вы используете много разных языков, вам понадобится какое-то расширение для форматирования, но при этом вы все равно можете использовать расширение, которое вам на самом деле не нужно. Выбор здесь не так очевиден, как в случаях, которые мы обсудили выше, это зависит от конкретных языков, которые вы используете. Давайте рассмотрим это более подробно.
Расширения
-
(15 млн установок): Prettier — форматтер с очень небольшим количеством параметров конфигурации. По умолчанию он поддерживает несколько языков: JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown и YAML. Он имеет архитектуру плагинов, расширяющую его до большего количества языков. (7,3 млн установок): Beautify использует js-beautify. Он поддерживает Javascript, JSON, CSS, Sass и HTML. Вы можете использовать файл .jsbeautifyrc для управления настройками стиля. (300К установок). (30K установок).
- И многие, многие другие расширения, перечисленные в разделе форматтеров.
Настройка VS Code
VS Code имеет встроенные средства форматирования для HTML, JavaScript, TypeScript и JSON. Это достойная основа для фронтенд- и бэкэнд-разработчиков, ориентированных на JavaScript.
Вам может быть интересно, почему CSS и CSS-подобные синтаксисы отсутствуют в этом списке. Я не знаю. Однако я точно знаю, что разработчики VS Code не планируют добавлять такое в будущем. Как и в случае с другими языками, которых нет в этом списке, вам понадобится специфическое расширение для форматирования.
Хотя есть соблазн, в частности, у меня как у фронтенд-разработчика, просто установить Prettier, потому что он поддерживает несколько языков, здесь необходим какой-то компромисс. Я расскажу об этом в разделе «Другие языки» ниже.
Настройки для языков со встроенными форматтерами
Чтобы использовать встроенные средства форматирования, вы можете добавить следующие настройки:
Я пробовал их какое-то время и был приятно удивлен. VS Code использует js-beautify под капотом, который также используется расширением Beautify. Таким образом, от этого расширения вы можете ожидать аналогичных результатов. Ваш опыт может отличаться в зависимости от форматирования JSONC. Я не использую React, поэтому не могу комментировать, насколько хорошо форматируется код для него.
Включить файл .jsbeautifyrc в проект для управления форматированием нельзя. Однако доступны эквивалентные настройки форматирования. Можно найти настройки форматирования для каждого языка с соглашением об именах .format. . Вот несколько примеров:
Есть более подробная информация о настройках форматирования HTML в документации.
Другие языки
Сложность с форматтерами заключается в том, что их поддержка довольно сложна, и в большинстве случаев независимым разработчикам приходится создавать расширения для заполнения пробелов в функционале редактора. Но, на самом деле, люди не могут поддерживать их в качестве своих сайд-проектов, поэтому качество расширения зависит от того, насколько популярен язык. Это слабое место VS Code.
Для других языков у вас есть несколько разных вариантов:
- Многие расширения для языковой поддержки также являются форматерами, например Python, поддержка языка Java от Red Hat, Ruby, YAML, XML Tools, Vetur для Vue, и Svelte для VS Code (под капотом использует Prettier). Вы можете применить один из них в качестве средства форматирования.
- Вы можете установить расширение Prettier или Beautify для работы с несколькими дополнительными языками, такими как CSS. Это легко сделать. Однако эти расширения загружаются всегда, независимо от языков, используемых в проекте, поскольку они используют событие onStartupFinished в своей конфигурации. Это расточительное использование системных ресурсов, особенно если вы работаете над бэкенд-проектами, языки которых не форматируются этими расширениями. Конечно, вы можете отключить расширение для рабочего пространства, чтобы оно не загружалось. Если у вас приличный компьютер, возможно, это не будет вас не беспокоить.
- Если вы хотите использовать расширение Prettier для языка, который не поддерживается по умолчанию, например, Java, вам необходимо установить плагин Prettier (пакет node) в качестве зависимости для этого проекта. Неудобно, когда в бэкэнд-проекте находятся пакеты node, если сам проект не на JavaScript. Если вы делитесь проектом с другими, наличие двух или более наборов зависимостей будет очень мешать.
- Вы можете установить средство форматирования, предназначенное для определенного языка. Можно поискать определенный язык в категории «Formatter». Но они не так уж распространены.
Если вы – фронтенд-разработчик, для вас большим упущением в списке встроенных средств форматирования будет обработка CSS и синтаксисов, подобных CSS. Возможны следующие варианты:
- Вы можете использовать расширение stylelint как для линтинга, так и для форматирования. Stylelint охватывает все синтаксисы, подобные CSS. Вы можете указать глобальную конфигурацию stylelint в настройках VS Code.
- Если вы используете SASS (файлы .sass), вы, вероятно, установили поддержку языка расширение SASS. Это тоже форматтер.
- Если вы используете фронтенд-фреймворки, вы, вероятно, установили расширение для поддержки языка, которое также выполняет функцию форматтера, например, Vetur для Vue и Svelte for VS Code для Svelte.
- Кажется, нет стоящего специализированного средства форматирования CSS. Есть JS-CSS-HTML Formatter, но он имеет ряд серьезных проблем.
- Если вышеперечисленное вас не устраивает, возможно, установка Beautify или Prettier – лучший вариант.
Для языков бэкенда вы обнаружите, что большинство расширений языковой поддержки также являются средствами форматирования. Стоит попробовать их, чтобы убедиться, что они вас устраивают. Конечно, можно использовать линтер, чтобы осуществлять форматирование и для этих языков.
Заключение
Прежде чем обращаться к расширению, посмотрите, может ли VS Code делать то же самое. Это звучит как очевидный ход, но мы все, вероятно, порой пренебрегали этим. VS Code регулярно добавляет функции, поэтому стоит время от времени проверять, что изменилось.
Для каждого машинописного файла код Visual Studio использует автоматический отступ в 8 пробелов. Это слишком много, на мой вкус, но я не могу найти, где это изменить.
Может быть, это доступно как настройка, но под другим именем, так как я не могу найти ничего, связанного с отступом.
ОБНОВИТЬ
В настоящее время я использую средство форматирования кода Преттиера, и это решает все проблемы форматирования путем автоматического форматирования при сохранении (если нет синтаксической ошибки)
Вы можете изменить это на глобальном User уровне или Workspace уровне.
Откройте настройки: С помощью клавиш ctrl + , или щелчки File > Preferences > , Settings как показано ниже.
Затем выполните следующие 2 изменения: (введите tabSize в строке поиска)
- Снимите флажок Detect Indentation
- Измените размер вкладки на 2/4 (хотя я твердо считаю, что 2 подходит для JS :))
Да :) Я сделал некоторый поиск для этого и нашел, почему это стало 2 пробелами. И мне кажется, что причина устарела, поэтому я рекомендую использовать 4 пробела.
Это субъективно и не имеет реального преимущества, я оставляю 2 пробела для некоторых типов файлов, таких как js, html и css, и 3 пробела для кода, просто для удобства чтения. В HTML и XML с 4 пробелами вам нужно очень скоро прокрутить вправо.
На панели инструментов в правом нижнем углу вы увидите элемент, который выглядит следующим образом: Нажав на него, вы получите возможность сделать отступ с помощью пробелов или табуляции. После выбора типа отступа у вас будет возможность изменить размер отступа. В приведенном выше примере отступ равен 4 пробелам на отступ. Если в качестве символа отступа выбрана вкладка, то вместо размера вкладки вы увидите пробелов
Если вы хотите, чтобы это применялось ко всем файлам, а не к отдельным файлам, переопределите настройки Editor: Tab Size и в Editor: Insert Spaces настройках пользователя или в настройках рабочей области. зависимости от ваших потребностей
Редактировать 1
Чтобы перейти к настройкам пользователя или рабочей области, перейдите в « Настройки» -> « Настройки» . Убедитесь, что вы находитесь на вкладке « Пользователь» или « Рабочая область », в зависимости от ваших потребностей, и используйте панель поиска, чтобы найти настройки. Вы также можете отключить, так Editor: Detect Indentation как этот параметр переопределит то, для чего вы установили, Editor: Insert Spaces и Editor: Tab Size когда он включен
Читайте также: