Разумное использование WebStorm — конфигурация среды

предисловие

Я использую webstorm в качестве инструмента для разработки интерфейса более 3 лет. Я нашел время, чтобы записать некоторые из моих часто используемых плагинов и конфигураций. Заинтересованные разработчики могут прочитать эту статью.

Конфигурация среды

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

установить программное обеспечение

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

• Выберите путь установки

• Выберите версию для установки и ассоциации файлов по умолчанию

• начать установку

• Установка ...

• После завершения установки перезагрузите компьютер

Запустите программное обеспечение

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

• Отправьте журнал с информацией о сбоях и подождите, пока Jet поможет им улучшить продукт, вы можете выбрать в соответствии со своими потребностями, здесь выберите «Отправить».

• Выберите бесплатную пробную версию и заполните свой адрес электронной почты.

программное обеспечение для настройки

В интерфейсе запуска программного обеспечения откройте свой проект.

• Откройте любой файл в проекте, этот интерфейс может выглядеть немного уродливым, мы сделаем его позже.

Изменить шрифт и высоту строки

выберите строку менюFile - SettingsОткройте панель настроек программы.

• Измените шрифт, размер, высоту строки и включите дефисы, как показано ниже.

Общие плагины

Затем мы устанавливаем несколько плагинов, чтобы заново изобрести webstorm.

Плагин темы

Первое, что необходимо установить, это плагин темы.Material Theme UI, откройте панель настроек программного обеспечения, чтобы найти,Plugins, найдите этот плагин

• установка...

• Установка прошла успешно, перезапустите webstorm

Установить плагин иконок

После установки плагина темы интерфейс выглядит немного лучше, но иконка по-прежнему стоит по умолчанию, что очень нелогично, продолжаемPluginsискать вAtom Material Icons

• установка...

• Установка прошла успешно, изменения были применены, и веб-шторм был перезапущен вручную.

сменить тему

После установки плагина темы и плагина иконки нам также нужноSettingsПереключите темы на панели

• В открывшейся панели вThemeВыберите понравившуюся тему там, выберите здесьAtom One Dark (Material)

• существуетEditor - FontИзменить шрифт темы на панели

• Эффект после завершения настройки

Плагин перевода

Английский не очень хороший разработчик.При именовании переменных, когда не хватает слов, в большинстве случаев сайт перевода будет открываться и потом вставляться.В Webstorm есть программа под названиемTranslationПлагин, вы можете выбрать китайский язык и напрямую щелкнуть правой кнопкой мыши, чтобы перевести и заменить.

Можем поискать и установить в магазине плагинов

После завершения установки введите китайский язык в редакторе и щелкните правой кнопкой мыши для перевода, как показано ниже:

шаблон коммита git

Когда мы используем git для отправки кода, если команда сформулировала спецификацию отправки, им может потребоваться написать префикс отправки самостоятельно.В webstorm есть файл с именемGit Commit TemplateПлагин может вручную выбрать тип и автоматически заполнить префикс для нас.

Просто найдите и установите в магазине плагинов.

• Мы просто меняем код в проекте, а затем выбираем строку менюgit - commit

• По умолчанию отображается в левой части проекта, мы изменили его на всплывающее окно.

• Щелкните значок шаблона, чтобы открыть параметры отправки.

• В соответствии с содержанием, которое вы изменили, вы можете выбрать и заполнить по мере необходимости.

• После заполнения вы вернетесь на страницу отправки, и только что выбранные нами параметры будут автоматически заполнены.

Журнал коммитов Git

При поддержке проекта мы находим ошибки. Мы хотим быстро узнать, кто отправил эту строку кода. Большинство разработчиков может пройти черезgit logнайти.

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

Найдите и установите в магазине плагинов

• После завершения установки перезапустите редактор

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

Инструмент ассоциации кода AI

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

Перед установкой этого плагина нам нужно отключить встроенное завершение кода следующим образом (снять галочку):

Просто найдите и установите в магазине плагинов.

• После завершения установки перезапустите редактор и откройтеsetting-Codotaпанель, включите ее

• Просто напишите код, чтобы увидеть эффект

Файл игнорировать

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

Просто найдите и установите в магазине плагинов.

• Щелкните правой кнопкой мыши, добавьте файл в игнор

  

окончательный эффект

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

• Окончательный интерфейс выглядит следующим образом

Примечание. После того, как окружающие вкладки скрыты, их можно отобразить, дважды щелкнув клавишу команды в системе Mac.

Системе Windows необходимо установить комбинацию клавиш для ее отображения, мы открываем панель настроек и ищем в раскладке.Tool Window BarsЗатем установите сочетания клавиш.

Другая конфигурация

Вот еще несколько конфигураций по проекту.

Конфигурация Эслинта

Для настройки Eslint перейдите к другой моей статье:Редактор конфигурации

Построить индекс проекта

Когда вы пишете код и обнаруживаете, что некоторые встроенные инструкции Vue и некоторые компоненты elementUI не имеют подсказок кода, вам необходимо построить индекс проекта.Метод работы следующий:

• существуетnode_modulesЩелкните правой кнопкой мыши папку и выберите из всплывающих параметровMark Directory as -Not ExcludedТолько что

Некоторые общие ярлыки

• Выберите текущую строку кода:command shift ⬅️/command shift ➡️

• Переместите текущую строку кода:command ⬆️/ commind ⬇️

• Отправьте код в git local:command K

• Отправьте код в удаленный репозиторий git:comnand shift K

• shiftДважды нажмите, ищите где угодно, очень удобно искать файлы, функции, коды

• команда + f поиск текущей страницы

• Команда + Shift + F Глобальное поле поиска

• command + r заменить текущий документ

• команда + shift + r глобальное поле замены

• команда + опция + l код формата

• shift + f6 для переименования файлов, меток и имен переменных

• f2, shift + f2 переключение на предыдущую\следующую выделенную ошибочную позицию

• shift + enter, независимо от того, где он находится, автоматически переходить на следующую строку

• option + Введите код предупреждения быстро дает автоматическое исправление

• команда + щелчок левой кнопкой мыши, чтобы перейти к месту вызова кода

• команда + удалить удалить текущую строку

• команда + d, чтобы скопировать и добавить новую строку того же кода

• команда + w закрывает текущую вкладку файла

• команда + / код строки комментария

• Command + B переходит к объявлению переменной

• команда + шифт + c скопировать путь к файлу

• команда + Shift + вкладка [ ] для быстрого переключения, очень полезно

• command + shift + +/- развернуть/свернуть текущий выбранный блок кода

Преобразовать блок кода в метод

Выделите блок кода мышкой и нажмите:command+option+mЭта часть кода может быть автоматически преобразована в метод.

Резервное копирование конфигурации

Сначала войдите в свою учетную запись в webstorm, нажмите значок, показанный на рисунке ниже (нижняя часть редактора), чтобы завершить синхронизацию.

Примечание. Если вы не видите этот столбец, вам необходимоview - status Barвключи

Отключить ненужные плагины

существуетhelpОтключено в меню, как показано на следующем рисунке:

На вновь открывшейся панели выберите плагин, который хотите отключить, и нажмите «ОК», как показано на следующем рисунке:

Подать заявку на лицензию

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

Адрес приложения:Лицензия проекта с открытым исходным кодом

напиши в конце

На данный момент статья опубликована.

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

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

• Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
• Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