Перейти к содержимому

Как настроить webstorm для работы с javascript

  • автор:

WebStorm и ESLint

В учебном проекте после установки пакетов:eslint-config-prettier eslint-plugin-prettier prettier lint-staged husky —save-dev, для настройки редактора Visual Studio Code в файл с настройками добавляют следующие строки:

"editor.formatOnPaste": false, "editor.formatOnSave": true, "[javascript]": < "editor.formatOnSave": true, >, "[html]": < "editor.formatOnSave": false, >, "[json]": < "editor.formatOnSave": false, >, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true,

Вопрос:Нужно ли что-то подобное делать для редактора WebStorm?
Отслеживать
задан 14 дек 2019 в 22:11
ZdraviSmisl ZdraviSmisl
599 4 4 серебряных знака 13 13 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нет, не нужно. Для того чтобы форматировать код в WebStorm с помощью ESLint+prettier, нужно настроить ESLint интеграцию и использовать ESLint quick fixes, доступные по Alt+Enter .

Если хочется запускать eslint —fix при сохранении, нужно настроить file watcher. Опцию Auto-save edited files to trigger the watcher рекомендуется выключить, чтобы форматирование происходило только по Ctrl+S , а не в процессе редактирования

Отслеживать
ответ дан 15 дек 2019 в 7:53
3,100 9 9 серебряных знаков 7 7 бронзовых знаков

  • config
  • webstorm
  • eslint
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.17.11080

Как настроить выравнивание кода в webstorm?

Перехожу с vs code на webstorm и столкнулся с проблемой отступов. Когда сохраняешь текст в vs code то там так удобно выстраивается код по иерархии тегов, чего не вижу в webstorm. И помогите разобраться с автосохранением, привык тревожно клацать cmnd s, а тут с автосохранением становится еще тревожнее т.т

Отслеживать
задан 12 апр в 12:01

Может быть это Prettier занимается «выстраиванием кода»? Если так, то нужно просто включить отработку Prettier’а при сохранении

Commented 12 апр в 12:26

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Настройка Стиля Кода:

  1. Чтобы настроить стиль кодирования, используйте следующую комбинацию клавиш:
    • Для Windows/Linux: Ctrl+Alt+S
    • Для macOS: Cmd+,

Это откроет окно настроек IDE.

Для реформатирования кода уже в редакторе:

  • Выделите код или откройте файл, который вы хотите отформатировать.
  • Используйте Ctrl+Alt+L (Windows/Linux) или Cmd+Alt+L (macOS) для реформатирования выделенного кода.

Работа с Автосохранением:

WebStorm автоматически сохраняет изменения в коде, о чём вам не нужно беспокоиться. Однако, если вы все же хотите вручную сохранять файлы (по старой привычке), методы автосохранения можете отключить или настроить:

  1. Откройте настройки File | Settings | Appearance & Behavior | System Settings.
  2. В строке поиска введите «autosave» для более быстрого доступа к нужным параметрам.
  3. Вы увидите опции, связанные с автосохранением. Отсюда вы можете отключить автоматическое сохранение файлов и проектов при потере фокуса окном IDE или через заданные интервалы времени.

