Webstorm не работает автокомплит

Автозаполнение WebStorm и автоматический импорт не работают

Я работаю над React-Native в WebStorm.

Проблема 1

У меня есть класс, я хочу использовать функцию автоматического импорта WebStorm. Она работает для некоторых классов, но не для всех.

Когда я набираю имя и нажимаю Ctrl + Space , он не импортирует класс автоматически.

Я также пробовал Alt + Enter , у него нет предложения по импорту в списке.

Проблема 2

Затем я вручную импортировал класс, теперь WebStorm не может отображать предложения методов с автозаполнением, когда я нажимаю Ctrl + Space , мои методы там не отображаются.

Есть ли какая-то настройка WebStorm, которую мне не хватает. Я хочу повысить свою продуктивность.

2 ответа

Вы экспортируете свою функцию с помощью с именем export синтаксис ( export function alertMessage() ), но импортируя его по умолчанию с псевдонимом Utility ; IDE не может знать, что такое Utility , поэтому автозаполнение / автоимпорт не предусмотрено. Либо измените экспорт на значение по умолчанию, либо импортируйте свою функцию с помощью синтаксис именованного импорта

Самый простой способ добиться правильного завершения кода при разработке любого (не только реагирующего) приложения — добавить поддержку необходимых библиотек сценариев типов через саму среду IDE. Предполагая, что вы используете IDE Web Storm для разработки:

Перейти к Settings (Ctrl + Alt + S) -> Languages & Frameworks

Разверните JavaScript-> Библиотека

При использовании реакции предлагаю добавить: react; react-dom; react-native (для разработки мобильных приложений)

Источник

Автозаполнение WebStorm не работает для React js

Я создал проект, используя create-react-app . Я переключил свою версию языка JavaScript на React JSX в Preferences | Languages & Frameworks | JavaScript . Но у меня все еще есть предупреждение о неразрешенных переменных и предупреждение о неразрешенных функциях.

4 ответа

Для улучшения автозавершения кода мы рекомендуем добавить TypeScript файл определения для React with npm install —save @types/react

Кроме того, для справки, в соответствии с https://youtrack.jetbrains.com / issue / WEB-24780 # comment = 27-2681125 можно решить ее полностью в IntelliJ, вместо того, чтобы вручную запускать команду npm .

Вы можете найти все пакеты, которые вам нужны для автозаполнения.

На WebStorm откройте Preferences , разверните Languages & Frameworks , затем разверните JavaScript , нажмите Libraries . Нажмите кнопку Add и добавьте реакцию на список библиотек.
Перезапустите WebStorm.

Вы делаете это:
Вы можете добавить определение TypeScript для React с помощью npm install —save @types/react

Самый простой способ добиться правильного завершения кода при разработке любого (не только реагирующего) приложения — добавить поддержку необходимых библиотек сценариев типов через саму IDE. Предполагая, что вы используете JetBrains IDE для веб-разработчика (может быть, не WebStorm, а IntelliJ IDEA):

• перейдите в Настройки (Ctrl + Alt + S) -> Языки и рамки
• развернуть JavaScript
• выбрав Библиотеки, вы увидите что-то вроде этого
• нажмите Скачать .
• найдите любые библиотеки, которые вам нужны (вы можете просто начать ввод имени библиотеки в списке библиотек), затем нажмите «Загрузить и установить»
• при использовании реагировать предлагаю добавить: реагировать; реагируют — РОМ ; Reaction-native (если вы заинтересованы в мобильной разработке)
• нажмите Применить, когда вы выполните

Обычно вам не нужно перезапускать IDE, изменения вступают в силу немедленно. Удачного кодирования!

Источник

WebStorm 2020.1: улучшения в интерфейсе, поддержка Vuex и запуск Prettier при сохранении файлов

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

Скачать 30-дневную пробную версию WebStorm 2020.1 можно на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.

А сейчас давайте рассмотрим основные улучшения подробнее.

Новый шрифт для работы с кодом

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

Более полезная быстрая документация

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

