JavaScript является важным компонентом набора инструментов любого веб-разработчика, но чтобы извлечь из него максимальную пользу, вам нужно владеть не только ванильным JS.
Однако, если вы только начинаете работать с JavaScript, огромное количество инструментов, доступных в любой компании-разработчике js , может показаться более чем пугающим. Вот почему мы собрали 25 лучших, охватывающих все, от фреймворков и интерфейсов до качества кода и инструментов тестирования.
Читайте дальше, чтобы узнать о некоторых из лучших инструментов веб-дизайна , которые вы можете использовать, и о том, как они помогут вам стать лучшим разработчиком JavaScript.
Инструменты качества кода
Машинопись
Распространенной проблемой для новых разработчиков JavaScript является его система динамической типизации. Тип переменной может быть выведен во время выполнения, но не будет ограничений в отношении того, какой тип она может иметь в будущем.
Динамическая типизация может быть полезна при создании шаблонов, но насколько это полезно, зависит от проекта. TypeScript стремится привнести декларативный стиль программирования, вводя переменные там, где, по мнению разработчиков, это имеет смысл.
Аннотации типа появляются там, где определена переменная. С объектами интерфейсы определяют структуру объекта, а тип становится ссылкой на этот интерфейс. Их можно расширить для создания легко настраиваемых объектов.
TypeScript использует экспериментальный синтаксис JavaScript как часть своей системы. Декораторы, например, — это функции, которые применяются к классу, методу или свойству и обеспечивают воспроизводимую функциональность. Это может предотвратить дублирование в проекте.
Он также компилирует существующий синтаксис, такой как классы, модули и функции стрелок, в действительный ES3 или ES5. Это можно настроить для браузеров, предназначенных для каждого проекта. Когда браузеры могут изначально поддерживать эти функции, TypeScript может быть проинструктирован сохранить их, что повысит производительность результирующего кода.
TypeScript — это надмножество JavaScript, поэтому он предоставляет преимущества языку без изменения его структуры. В результате любой JavaScript является допустимым TypeScript, и любые используемые его функции являются совершенно необязательными.
ESLint
Линтинг — это тип статического анализа кода, который можно выполнить в проекте для проверки любого сценария, который может сломаться или не соответствует предпочтительному стилю для проекта. ESLint может проверять JavaScript на распространенные ошибки, а также следовать популярным предопределенным наборам правил от таких компаний, как Google и Airbnb.
красивее
Как и ESLint, Prettier может выявлять особенности форматирования. Он также делает еще один шаг вперед и автоматически обновляет оскорбительные строки от имени разработчика. Хотя Prettier не так настраиваемый, он лучше осведомлен об окружающем контексте и будет применять форматирование только там, где это имеет смысл. Он также может поддерживать другие форматы, такие как JSX.
Трэвис Си
Travis CI — это инструмент непрерывной интеграции (CI). Он отслеживает ветки GitHub на наличие новых коммитов и запускает тесты, чтобы убедиться, что в процессе ничего не сломалось. Затем он может развернуть изменение или уведомить команду о любых проблемах. Travis CI бесплатен для использования в проектах с открытым исходным кодом, где важна согласованность.
JSDoc
При написании сложных модулей бывает сложно запомнить, как все работает. В JSDoc методы могут иметь специальный код, который описывает, что они делают, любые параметры, которые они ожидают, и то, что они могут вернуть. Затем это можно обработать для создания документации или разрешить редакторам, таким как VS Code, предоставлять разработчикам подсказки в контексте.
Тестирование проекта
Шутка
Jest — это программа для запуска тестов, созданная Facebook. Его основная цель — максимально упростить настройку и использование, не требуя настройки для начала работы. Любые файлы внутри каталога «__tests__» или оканчивающиеся на «.spec.js» или «.test.js» будут выбраны автоматически.
Тесты выполняются быстро и могут запускаться при каждом изменении, чтобы убедиться, что все работает правильно. Jest может даже подобрать то, что было обновлено с момента последнего коммита, и будет запускать тесты только на тех элементах, которые были затронуты. Настраиваемые параметры командной строки обеспечивают запуск нужных тестов в нужное время, что идеально подходит для обеспечения быстрой работы инструментов непрерывной интеграции.
Одной из выдающихся особенностей Jest являются тесты моментальных снимков. Не проверяя конкретное значение, Jest фиксирует структуру тестируемого объекта и сравнивает его в будущих тестах. Если что-то изменилось, Jest выделит изменение, и его можно будет либо исправить, либо подтвердить как преднамеренное. Это отлично работает для компонентов React, но также может использоваться для любого типа сериализованного значения.
JSDOM настроен по умолчанию, что упрощает тестирование проектов на основе браузера, позволяя запускать их через Node. Jest также поставляется с базовыми тестовыми функциями, которые включают насмешки, шпионы и утверждения. Хотя они будут работать, можно использовать другие инструменты, такие как Enzyme и Sinon, чтобы упростить процесс написания тестов.
Хотя Jest часто используется для тестирования приложений React, на самом деле его можно использовать для тестирования проекта, написанного для любого фреймворка или языка. Предварительно созданные установочные файлы могут облегчить создание правильной среды тестирования, например, убедиться, что Angular определен глобально.
Плагины редактора
квокка
Несмотря на все наши усилия, ни один разработчик не может сделать все правильно с первого раза. Когда нужно опробовать небольшую идею, создание проекта только для того, чтобы посмотреть, работает ли он, может оказаться излишним. При работе с незнакомыми инструментами и библиотеками лучше всего иметь изолированное рабочее пространство, которое точно показывает, что происходит на каждом этапе.
Quokka — это среда, которая живет внутри редактора. Он оценивает встроенный код и отображает результат по мере его использования. Это делает его отличным для тестирования блоков логики без необходимости создавать новый пакет и проверять его в браузере.
Цветные блоки рядом с номером каждой строки показывают, что она покрыта Quokka. Зеленый блок указывает на отсутствие проблем, а красный предупреждает о наличии проблемы с этой линией. Комментарий в конце этой строки содержит дополнительную информацию. Серый прямоугольник показывает, что линия никогда не достигается, что может быть или не быть преднамеренным решением.
Хотя Quokka сразу работает с большинством настроек, его настройки можно настроить в каждом файле или внутри package.json, если он используется с npm. Большинство языков, основанных на JavaScript, уже поддерживаются, включая JSX и TypeScript, но также доступны плагины для работы с другими синтаксисами, такими как jQuery, без необходимости их явного импорта. Плагины можно использовать для настройки и отключения сред при каждом запуске кода.
Проект создан той же командой, что и wallaby.js, который имеет аналогичную функциональность, но для тестовых наборов. Как только будет записан неудачный тест, Wallaby сразу же выделит проблему, что означает, что ошибки будут обнаружены раньше.
Quokka доступен в виде плагина для IDE VS Code, Atom или JetBrains. Бесплатная версия Community охватывает большинство случаев, но дополнительная версия Pro еще больше расширяет возможности, позволяя выполнять встроенную проверку кода для выявления проблем с низкой производительностью.
Эммет
Emmet — это набор плагинов, доступных для большинства редакторов кода, которые позволяют разработчикам быстро писать код, удаляя все медленные, повторяющиеся задачи. Когда разработчики вводят небольшое ключевое слово, оно может обнаружить и заменить его большим блоком контента. Эммет также поймет их намерения, разберет синтаксис и даже автоматически расширит код.
Стоимость импорта
Со временем приложения могут раздуваться из-за больших зависимостей, которые отягощают их. Import Cost — это простой плагин для VS Code, который будет подсвечивать размер любого импорта по мере его добавления и выделять цветом, чтобы сразу увидеть, что может привести к чрезмерному увеличению пакета. Затем разработчик может решить, оправдан ли этот дополнительный вес.
КронштейнПодсветка
Код часто может быть скрыт внутри вложенных объектов, функций или элементов. Иногда это может затруднить понимание того, какая именно открытая скобка соединяется с какой закрывающей скобкой. BracketHighlighter для Sublime Text будет выделять одну скобку, когда выбрана другая, и даже будет работать с несколькими выделениями и внутри строк.
Отладчик Chrome
VS Code уже может создавать точки останова и предоставлять отзывы о запущенных приложениях Node, но как насчет браузера? Плагин Chrome Debugger подключит редактор к экземпляру DevTools, чтобы включить такое же поведение в браузере. Пошаговое выполнение кода, приостановка выполнения и отслеживание значений переменных в знакомой среде.
Интерфейсы
Д3
D3 означает документы, управляемые данными, и предназначен для создания визуализации данных с помощью JavaScript с использованием SVG, HTML и CSS. Эти документы спроектированы так, чтобы их можно было легко обновлять по мере взаимодействия с ними пользователя или поступления новых данных.
По своей сути D3 привязывает данные к элементам DOM, которые можно интерпретировать по-разному в зависимости от проекта. Например, столбчатую диаграмму можно создать с помощью нескольких