Для более подробной информации по настройке вы можете перейти по ссылке на документацию WebStorm по настройке стиля кода (https://www.jetbrains.com/help/webstorm/configuring-code-style.html).

Для форматирования кода на лету, можно также рассмотреть использование Prettier или других плагинов форматирования, которые можно настроить для автоматического форматирования при сохранении файла.

Топ-10 полезных сочетаний клавиш WebStorm

Aleksandra Aganezova

WebStorm позволяет сэкономить массу времени на часто повторяющихся действиях. Почти для всех таких действий существуют сочетания клавиш. Запомнить все эти сочетания невозможно, но в этом и нет необходимости. Предлагаем вам для начала освоить основные из них, и вы сразу увидите, насколько быстрее и эффективнее вы будете работать.

Все приведенные здесь сочетания клавиш — стандартные для macOS и Windows / Linux. Настроить удобные для вас сочетания клавиш можно в Preferences / Settings | Keymap.

Search Everywhere (поиск повсюду): ⇧⇧ / Shift+Shift

Если бы вы спросили нас, какое сочетание клавиш из этой статьи пригодится вам больше других, то мы бы назвали Search Everywhere. Как следует из его названия, оно позволяет искать любые файлы, действия, классы или символы по всему проекту. Все результаты поиска отображаются в одном месте.

Чтобы ограничить область поиска, перейдите на нужную вкладку или нажмите ⇥ / Tab. Кроме того, как показано на анимированном изображении ниже, прямо во всплывающем окне можно включить или отключить некоторые действия.

Show Context Actions (показать контекстные действия): ⌥↵ / Alt+Enter

WebStorm предлагает множество intention-действий, позволяющих быстро применять исправления, генерировать код и менять настройки проекта. Если код подчеркнут волнистой линией или в редакторе WebStorm появилась лампочка, можно щелкнуть по этой лампочке или переместить курсор на подчеркнутый код и нажать ⌥↵ / Alt+Enter — IDE покажет перечень доступных контекстных действий.

А как быть, если вы не хотите использовать какое-то действие или видеть предупреждения? Переместите курсор на код, нажмите ⌥↵ / Alt+Enter, а затем щелкните по стрелке рядом с инспекцией, которая вам не нужна, и отключите ее. Инспекция будет отключена во всем проекте.

Подробнее об инспекциях и о том, что с ними можно сделать, — на этой странице.

Refactor This (рефакторинг кода): ⌃T / Ctrl+Alt+Shift+T

Как и другие IDE JetBrains, WebStorm предлагает широкие возможности рефакторинга. Чтобы быстро перейти к списку доступных рефакторингов выбранного кода, нажмите ⌃T / Ctrl+Alt+Shift+T.

Go to Declaration (переход к объявлению): ⌘B or ⌘+Click / Ctrl+B or Ctrl+Click

WebStorm позволяет мгновенно перейти к объявлению символа: просто нажмите или Ctrl и щелкните на символ. Можно также поместить на него курсор и нажать ⌘B / Ctrl+B. Кроме того, это сочетание клавиш позволяет перейти к файлу, на который есть ссылка, или импортированному модулю.

Если WebStorm обнаруживает несколько возможных объявлений функции, вам будет предложено выбрать нужное из раскрывающегося списка.

Code completion with replace (автодополнение кода с заменой): ⇥ / Tab

Когда вы начинаете вводить код в WebStorm, автоматически появляется всплывающее окно автодополнения. Чтобы выбрать один из предложенных вариантов, можно просто нажать ↵ / Enter. Но если вы хотите заменить один вариант на другой, нажмите ⇥ / Tab, и вместо подставленного элемента появится выбранный.

Extend Selection (расширение области выделения): ⌥↑ / Ctrl+W

Действие Extend Selection позволяет быстро расширить область выделения, не используя мышь. Чтобы снова сузить область, используйте сочетание клавиш ⌥↓ / Shift+Ctrl+W.

Run (запуск): ⌃⌥R / Alt+Shift+F10

Самый просто способ запустить одну из конфигураций запуска проекта — нажать ⌃⌥R в macOS или Alt+Shift+F10 в Windows/Linux и выбрать нужную конфигурацию во всплывающем окне.

Подсказка: чтобы начать отладку, не запуская конфигурацию, выберите из списка конфигурацию запуска и, удерживая ⇧ / Shift, нажмите ↵ / Enter.

Expand Live Template (развернуть шаблон Live Template): ⇥ / Tab

Шаблоны Live Template экономят массу времени. Наберите короткое сокращение и нажмите ⇥ / Tab, чтобы развернуть его в код. Кроме того, WebStorm поддерживает аббревиатуры Emmet для HTML и CSS — их тоже можно развернуть с помощью сочетания клавиш ⇥ / Tab.

Чтобы перейти в шаблоне от одного заполнителя переменной к другому, еще раз нажмите ⇥ / Tab.

WebStorm включает в себя большую коллекцию шаблонов Live Template, в том числе постфиксные шаблоны. Вы также можете добавить собственные пользовательские шаблоны. Подробнее о работе с шаблонами Live Template — в этой статье в блоге.

Multiple carets (несколько курсоров): ⌥+Click / Alt+Click

Очень популярная возможность использования нескольких курсоров есть и в WebStorm. Чтобы добавить или удалить дополнительные курсоры, нажмите и удерживайте ⌥ / Alt, а затем щелкните там, куда нужно поместить следующий курсор, чтобы эти места можно было редактировать одновременно.

Подробнее о работе с несколькими курсорами — в нашей документации.

Scratch File (вспомогательный файл): ⇧⌘N / Ctrl+Alt+Shift+Insert

Вспомогательные файлы (scratch files) позволяют быстро создавать образцы кода или делать заметки по ходу работы в IDE, не затрагивая рабочие файлы проекта. Вспомогательные файлы сохраняются в IDE и доступны из любого проекта.

Другие сочетания клавиш

Интересно, что еще есть в запасе у WebStorm? О других сочетаниях клавиш можно узнать из списка горячих клавиш, доступного из главного меню IDE — Help | Keymap Reference, — или на нашем веб-сайте.

Можно также перейти в Preferences / Settings | Keymap или просто начать набирать имя действия во всплывающем окне Search Everywhere.

Надеемся, что эти сочетания клавиш помогут вам сэкономить время. Какое сочетание ваше любимое? Расскажите об этом в комментариях!

Ваша команда WebStorm
The Drive to Develop

WebStorm: обзор редактора кода и полезных фишек для веб-разработчиков и не только

WebStorm – один из множества редакторов кода для профессиональной разработки. Используется преимущественно фронтенд-разработчиками, которым нужно больше работать с JavaScript или Python, чем со стандартными CSS и HTML. Хотя с ними редактор кода тоже неплохо справляется. Отличительной особенностью является формат “все в коробке”. Это значит, что разработчику не нужно устанавливать никаких дополнений – редактор кода будет отлично работать со всеми технологиями прямо после установки.

Далее рассмотрим основные особенности WebStorm, а также несколько неочевидных вещей.

Дополнения не нужны

Первое и самое мощное конкурентное преимущество этого редактора кода – это отсутствие в необходимости установки каких-то дополнений, чтобы полноценно работать с проектами. По умолчанию сюда встроены все основные плагины, фреймворки, продвинутый анализатор, удобная среда для тестирования кода, отладчик. Более подробно с функционалом можно ознакомиться на официальном сайте разработчиков.

А еще WebStorm кроссплатформенное решение, а значит пойдет практически на любом компьютере. Это очень удобно, когда нет доступа к основной рабочей машине, но нужно срочно внести в проект какие-нибудь правки. Редактор кода быстро устанавливается даже на слабые компьютеры, а как-либо настраивать его не требуется. Все что вам потребуется в таком случае, помимо скачивания и установки редактора кода, это загрузить файлы проекта и открыть его в интерфейсе WebStorm.

Большинство других редакторов не могут похвастаться подобным функционалом. Да, там будет минимальный набор необходимых инструментов, но их будет недостаточно для корректной работы с серьезными проектами. С WebStorm такой проблемы нет – максимум, что вам придется настраивать, так это интерфейс.

Однако это не значит, что у WebStorm нет никаких дополнений и плагинов – вы можете добавить их при необходимости. Просто все те инструменты, которые используются большинством разработчиков, работающих с JavaScript, здесь уже реализованы. Если вам чего-то все-таки недостает или вы работаете с очень сложными проектами, то плагины можно скачать.

Кастомизируемый интерфейс

Первое, с чем сталкивается пользователь любой программы – это интерфейс. В целом, внешний вид рабочей среды WebStorm не имеет существенных отличий от многих других редакторов кода: слева находится панель с файлами и папками проекта, в верхней части вкладки для быстрого переключения между открытыми файлами и меню программы, снизу панель состояний.

Если вас не устраивает стандартное расположение элементов интерфейса, то их можно поменять, в том числе и расположить важные компоненты в произвольном порядке, а не так, как это изначально задумывалось разработчиками. Интерфейс может настраиваться как глобально, так и под один конкретный проект. Например, в одном проекте вы делаете упор на разработку интерфейса с использованием SASS и других препроцессоров. В настройках WebStorm можно вынести необходимые инструменты на отдельную панель для конкретного проекта, а для других применить стандартные или другие индивидуальные настройки.

Стандартный интерфейс WebStorm

Рабочее пространство можно также делить на несколько функциональных зон. Актуально для больших проектов, когда одновременно нужно вносить изменения в несколько файлов, а постоянно переключаться между ними в верхней панели или с помощью сочетаний клавиш неудобно. В раздел “View” есть пункт переключения на несколько функциональных окон. Очень удобно, когда есть несколько мониторов – на одном-двух пишите код, а на другом проводите отладку.

Другая противоположность расширенным настройкам интерфейса – Zen-режим. Вы полностью убираете все пункты меню, вкладки, кнопки и прочее. Остается только окошко, в котором пишется код. Очень удобно для тех, кто хочет минимизировать количество отвлекающих факторов, а при работе с кодом привык пользоваться горячими клавишами. Без их использования будет очень неудобно работать в Zen-режиме.

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

Горячие клавиши

Часто при работе с кодом удобнее использовать горячие клавиши, чем подводить курсор к нужному компоненту интерфейса. В программу уже внесено несколько комбинаций горячих клавиш, но вы можете расширить их, добавляя свои собственные сочетания.

Вот основные сочетания клавиш для работы с файлами:

  • Ctrl+F. Стандартная комбинация для большинства программ. Отвечает за открытие поисковой строки по текущему файлу.
  • Ctrl+Shift+F. Отвечает за вызов поискового интерфейса по всему проекту. Можно найти как конкретный файл/папку, так и какое-то ключевое слово.
  • Ctrl+Shift+N. Поиска файла по древу проекта.
  • Alt+. Отвечает за переключение по открытым вкладкам. < – переключение влево, >– переключение вправо.
  • Shift+F6 – быстрое переименование открытого файла.
  • Ctrl+Alt+Shift+T. Отвечает за быстрое открытие инструментов рефакторинга.
  • Double Shift. Поиск по названием файлов и функций.
  • Ctrl+Tab. Тоже переключение между файлами в проекте.

А вот основной набор клавиш для удобного редактирования текста:

  • Ctrl+Shift+↓/↑. Быстрое перемещение по блокам кода вверх или вниз в зависимости от направления стрелки. Перемещение происходит в пределах выбранной вложенности или выделенного куска кода.
  • Ctrl+Alt+L. Включает/отключает стандартное форматирование кода WebStorm. Очень удобно, если форматирование сбилось или вы допустили где-то ошибку.
  • Alt+клик. Проставляет мульти курсор, то есть вы одновременно можете работать с несколькими строками. Пример на картинке ниже.
  • Alt+Enter. Выведение окошка с рекомендациями по улучшению выбранного куска куда, которое предлагается программой. Обычно, чтобы получить его достаточно навести на пиктограмму лампочки около нужного отрезка.
  • Ctrl+D. Создает дубликат строки, на которой в данный момент расположен курсор мыши.
  • Зажатое колесо мыши выделяет повторения кода, идущие друг за другом.
  • Ctrl+/. Быстрое внесение комментария к коду или удаление текущего комментария.

Ну и пара встроенных сочетаний для работы с Git:

  • Ctrl+K. Делает коммит проекта в систему контроля версий.
  • Ctrl+Shift+K. Делает пуш проекта в систему контроля версий.

Это не все сочетания клавиш, встроенные в WebStorm по умолчанию, но ими чаще всего пользуется большинство разработчиков. Также вы можете составлять свои сочетания клавиш, чтобы сделать процесс работы с кодом более удобным и кастомизированным под свои потребности.

Разделение интерфейса

По умолчанию рабочий интерфейс WebStorm мало отличается от аналогов, но его можно настроить. В том числе доступно необычное, но достаточно удобное решение по разделению рабочего пространства – табличное деление. Вместо вкладок сверху у вас будет таблица сбоку, где в одной вкладке будут расположены все файлы и проекты, а в соседней файлы выбранного проекта.

Такой подход подходит тем, у кого появляется множество открытых вкладок, отвлекающих внимание.

Еще в WebStorm есть история взаимодействия с файлами. Она вызывается сочетанием клавиш Ctrl+E.

Альтернативный вариант взаимодействия с файлами в WebStorm

Сообщество

У WebStorm есть собственный форум, где можно найти решение большинства проблем. Причем разработчики обсуждают не только работу с редактором, но и вообще проблемы, которые могут возникнуть при написании кода проекта.

Создатели WebStorm тоже активно взаимодействуют с аудиторией проекта. Если вы не нашли ответ на свой вопрос на форуме, то добавьте свой вопрос в баг-трекер. В нем собираются все жалобы пользователей. Вопрос, конечно же, должен касаться исключительно работы самого WebStorm, а не проблем с проектом или каким-то сторонним плагином.

Уникальные проблемы попадают в общий список и выставляются на голосование пользователей – когда баг набирает много голосов, команда WebStorm начинает работать над его устранением. В следующем обновлении, скорее всего, этого бага больше не будет. Если же проблема не настолько серьезная, чтобы из-за нее вносить изменения в работу WebStorm, то разработчики предложат вам ветку форума с решением похожей проблемы или статью на других ресурсах, если на форуме подобная проблема не обсуждалась ранее. В любом случае вам попытаются оказать хоть какую-то помощь.

Баг-трекер, кстати, можно использовать не только для отправки ошибок и жалоб, но и предложений для улучшения работы редактора или добавления в него новых возможностей. Вот пример: до 2020 года в WebStorm не было режима совместной работы над кодом нескольких разработчиков. В баг-трекер ранее добавлялось предложение о внедрении этой возможности, но некоторое время оно оставалось вне внимания сообщества – голоса уходили на другие позиции. Когда возникла острая необходимость в удаленной работе за внедрение режима командной разработчики проголосовало большинство членов комьюнити. В итоге, этот режим был введен максимально оперативно – в следующем обновлении программы.

У WebStorm активное сообщество, готовое всегда прийти на помощь, а также активно участвовать в развитии редактора кода – предлагать новые функции, помогать искать баги и так далее. Еще здесь отзывчивые разработчики, которые стараются оперативно решать проблемы и реагировать на запросы сообщества.

Добавление плагинов

В WebStorm уже по умолчанию есть все необходимое для комфортной разработки с использованием JavaScript или Python. Тем не менее, здесь предусмотрен собственный магазин плагинов. При первом запуске WebStorm как раз открывается раздел с выбором плагинов. Там представлены самые популярные варианты. Большинство из них бесплатны. Добавление плагина происходит нажатием по соответствующей кнопке.

Также у разработчиков WebStorm есть собственный онлайн-магазин с большой базой плагинов. Большая часть из них бесплатна. Для добавления плагина из веб-магазина нужно:

  1. Выбрать нужную позицию и нажать на нее, чтобы перейти непосредственно на страницу плагина.
  2. Далее кликните по кнопке “Get”. После этого откроется история версий плагина. Удобно, что вы можете выбрать конкретную версию, а не ту, какую посчитает нужной разработчик.
  3. После скачивания у вас появится инструкция по установке плагина на английском языке. Обычно там нужно выбрать IDE и затем в его настройках указать расположение файла плагина на диске. Иногда этот файл требуется вручную перенести в корневую папку WebStorm.

Онлайн-магазин плагинов WebStorm

Создание файлов

Создать файл можно с помощью открытия специального меню создания. Кликните правой кнопкой мыши по папке в левой части, где хотите добавить дополнительный файл. Откроется меню, в котором предлагается выбрать, что требуется создать: файл или папку. В первом случае также доступны варианты выбора типа файла. По умолчанию доступны только типы файлов, которые используются в веб-разработке. Этот список может быть расширен за счет добавления плагинов. Также можно создать простой файл без расширения и задать его вручную при сохранении.

Доступные варианты расширений создаваемых файлов в WebStorm

Работа с проектами

Вы можете как создать новый проект, сделав папку в интерфейсе WebStorm, так и открыть уже готовый проект. Открытие стандартное – либо через верхнее меню “Файл” и далее “Открыть”, либо через кнопку “Открыть” на экране приветствия. Далее открывается “Проводник”, в котором и выбирается папка проекта. Также эту папку можно просто перетащить в окно WebStorm.

Все открытые проекты по умолчанию отображены в левой панели. Если вы завершили работу с конкретным проектом, то можете удалить его из панели.

Условия использования

WebStorm – платный редактор кода. В базовой версии за годовую подписку просят 70 долларов. В расширенной 298 долларов. Цена написана с учетом НДС в 20%. Чем дольше вы будете пользоваться редактором, тем ниже будет цена. Например, с 3-го года использования стоимость базовой подписки составит всего 42 доллара с учетом НДС. Доступна также ежемесячная оплата.

Цены на годовую подписку WebStorm для частных лиц

Есть спецпредложения, по которым WebStorm можно приобрести бесплатно или с очень серьезной скидкой. Обычно они касаются образования, стартапов, OpenCode-проектов, некоммерческих организаций.

Для тестирования WebStorm доступен бесплатный месяц. После этого доступ потребуется либо купить на общих условиях, либо получить бесплатно, если вы подходите под особые условия.

Заключение

WebStorm – продвинутый платный редактор кода, идеально подходящий для веб-разработчиков, которые часто взаимодействуют с JavaScript. Главное удобство в том, что рабочая среда уже полностью настроена – все, что вам остается просто открыть нужный проект. Однако, каких-либо интересных функций, которых нет и невозможно реализовать в бесплатных аналогах WebStorm предложить не может.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *