10 Visual Studio Code расширений для рефакторинга и работы с tech debt
Stepsize будет полезен для команд, чтобы отслеживать и определять приоритеты тех долга прямо в VS Code.
Что может плагин:
- Позволяет создавать и просматривать issues прямо из редактора
- Отслеживать и определять приоритеты код импрувментов, тех долга
- Добавлять ключевые issue’сы в свои спринты с помощью интеграции с Jira
- Так же есть интеграции с GitHub, BitBucket, Slack
3. P42 JavaScript Assistant: Refactoring Hints & Automation
P42 JavaScript Assistant добавляет 49 автоматических рефакторингов, и других экшинов для JavaScript и TypeScript в VS Code.
4. Abracadabra
В VS Code уже есть базовые функции рефакторинга. Abracadabra расширяет возможности рефакторинга в vs code:
- �� Больше рефакторинга чем в стандартном пакете vs code
- ⚡ Shortcuts, чтобы мгновенно запускать самые полезные
- �� Quick Fixes, предлагающие рефакторинг, когда это необходимо
- �� Options для настройки UX в соответствии с вашими потребностями
- �� Рефакторинг для файлов .js, .jsx, .ts, .tsx и .vue
5. TODO Highlight
Если вы любите юзать в коде теги TODO и FIXME, но при этом забиваете на них, этот плагин решит вашу проблему. Он выделяет в коде фразы TODO или FIXME.
6. Todo Tree
Расширение Todo Tree собирает все ваши todoшки и fixme, разбросанные по коду, в одно дерево в левой панели vs code
7. Comment Anchors
Comment Anchors позволяют размещать «якоря» в комментариях. Якоря можно использовать для трекинга TODO, написания заметок, упрощать навигацию по файлам.
Comment Anchors предоставляют множество вариантов конфигурации, позволяющих адаптировать это расширение к вашему личному рабочему процессу и повысить производительность.
8. New Relic CodeStream
New Relic CodeStream — это платформа для совместной работы разработчиков, которая интегрирует основные инструменты разработки в VS Code. Помогает избежать переключение контекста и упрощает обсуждение кода и проверку кода, с помощью инструментов для совместной работы в vs code.
У экстеншина есть несколько интеграций:
- Code Hosts: Bitbucket, Bitbucket Server, GitHub, GitHub Enterprise, GitLab, GitLab Self-Managed
- Issue Trackers: Asana, Azure DevOps, Bitbucket, Clubhouse, GitHub, GitHub Enterprise, GitLab, GitLab Self-Managed, Jira, Linear, Trello, YouTrack
- Observability: New Relic One, Pixie
- Messaging Services: Slack, Microsoft Teams
Скачать New Relic CodeStream можно тут.
9. SonarLint
SonarLint позволяет исправлять проблемы кодом до того, как они обнаружаться во время релиза, у SonarLint есть такие фичи как: средство проверки орфографии, SonarLint выделяет ошибки и уязвимости безопасности при написании кода с четкими инструкциями по исправлению, чтобы вы могли исправить их еще до того, как вы закоммитите код. SonarLint в VS Code поддерживает анализ кода JavaScript, TypeScript, Python, Java, HTML и PHP.
10. Code Runner
Позволяет запустить сниппет или код на многих языках, таких как: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring.
Скачать Code Runner можно тут.
Как использовать Visual Studio Code для разработки и отладки Node.js
Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.
Подготовка среды
- Установка Visual Studio Code.
- Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
- Добавьте необходимые переменные среды. В примерах этой статьи используется строка подключения базы данных MongoDB. Если у вас нет доступной базы данных mongoDB, вы можете:
- Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
- Выберите создание ресурса Azure Cosmos DB для базы данных MongoDB. Дополнительные сведения см. в этом учебнике.
Клонирование проекта
Чтобы приступить к работе, клонируйте пример проекта, выполнив следующие действия.
- Откройте Visual Studio Code.
- Нажмите клавишу F1, чтобы отобразить палитру команд.
- В командной строке палитры введите gitcl , выберите команду Git: Клонировать и нажмите клавишу ВВОД.
- Если появится запрос ввести URL-адрес репозитория, введите https://github.com/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
- Выберите (или создайте) локальный каталог, в который нужно клонировать проект.
Установка зависимостей
В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.
- Нажмите клавиши CTRL + SHIFT + ` , чтобы отобразить интегрированный терминал Visual Studio Code.
- Используйте следующую команду для установки зависимостей:
npm install Переход к файлам и коду проекта
Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.
- Нажмите клавиши CTRL + p.
- Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.
- Выберите файл server.js, который является скриптом запуска приложения.
- Наведите указатель мыши на метку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов.
- Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.
Использование функции автозаполнения в mongoDB
- Открытие файла data.js
- В строке 84 введите новое использование переменной db путем ввода db. . Visual Studio Code отображает доступные члены API, доступные в db .
Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Это автоматическое приобретение типов работает для более чем 2000 сторонних модулей, таких как React, Подчеркивание и Express.
Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.
Выполнение локального приложения Node.js
Когда вы изучили код, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5 . При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.
Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :
Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите текст в текстовое поле, чтобы добавить элемент, чтобы получить представление о том, как работает приложение.
Отладка локального приложения Node.js
Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, введите CTRL + P , чтобы отобразить средство выбора файлов. После отображения средства выбора файлов и выберите файл server.js .
Задайте точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.
Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.
После установки точки останова вернитесь в работающее приложение в браузере и добавьте запись. Это действие немедленно приводит к приостановке выполнения приложения в строке 28, в которой задана точка останова:
Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу F5, чтобы возобновить выполнение приложения.
Локальная полностековая отладка в Visual Studio Code
Интерфейсная и серверная часть записываются с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular).
Хотя вы смогли запустить и отладить код Node.js без какой-либо конфигурации Visual Studio Code, для отладки интерфейсного веб-приложения необходимо использовать файл launch.json , который указывает Visual Studio Code, как запустить приложение.
Этот пример приложения включает launch.json следующие параметры отладки:
< // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ < "name": "Test", "request": "launch", "runtimeArgs": [ "run-script", "test" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" >, < "name": "Start", "request": "launch", "runtimeArgs": [ "run-script", "start" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" > ] > Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.
Открыв файл launch.json, выберите «Добавить конфигурацию» (в правом нижнем углу) и выберите Chrome: «Запустить с помощью userDataDir«.
Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.
Наведите указатель мыши на любой заданный параметр, чтобы увидеть его функцию. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Задайте для свойства webRoot значение $/public , чтобы отладчик Chrome знал, где найти внешние ресурсы приложения:
< "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "$/public", "userDataDir": "$/.vscode/chrome" > Чтобы запустить и выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно.
Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).
"compounds": [ < "name": "Full-Stack", "configurations": ["Launch Program", "Launch Chrome"] >] Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. Например, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Full-Stack (Полный стек) (имя составного конфигурации) и нажмите клавишу F5 для запуска.
Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).
Нажмите клавиши CTRL+P и введите (или выберите) значение todos.js, которое является основным контроллером Angular внешней части приложения.
Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач.
Вернитесь к выполняемому приложению и добавьте новую запись. Вы увидите, что средство Visual Studio Code приостановило выполнение кода Angular.
Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д.
Есть две прохладные вещи, которые следует заметить:
- В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен.
- Вы можете переходить между внешним и внутренним кодом, нажав клавишу F5, чтобы запустить и активировать точку останова, заданную ранее в маршруте Express.
После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.
Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).
Следующие шаги
ВЕБ-разработчик — с нуля до результата! | Задание 3 из 97
Урок 1.3. Установка и настройка редактора кода Visual Studio Code
Настроим редактор кода VS Code и установим окружение Node.js
Материалы и ссылки к уроку
- Редактор кода VS Code https://code.visualstudio.com
- Список необходимых плагинов:
1. All Autocomplete
2. Auto Close Tag
3. Auto Complete Tag
4. Auto Rename Tag
5. Code Runner
6. JavaScript (ES6) code snippets
7. Live Server
8. Multiple clipboards for VSCode
9. Sass
10. Easy Less
11. Theme — Oceanic Next (опционально)
12. vscode-icons - Node.js https://nodejs.org/en/
- «Горячие клавиши» в VS Code
- beONmax обучение по теме: Редактор кода VS Code и NodeJS + NPM (уже включено в подписку без доплат):
>> Курс Инструменты Веб-разработчика
> Весь раздел 3: Редактор кода VS Code
Важные нюансы по работе с редактором кода VS Code. Как устроен Emmet для ускорения написания кода, как работает Prettier для красоты кода. Индивидуальная настройка (кастомизация) редактора кода под свои нужды для удобства работы. Как VS Code работает с Git, с удалёнными файлами.
Остались вопросы? Задайте ваш вопрос в сообщество студентов beONmax! Задать вопрос
Обзор программы CodeRunner — запускаем код с удобством
Любой опытный программист знает, что иногда бывает нужно проверить какой-то небольшой сниппет или изолированно отладить фрагмент кода. Особенно интересной эта задача становится если это не ваш «родной язык» и любимая IDE его просто не поддерживает. Безусловно, блокнот (или его более сложные версии) тут вполне подходят, но всё можно делать с удобством, и программа CodeRunner обеспечивает его.
Как понятно из названия, CodeRunner создан для того чтоб запускать код. Вы просто открываете его окно или новую вкладку, вставляете исходник или даже быстренько набрасываете что-то с нуля, жмёте на кнопку и получаете вывод своей программы. Разумеется, поддерживается много различных языков программирования и не совсем программирования (да-да, HTML, мы говорим про тебя), причём поддержка включает в себя не только запуск, но и подсветку синтаксиса.
На этом разработчики программы не остановились, со временем она обросла функциями: появилось автодополнение, причем не по словарю, а с анализом кода. Работает оно не так идеально как у полноценных IDE, но для быстрых набросков вполне подходит.
Добавили в приложение и поддержку отладчика: вы можете установить точки остановки и потом пройтись по ним, попутно просматривая значения переменных. Плюс, к вашим услугам консоль дебаггера. Что интересно, список поддерживаемых отладчиков весьма велик: от lldb до bashdb. Кстати, более-менее полноценную IDE с отладкой shell-скриптов я давно хотел.
В левой части окна программы есть браузер файловой системы, позволяющий быстро ориентироваться в случае, если ваш мини-проект вырос за пределы одного файла. Справа — можно открыть панель доступа к онлайн-документации соответствующего языка. Так как разработчики прекрасно понимают нужды других девелоперов, тут же можно быстро погуглить вопрос или поискать нужное на Stackoverflow.
Нижняя часть окна отведена под консоль, куда выводятся результаты запуска вашей программы. Если она выводит HTML, тут можно показать обычный WebView. Для удобства web-разработки можно открыть dev tools и активировать режим live reload.
Если ваш язык не входит в список поддерживаемых, но умеет работать из консоли — вы можете без проблем добавить его базовую поддержку, просто указав как именно нужно запускать программы на нём. Мини-IDE от CodeRunner поддерживает дополнительные возможности типа передачи параметров командной строки и установки переменных окружения.
Но, конечно, главное достоинство CodeRunner это его быстрота: запускается за несколько секунд, не требует создания проектов, автоматически открывает все файлы, что были открыты в прошлый раз. Кроме того, будучи нативным приложением, он экономней относится к ресурсам компьютера, в отличии от IDE на Java не нагружает процессор на 300% и не съедает при этом 90% ОЗУ, как это делают «программистские блокноты» на Electron.
Название: CodeRunner
Издатель/разработчик: PremiumSoft CyberTech Ltd
Цена: 15$
Встроенные покупки: Нет
Совместимость: macOS
Ссылка: Установить
Обсудить эту программу или любые другие инструменты для разработчиков можно в нашем Telegram-чате.