При работе с JavaScript и TypeScript кодом быстрая документация покажет подробную информацию о типе и видимости символа, а также о том, где этот символ определен.

Режим Zen для сфокусированной работы

Новый режим Zen поможет вам полностью сосредоточиться на своем коде. Сочетая в себе два режима, Distraction Free и Full Screen, он позволяет быстро включить их оба и на время изолировать то, что может отвлечь ваше внимание.

Чтобы попробовать новый режим, перейдите к View | Appearance | Enter Zen Mode из основного меню WebStorm или используйте всплывающее окно Switch (Ctrl+` | View mode | Enter Zen Mode).

Поддержка Vuex и Vue Composition API

Vue.js набирает популярность, поэтому мы активно работаем над тем, чтобы сделать WebStorm самой полезной IDE для работы с этим фреймворком. На этот раз мы добавили два крупных улучшения.

Начнем с того, что при работе с библиотекой Vuex вы увидите варианты автодополнения кода для символов Vue store и модулей при редактировании Vue-компонентов. WebStorm также поможет быстро перейти к определению геттеров, мутаций и действий.

Во-вторых, поскольку уже можно использовать Composition API, доступный в грядущем релизе Vue 3, мы решили добавить его поддержку в WebStorm 2020.1.

Запуск Prettier при сохранении файлов

Благодаря новой опции Run on save for files, вы можете применить форматирование Prettier ко всем файлам, указанным в настройках WebStorm и отредактированным в текущем проекте, при сохранении этих файлов — больше не нужно настраивать file watcher или пользоваться сторонним плагином.

Помощь с выявлением грамматических и стилистических ошибок

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

По умолчанию Grazie включен только для английского языка и проверяет не все типы файлов на возможные грамматические ошибки. Вы можете добавить больше языков и изменить предустановленные настройки в Preferences/Settings | Editor | Proofreading (перейдите в раздел Grammar, если вы хотите настроить область проверок, посмотреть существующие правила и добавить исключения).

Новые intention-действия и инспекции

Как всегда, мы добавили несколько новых intention-действий и быстрых исправлений, чтобы помочь вам сэкономить время при работе с JavaScript и TypeScript кодом. Например, одно из новых intention-действий, доступное при нажатии на Alt+Enter, позволит быстро преобразовать существующий код в optional chaining и/или nullish coalescing.

Больше информации о новых intention-действиях и быстрых исправлениях доступно в релизном блог-посте (на английском).

Поддержка последних версий популярных технологий

В WebStorm 2020.1 вы найдете встроенную поддержку функциональности TypeScript 3.8, в том числе type-only imports/exports, private fields, и top-level await , которая поможет вам работать с ними более эффективно. Помимо этого, мы сделали работу с Angular 9 проектами проще, полностью поддержав новый формат метаданных.

Более удобное перебазирование коммитов

Действие Interactively Rebase from Here, доступное на вкладке Logs окна Git, позволяет редактировать, объединять и удалять предыдущие коммиты. Это помогает сделать историю коммитов более линейной и понятной.

В WebStorm 2020.1 вы найдете улучшенную, более интерактивную версию диалогового окна Rebasing Commits, которое открывается при вызове действия Interactively Rebase from Here. В обновленном диалоговом окне отображаются действия, которые можно применить к каждому коммиту. Он также показывает подробную информацию о каждом коммите и позволяет вам увидеть разницу и быстро сбросить примененные изменения.

Использование WebStorm для быстрого редактирования файлов

Благодаря новому режиму LightEdit, вы можете открывать файлы в отдельном окне текстового редактора, при этом не создавая и не загружая целый проект. Режим сработает, если WebStorm еще не запущен. Если WebStorm запущен, файл откроется в нем, как обычно.

Чтобы попробовать новый режим в действии, нажмите правой кнопкой мыши на файл, который вы хотите отредактировать, и выберите WebStorm из списка предложенных программ. Как вариант, вы также можете настроить command-line launcher, как описано здесь, и открыть файл, пользуясь командной строкой.

На этом всё на этот раз. Спасибо, что дочитали до конца! Еще больше подробностей вы найдете в релизном блог-посте (на английском). Вопросы, пожелания и просто мысли высказывайте в комментариях. Мы, как и всегда, будем рады ответить. Баг-репорты можно создать тут.

Команда JetBrains WebStorm
The Drive to Develop

Источник

Секреты быстрого кодинга в WebStorm

Сегодня — немного практических советов по работе с WebStorm.

Вначале пишем совсем простой HTML, после color: нажимаем и получаем список цветов.

КО подсказывает: во всех IDE от JetBrains — это контекстная подсказка.

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

А теперь представим себе проект посложнее, небольшое приложение под node.js.

Говорят, что IDE от JetBrains хороши вниманием к деталям и пониманием контекста. Вот, казалось бы, мелочь: мне надо для тестирования этого приложения сделать простенькую страницу с формой на HTML. Сделал, попробовал, усложнил приложение, тест тоже надо усложнять: переделываю форму так, чтобы она выглядела удобно для заполнения нескольких полей.

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

Когда ставишь открывающую фигурную скобку, тут же ставится закрывающая — и захочешь, а не забудешь ее в конце тела функции. Нажимаешь Enter — и она любезно отъезжает не на следующую строку, а на две строки вниз, открывая место для тела функции.

Надо размножить строку, скажем, однотипное поле формы? (от слова Duplicate).

Надо перейти к определению чего-то (переменной, функции, класса?) (от слова Base). А теперь надо бы обратно? .

— на некоторых ноутбуках переворачивает экран на 90 o . Чтобы отменить эту полезную функцию и пользоваться этой комбинацией клавиш в WebStorm, надо в правой части системной панели вызвать программу HD-графика Intel, и там выбрать Комбинация клавиш | Выключить.

Еще немного хитростей для тех, кто, как я, недавно пишет под node.js:

1) Если в node.js при запуске приложения из WebStorm возникает ошибка

это, скорее всего, значит, что вы пытаетесь запустить еще одну копию сервера node.js (а на одном TCP-порте может жить только одна копия). Чтобы этого избежать, надо в Run | Edit Configurations в ветке node.js для вашего приложения (например, index.js) поставить галочку check no other instances are running.

2) Если в приложении есть require(‘модуль’), а определения (например, функций) из этого модуля в IDE не видны, и по Ctrl-B недоступны, похоже, вы цинично нарушаете рекомендации разработчиков node.js: если вы используете модуль в проекте, надо его устанавливать локально.

Это значит (спасибо Сергею Симончику за разъяснение!), что в папке проекта должна быть папка node_modules, и в ней должны быть папки соответствующих модулей. Если папки нет, и по команде npm install модуль она не создается, ее надо создать руками, а в корневой папке проекта в командной строке дать команду npm install модуль.

Программа npm туповата (или чересчур умна): если у вас в корне проекта нет node_modules, а выше корня проекта есть папка node_modules, локальная установка модуля произойдет в нее.

Если же модули установлены правильно, а WebStorm продолжает подчеркивать функции из модулей серой волнистой линией («не определены»), то надо отметить, какие библиотеки node.js вы подключаете:

3) Проверку кода «на лету» в WebStorm можно делать аж тремя разными способами, все три — весьма гибкие: JSLint, JSHint и внутренний инспектор кода. По умолчанию включен только внутренний инспектор, который можно нечеловечески гибко настраивать в меню Settings->Inspections.

Если же надо включить JSHint или JSLint, то это делается в меню Javascript | Code Quality Tools. Оба этих инструмента — внешние, но они идут в комплекте с WebStorm и прозрачно интегрированы в IDE.

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

Не всем постоянно нужна проверка правописания встроенным инспектора кода. Я не хочу называть переменные в своем коде словами английского языка, а всякие там qry_1 и qry_2 подчеркиваются зеленой волнистой линией (не говоря уже о названиях полей в БД, которые тоже в коде попадаются). Отключить проверку правописания можно в Settings | Inspections | Spelling.

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

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

Источник