Visual Studio Code - лучшая IDE для любой клиентской разработки. Во время разработки кода мы делаем много чего, кроме кодирования. Такие вещи, как форматирование, создание сборок и многое другое. Чтобы помочь разработчикам ускориться, для Visual Studio Code доступно множество расширений.
Я перечислил расширения, которые, как мне кажется, определенно помогут при разработке интерфейса:
1. Частичное отличие
Нам часто приходится сравнивать большие файлы, чтобы узнать, какие изменения мы внесли. В некоторых случаях этот прием нам очень помогает. Partial Diff - отличное расширение для сравнения больших файлов, особенно JSON. После установки этого расширения некоторые параметры для сравнения будут добавлены в контекстное меню редактора кода Visual Studio.
Шаги по использованию:
- Выбрать первое содержание. Выберите содержание, которое вы хотите сравнить. Щелкните правой кнопкой мыши и выберите вариант
Select Text for Compare
. - Выберите второе содержание. Выберите содержание, с которым вы хотите сравнить предыдущее содержание. Щелкните правой кнопкой мыши и выберите вариант
Compare Text with Previous Selection
. - Откроется новая вкладка с панелью сравнения. Это подчеркнет все различия в обоих содержаниях.
2. Конечные пробелы
Мы много раз наблюдали, что в коде остаются лишние ненужные пробелы. Чтобы этого избежать, это расширение нам очень помогает. Он предоставляет нам множество возможностей для использования. Некоторые из них приведены ниже
Trailing Spaces: Highlight
: Он выделяет все конечные пробелы, что помогает нам не фиксировать конечные пробелы.Trailing Spaces: Delete
: Удаляет все конечные пробелы за один раз.Trailing Spaces: Delete — Modified Lines Only
: Удаляет завершающие пробелы только в измененных строках.
3. ГитЛенс
Visual Studio Code обеспечивает поддержку основных задач git, он не может выполнять расширенные задачи с использованием простого пользовательского интерфейса. Это расширение является решением информационных задач, связанных с git. Он предоставляет следующие функции:
- Отображение истории файлов
- Сравните с какой-нибудь старой версией файла
- Проверьте информацию о последней фиксации в любой строке файла и многое другое.
4. Квокка
Обычно, если мы хотим выполнить какой-либо автономный код JavaScript, мы используем консоль Chrome. Это расширение выполняет автономный фрагмент кода JavaScript в Visual Studio Code. Это намного лучше, чем использовать консоль Chrome. Шаги по использованию этого расширения подробно описаны в Документах Quokka.
5. Украсить
Это очень хорошее расширение для форматирования HTML и CSS. Вам не нужно беспокоиться об отступах, выравнивании файлов HTML и CSS. Просто выберите фрагмент кода, который вы хотите отформатировать, щелкните правой кнопкой мыши и используйте параметр Format Selection
. Он отформатирует код за вас.
6. Лучшие комментарии
Регулярные комментарии очень просты когда-то. Это расширение изменяет внешний вид комментариев. На самом деле он не делает ничего, связанного с ускорением разработки, но лучше отображает комментарии.
- Начните свой комментарий с «
!
»: строка комментария будет отображаться красным цветом. - Начните свой комментарий с «
?
»: строка комментария будет отображаться синим цветом. TODO
будет отображаться оранжевым цветом
7. ESLint
Это похоже на JSHint для ES6 и многое другое. Он хорош для любой разработки на ES6, например (Angular Development). Он предоставляет следующие возможности:
- Выделение ошибок на основе правил ES6
- Подсвечивает, если какой-либо код не соответствует передовой практике. Это помогает избежать ошибок, которые могут появиться в будущем из-за плохой практики кода.
- Выделяет ненужные объявления переменных. Выделяет ненужные пробелы и табуляции.
8. TSLint (не рекомендуется) от egamma
Хотя ESLint - хорошее расширение, я рекомендую использовать это расширение вместе с ESLint. Он рекомендует нам множество передовых практик, которые очень незначительны, но их необходимо соблюдать, чтобы сделать код единообразным. В нем подчеркивается следующее, чего нет в ESLint:
- Отсутствуют пробелы в
for
цикле, синтаксис оператораif
. - Используется _12 _ / _ 13_ вместо
const
. - Конечные пробелы.
for..in
цикл не фильтруется методомhasOwnProperty
и многим другим.
Примечание. Несмотря на то, что это устаревшая версия, она работает лучше, чем официальная TSLint от Microsoft.
9. Шутка
Это расширение автоматически запускает шутливые тесты и выделяет пройденные / неуспешные тестовые случаи в самом VS Code.
10. JSHint
Подходит для любой разработки на JavaScript. Он предоставляет следующие возможности:
- Выделяйте ошибки на основе правил JavaScript
- Подсвечивает, если какой-либо код не соответствует передовой практике. Это помогает избежать ошибок, которые могут появиться в будущем из-за плохой практики кода.
- Выделяет ненужные объявления переменных. Выделяет ненужные пробелы и табуляции.
Примечание. Если вы занимаетесь разработкой в ES6
, не используйте это расширение. Вместо этого используйте расширение ESLint.
Первоначально опубликовано на https://yuvi1422.blogspot.com 20 апреля 2020 г.