Visual Studio Code - лучшая IDE для любой клиентской разработки. Во время разработки кода мы делаем много чего, кроме кодирования. Такие вещи, как форматирование, создание сборок и многое другое. Чтобы помочь разработчикам ускориться, для Visual Studio Code доступно множество расширений.

Я перечислил расширения, которые, как мне кажется, определенно помогут при разработке интерфейса:

1. Частичное отличие

Нам часто приходится сравнивать большие файлы, чтобы узнать, какие изменения мы внесли. В некоторых случаях этот прием нам очень помогает. Partial Diff - отличное расширение для сравнения больших файлов, особенно JSON. После установки этого расширения некоторые параметры для сравнения будут добавлены в контекстное меню редактора кода Visual Studio.

Шаги по использованию:

  1. Выбрать первое содержание. Выберите содержание, которое вы хотите сравнить. Щелкните правой кнопкой мыши и выберите вариант Select Text for Compare.
  2. Выберите второе содержание. Выберите содержание, с которым вы хотите сравнить предыдущее содержание. Щелкните правой кнопкой мыши и выберите вариант Compare Text with Previous Selection.
  3. Откроется новая вкладка с панелью сравнения. Это подчеркнет все различия в обоих содержаниях.

2. Конечные пробелы

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

  1. Trailing Spaces: Highlight : Он выделяет все конечные пробелы, что помогает нам не фиксировать конечные пробелы.
  2. Trailing Spaces: Delete : Удаляет все конечные пробелы за один раз.
  3. Trailing Spaces: Delete — Modified Lines Only : Удаляет завершающие пробелы только в измененных строках.

3. ГитЛенс

Visual Studio Code обеспечивает поддержку основных задач git, он не может выполнять расширенные задачи с использованием простого пользовательского интерфейса. Это расширение является решением информационных задач, связанных с git. Он предоставляет следующие функции:

  1. Отображение истории файлов
  2. Сравните с какой-нибудь старой версией файла
  3. Проверьте информацию о последней фиксации в любой строке файла и многое другое.

4. Квокка

Обычно, если мы хотим выполнить какой-либо автономный код JavaScript, мы используем консоль Chrome. Это расширение выполняет автономный фрагмент кода JavaScript в Visual Studio Code. Это намного лучше, чем использовать консоль Chrome. Шаги по использованию этого расширения подробно описаны в Документах Quokka.

5. Украсить

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

6. Лучшие комментарии

Регулярные комментарии очень просты когда-то. Это расширение изменяет внешний вид комментариев. На самом деле он не делает ничего, связанного с ускорением разработки, но лучше отображает комментарии.

  1. Начните свой комментарий с «!»: строка комментария будет отображаться красным цветом.
  2. Начните свой комментарий с «?»: строка комментария будет отображаться синим цветом.
  3. TODO будет отображаться оранжевым цветом

7. ESLint

Это похоже на JSHint для ES6 и многое другое. Он хорош для любой разработки на ES6, например (Angular Development). Он предоставляет следующие возможности:

  1. Выделение ошибок на основе правил ES6
  2. Подсвечивает, если какой-либо код не соответствует передовой практике. Это помогает избежать ошибок, которые могут появиться в будущем из-за плохой практики кода.
  3. Выделяет ненужные объявления переменных. Выделяет ненужные пробелы и табуляции.

8. TSLint (не рекомендуется) от egamma

Хотя ESLint - хорошее расширение, я рекомендую использовать это расширение вместе с ESLint. Он рекомендует нам множество передовых практик, которые очень незначительны, но их необходимо соблюдать, чтобы сделать код единообразным. В нем подчеркивается следующее, чего нет в ESLint:

  1. Отсутствуют пробелы в for цикле, синтаксис оператора if.
  2. Используется _12 _ / _ 13_ вместо const.
  3. Конечные пробелы.
  4. for..in цикл не фильтруется методом hasOwnProperty и многим другим.

Примечание. Несмотря на то, что это устаревшая версия, она работает лучше, чем официальная TSLint от Microsoft.

9. Шутка

Это расширение автоматически запускает шутливые тесты и выделяет пройденные / неуспешные тестовые случаи в самом VS Code.

10. JSHint

Подходит для любой разработки на JavaScript. Он предоставляет следующие возможности:

  1. Выделяйте ошибки на основе правил JavaScript
  2. Подсвечивает, если какой-либо код не соответствует передовой практике. Это помогает избежать ошибок, которые могут появиться в будущем из-за плохой практики кода.
  3. Выделяет ненужные объявления переменных. Выделяет ненужные пробелы и табуляции.

Примечание. Если вы занимаетесь разработкой в ​​ES6, не используйте это расширение. Вместо этого используйте расширение ESLint.

Первоначально опубликовано на https://yuvi1422.blogspot.com 20 апреля 2020 г.