program path not specified webstorm что делать
webstorm IDE: program path not specified when running JS script how can I fix this?
I’m trying to run my JavaScript script, however the message keeps on giving me an error saying:
Is there a way to fix this?
4 Answers 4
If you didn’t install node.js and npm, you need to do so.
If you are trying to debug js code and you are using a chrome browser, you need to install their extension and use «Inspect in WebStorm» action.
Found the above behavior occurs with the WebStorm project folder within the OneDrive path (Windows 10). As shown in the image of the run configuration, WebStorm shows and error for location of the path to the JavaScript file even though it is correct. Click Run > Continue from here and it executes with node.js as expected. Move the project to a folder outside of the OneDrive path and the error is gone.
Not the answer you’re looking for? Browse other questions tagged webstorm or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.20.41044
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
ESLint in WebStorm
Every time I got this message:
or no such directory message.
3 Answers 3
You need to point that field to the actual ESLint script. This would usually be the place where you’ve installed the ESLint npm package or command-line tool.
I’ve installed npm & node with brew. It’s easy to keep stuff up to date with brew.
then installed eslint globally with npm
and here is my working config:
Try using those drop-downs next to input field, webstorm gives path w/o any typing.
Following are the steps you need to get it working on Windows 10:
Open command prompt and navigate to your project root.
In the Settings screen that shows up, in the top-left hand corner, there is a Search box. Type eslint in it.
That will show you the ‘ESLint’ settings for this project. Now tick the checkbox that says «Enable». Make sure that the Node interpreter: has the right value. In my case, it was C:\Program Files\nodejs\node.exe
Just below the Node interpreter: setting, there is a setting called ESLint package:. If you have correctly installed the ESLint package as I mentioned in Step 2 above, this setting will be auto-populated to show the current path of ESLint package from your project’s node_modules folder. In my case, the value of this setting was: D:\www\gdp\node_modules\eslint (gdp is my project root folder)
Click on Apply and OK buttons respectively.
Restart Webstorm. If you have successfully completed all the steps, you will not see the prompt to enter the ESLint again.
Command-line interface
Use WebStorm features from the command line: open files and projects, view diffs, merge files, apply code style formatting, and inspect the source code.
For information about running command-line tools from inside WebStorm, see Terminal.
Launcher for a standalone instance
This command changes the PATH environment variable for the current shell only (the current instance of cmd.exe ). If you want to update it permanently for the current user, run setx :
The installer can do this for you if you select Add launchers dir to the PATH on the Installation Options step of the setup wizard.
To run WebStorm from the shell, use the open command with the following options:
-a : specify the application.
—args : specify additional arguments when passing more than just the file or directory to open.
-n : open a new instance of the application even if one is already running.
For example, you can run WebStorm.app with the following command:
If WebStorm is not in the default /Applications directory, specify the full path to it.
You can create a shell script with this command in a directory from your PATH environment variable. For example, create the file /usr/local/bin/webstorm with the following contents:
Make sure you have permissions to execute the script and since /usr/local/bin should be in the PATH environment variable by default, you should be able to run webstorm from anywhere in the shell.
Since /usr/local/bin should be in the PATH environment variable by default, you should be able to run the webstorm command from anywhere in the shell.
Shell scripts generated by the Toolbox App
If you are using the Toolbox App to install and manage JetBrains products, it can create shell scripts for launching your IDEs from the command line.
Generate shell scripts
If necessary, change the shell scripts location.
If you have several versions of the same IDE, the Toolbox App generates a shell script for each version with a unique name. You can change the name of the shell script for an IDE instance in the settings for this specific instance.
Change the name of the shell script
Open the Toolbox App.
At the bottom, change the Shell script name field.
By default, the Toolbox App puts shell scripts in a directory from the system PATH environment variable, so you can run the name of the script as a command to launch WebStorm from any working directory.
Command-line arguments
The launcher script accepts commands, options, and other arguments to modify its behavior:
Path to file or directory
Open the file or directory specified as the argument.
Open the diff viewer to see differences between two specified files.
Open the Merge dialog to merge the specified files.
Apply code style formatting to the specified files.
Perform code inspection on the specified project.
Do not show the splash screen when loading WebStorm.
Do not reopen projects and show the welcome screen. This can help if a project that was open crashes WebStorm for some reason.
Do not load manually installed plugins. This can help if a plugin that you installed crashes WebStorm for some reason. You will be able to start the IDE and either disable or uninstall the problematic plugin.
Wait for the files to be closed before returning to the command prompt.
Настройка PhpStorm для вёрстки на ОС Windows
Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.
По совету коллег решил выложить ее в открытый доступ. Думаю, начинающим верстальщикам это пригодится, т.к. когда-то я потратил немало времени, чтобы прийти к простым истинам.
Сразу оговорюсь, что выбор инструментов — дело сугубо личное, и все, что ниже описано ниже, делалось осознанно для определенной группы. Использовать данную инструкцию или нет — решать только вам.
Итак начнём!
Данная статья будет содержать в себе 3 этапа:
Этап 1 — установка и знакомство с IDE Phpstorm
Установка IDE Phpstorm
Далее будет предложено приобрести лицензию (подписку) или использовать пробный период в 30 дней. Жмём «evaluate for free 30-day».
Далее будет предложено выбрать стиль оформления и предустановленные настройки горячих клавиш (keymap). При необходимости можно посетить сайт Phpstorm themes и выбрать ту тему, которая вам больше по душе.
Создание нового проекта в IDE Phpstorm
Создание нового локального проекта
Отроется окно, в котром нам будет предложено выбрать:
В случае выбора проекта с применением шаблона можно будет выбрать версию шаблона. Например, шаблон boostrap автоматически подгрузится с репозитория на github.
В результате у нас откроется окно нашего нового проекта. В котором будет создана папка с названием нашего проекта. Так же тут располагается папка «.idea», ни в коем случае не удаляйте её! В ней хранятся все настройки, связанные с проектом.
Также обращаю Ваше внимание на то, что при создании нового проекта программа попросить вас настроить пространство имён «namespace». В целом можно не заморачиваться и доверить это самой программе.
Для этого нужно во всплывающем окне нажать на ссылку «automatically». В случае, если вы случайно закрыли данное окно или оно «само» закрылось, кликните по строке состояния, и в терминале кликните на ссылку «automatically». Если вы все сделали верно, то увидите соответствующее сообщение: «Detect psr-0 namespace roots: no psr-0 namespace roots was detected». Для скрытия окна нажмите на значок с перпендикулярной стрелочкой.
Создание нового проекта связанного с удаленным сервером
Для создания проекта, связанного с удаленным сервером, необходимо в окне приветствия выбрать пункт «Create New Projects from Existing Files» или в меню IDE «File — New Projects from Existing Files».
Далее вам будет предложено выбрать сценарий использования, нам нужен вариант «Web server is on remote host, files are accessible via ftp/sftp/ftps».
Далее нужно ввести название проекта, а также указать, где он будет храниться на вашем ПК. Если вы хотите изменить путь хранения проектов, то нужно выбрать вариант «Сustom» и указать папку куда нужно поместить проект.
Важно! Используйте только латиницу в именовании файлов, папок, путей хранения. Так как часть инструментов могут просто не поддерживать кириллицу.
Далее будет предложено создать новое удаленное подключение или выбрать из уже существующих. Создадим новое sftp (shh) подключение, укажем параметры подключения к удаленному серверу.
«Web server root url» путь по которому будут открываться файлы для просмотра на удаленном сервере. Путь автоматически пропишется, как только будет заполнена строчка «sftp host».
Далее программа предложит указать какие файлы относятся к проекту, для этого указываем папку с проектом на удаленном сервере и жмём кнопку «Project root». В моем случае это все, что лежит на сервере. В результате у Вас появится зеленый фон, что файлы помечены.
Если мы нажмем продолжить, что программа начнет скачивать отмеченные файлы на ПК с сервера. Так как проекты обычно очень большие по объему и кол-ву файлов, мы это делать не будем. Для этого добавим файлы в исключение, нажав на кнопку «Excluded from download». В дальнейшем, мы разберем как загрузить только нужные нам файлы.
Жмём «далее» программа предложим, указать нам свой путь для корневой папки проекта. Тут можно поставить «/» или просто нажать кнопку «Finish».
Готово! Мы связали наш проект с удаленным сервером. Теперь попробуем скачать какой-нибудь файл с сервера, внести в него правку и отправить обратно на сервер. Сначала нам, нужно поправить настройки. Если помните, выше, мы добавили в исключение весь проект, чтобы не скачивать его полностью. Нажимаем сочетание клавиш «Сtrl+Alt+S», переходим в раздел «Build, Execution, Deployment — Deployment», нажимает на вкладку «Excluded path» и удаляем исключения, кликнув на путь, а после нажав кнопку «Remove path», после чего жмём кнопку «OK».
В результате, если все сделано правильно, то во вкладке «Remote host» наши файлы подсветятся зеленым фоном.
Для того, чтобы скачать файл или папку к себе на ПК, нужно кликнуть правой кнопкой мыши и в появившемся всплывающем меню выбрать пункт «Download from here». После чего файлы загрузятся к Вам на ПК.
Как только файлы загрузятся они отобразятся во вкладке «Project» и в окне передачи файлов «File transfer *имя удаленного сервера*» появится соответствующее сообщение.
После чего вносим правку в нужный нам файл и отправляем его обратно на сервер. Для этого нужно кликнуть правой кнопкой мыши по файлу, во вкладке «Project», и во всплывающем меню выбрать пункт «Upload to».
По желанию, можно назначить горячие клавиши (keymap) для быстрого скачивания и отправки файлов.
Данный способ удобен, если нам нужно поправить только один файл, но для полноценной разработки, лучше настроить автоматическую отправку файлов на сервер. Для этого нажимаем сочетание клавиш «Ctrl+Alt+S» или в меню «Tools — Deployment — Options» и вносим правки:
Настройка визуального интерфейса и обзор возможностей IDE
Удалить не нужные вкладки, можно нажав правой кнопкой мыши по вкладке и выбрать пункт «Remove from sidebar».
Я рекомендую расположить вкладки следующим образом:
В результате должно все отобразиться примерно, как показано на изображениях ниже.
Подсказки по коду
По умолчанию редактор подскажет, если в коде есть замечания или ошибки. Справа в текущем документе будут отображаться желтые или красные полоски. Кликнув по полоске Вас сразу перекинет на строчку, где возникла ошибка или замечание. Так же можно просмотреть ошибку\замечание просто наведя курсор на полоску.
Просмотр страницы в браузере
Для просмотра страницы в браузере наведите мышью в правый угол документа, появится окно в котором будет предложено выбрать, в каком браузере вы хотите просмотреть страницу. Так же это можно сделать нажав сочетание клавиш «Alt + F2» (внимание сочетание клавиш может отличаться!).
Так же можно настроить список браузеров, указать в каком браузере открывать по умолчанию, и отключить всплывающую подсказку в правом верхнем углу документа. Для этого необходимо нажать сочетание клавиш «Ctrl+Alt+S» и перейти в раздел «Tools — Web browsers» или воспользоваться поиском, как это показано на изображении ниже.
Инструмент emmet
Данный инструмент, уже предустановлен, поэтому никаких дополнительных установок делать не нужно, можно сразу пользоваться. Документацию по инструменту emmet можно посмотреть на сайте, примеры, шпаргалка.
Правка файлов только на удаленном сервере
Для правки файлов на удаленном сервере, кликаем на вкладку «remote host», открываем файл, не загружая его на свой пк (кликаем 2 раза на файл, во вкладке remote host). Для того чтобы отправить файл на сервер нажимаем на иконку . Так же есть возможность откатить правки обратно, нажав на иконку , или посмотреть изменения нажав на иконку .
Работа с локальной историей файлов
Для того, чтобы просмотреть локальную историю изменений файла, нужно кликнуть правой кнопкой мыши по файлу, и выбрать пункт «Local History — Show History».
В результате откроется окно, в котором слево будет отображена вся доступная история изменений файла и 2 колонки. Левая колонка это состояние файла из истории, а в правой — текущее. Обратите внимание, Вы можете вносить правки только в правую колонку. Так же доступны кнопки откатить изменения или сохранить патч. После закрытия окна, все изменения в правой колонке, автоматически сохраняться.
Сравнение содержимого 2-х файлов
Для того чтобы сравни 2 файла на вашем ПК, необходимо кликнуть по файлу правой кнопкой мыши и выбрать пункт «Compare with» в появившемся окне указать, с каким файлом мы хотим сравнить.
Для того чтобы сравнить локальный файл с файлом на удаленном сервере, необходимо кликнуть по файлу правой кнопкой мыши и выбрать пункт «Deploymet — Compare with deployed version on *имя удаленно сервера*».
Смена кодировки
Бывает, что необходимо перекодировать файлы из cp-1251 в utf-8. Для этого необходимо в файле кликнуть правой кнопкой мыши, и выбрать пункт «File Encode». Так же это можно сделать кликнув по выбору кодировки.
Исправление символов переноса
В unix системах символы переноса на новую строку, отличаются от символов в Windows. Из-за этого может получиться так, что при сравнении файлов, весь файл будет подсвечиваться как модифицированный, на деле Вы поменяли всего лишь 1 символ.
Рекомендуется использовать unix переносы. В меню программы «file — file encoding».
Настройка табуляции, конвертация табов\пробелов
В случае если документ содержит несколько вариантов табуляции, редактор Вам подскажет это и предложит выбрать.
Так же это можно сделать в настройках, нажав «Ctrl+Alt+S» и перейдя в раздел «Editor — Code Style», выбрать нужный формат документа и поставить галочку «Use tab charaster».
Для быстрого переформатирования документа нужно в меню программы «Edit — Convert Indents» выбрать какой символ использовать.
Поиск расположения файлов на ПК
Чтобы быстро найти расположение файла на ПК, необходимо кликнуть правой кнопкой мыши по файлу, и выбрать пункт «Show in Explorer», отроется папка с выбранным файлом.
Быстрое отформатировать в семантический код
Иногда попадаются файлы, которые не возможно читать из-за плохого форматирования или минимизации. Тут нам поможет реформатирование кода, в меню программы выбираем пункт «Code — Reformat Code».
Работа с терминалом и ssh session
Вызвать терминал можно средствами меню программы «View — Tools Windows — Terminal», сочетанием клавиш (Alt+ F12), из панели быстрого доступа. По сути это командная строка в Windows.
Для запуска SSH Терминала для подключения к серверу, нужно перейти в меню программы «Tools — Start SHH Session» после чего выбрать уже существующее подключение, или указать параметры подключения для нового.
Заметки и закладки
Для добавления заметки необходимо добавить Html комментарий с текстом todo. Вызвать панель заметом можно из меню программы «View — Tools Windows — TODO» или из панели быстрого доступа. При помощи фильтра можно настроить отображение заметок. По двойному клику на заметку, у Вас автоматически откроется файл и курсов будет расположен на заметке.
Закладки позволяют быстро просматривать или показывать куски кода. Для добавления закладки необходимо установить курсор на начало нужного куска кода и при помощи горячей клавиши (F11) или из меню программы «Navigate — Bookmark — Toggle Bookmark» поставить закладку. Закладка отобразится в виде галочки.
Для быстрого просмотра при помощи горячей клавиши(Shift-F11) или из меню программы «Navigate — Bookmark — Show Bookmark» вызвать окно просмотра.
LiveEdit(LivePreview) просмотр изменений без перезагрузки страницы на ПК
Установим плагин LiveEdit. Для этого необходимо открыть настройки программы(Ctrl+Alt+S), затем перейти в раздел «Plugins» и нажать кнопку «Browse repositories. ».
В открывшемся окне, в строке поиска ввести «Live Edit» и нажать кнопку Install. После установки программа попросить перезагрузить ее.
Снова идем в настройки программы (Ctrl+Alt+S), затем в «Build, Execution, Debbug — Live Edit» и ставим галочку на «Auto in (300 ms)».
Теперь необходимо установить дополнение, для браузера, чтобы связать наш редактор и браузер. Обратите внимание, что дополнение работает, только в браузерах Chrome, Yandex. В будущем разработчики обещают дополнение для браузеров Firefox, Safari. Более детально вы можете прочитать на сайте разработчиков.
Запускаем Live Edit, для этого выбираем пункт в меню программы «Run — Debug» или на панеле быстрого доступа нажимаем иконку жука.
Обращаю Ваше внимание, что режим «Live Edit» работает только для локальных проектов, т.е только для тех файлов, которые лежат на вашем ПК и не связаны с удаленным сервером.
Этап 2 — установка и настройка компилятора стилей (sass,scss)
Для установки компилятора на понадобится установить:
Установка nodejs
Скачиваем установщик для Windows c официального сайта. Стандартная установка, но на этапе выбора компонентов убедитесь, что выбраны пункты «Add to path». Должно быть как на изображении ниже.
Установка ruby
Скачиваем установщик для Windows c официального сайта. Стандартная установка, но на этапе выбора компонентов убедитесь, что стоит галочка «Add Ruby Executables to PATH».
Перезапускаем Phpstorm закрыв его или воспользоваться из меню программы «File — Invalidate Chache / Restart — Just Restart». Проверяем версию nodejs и ruby. Для этого нужно набрать в терминале
Иногда требуется перезапустить компьютер чтобы терминал заработал. Все зависит от версии Phpstorm.
Установка gem sass, scss
Для установки пакетов необходимо по очереди в терминале ввести команды: и При первой установке вплывет стандартное окно Windows с вопросом, можно ли выполнить приложение ruby. Жмём «ОК».
Нажав на ссылку «Add watcher», автоматически откроется окно с настройкой наблюдателя. Если у нас всё установилось корректно, то в поле programm у нас будет путь к sass.bat файлу.
Нажимаем «ОК» и на этом быстрая настройка завершена. Проверяем работу компилятора, для этого напишем любой кусок кода в sass файле. В результате после нажатия «Ctrl+S» будет выполнена компиляция стилей.
В случае если в файле допущена ошибка, программа выдаст нас ошибку и файл не будет скомпилирован.
Далее кликаем 2 раза по строчке Sass.
Поле «Arguments» после символа «:» нужно указать путь к папке css. Жмём на кнопку «Inset macros» и вставляем переменную «$FileDir». В данном случае «$FileDir» это переменная программы, которая автоматически будет подставлять путь до нашего проекта.
В результате получим, как на изображении, и жмём кнопку «ОК».
Старые файлы можно удалить.
Этап 3 — установка сборщика проектов, пример настройки (gulp)
Пример установки и настройки с нуля
Если вы что-то нажали не так, или решили исправить, то можно это сделать зайдя в сам файл package.json, который создался и располагается в корне проекта.
Более детально о настройке вы можете прочитать на официальном сайте.
Теперь нам нужно установить сам gulp, и какой-то полезный плагин, пускай это будет autoprefixer. О проекте PostCss и Autoprefixer Вы можете прочитать на официальном сайте.
Обратите внимание, что установка autoprefixer на официальном сайте, отличается от установки на сайте npm. Это связано с тем, что на официальном сайте, autoprefixer работает через PostCss(постпроцессор). В дальнейшем, лучше использовать данный плагин через PostCSS.
Теперь если мы откроем файл package.json, то увидим, что наши дополнения автоматически прописались в блок «devDependencies».
Установка плагинов завершена, теперь их нужно настроить.
Для этого создадим в корне файл «gulpfile.js», и вставляем туда код который указан на сайте npm в блоке usage и сохраняем его (Ctrl+S).
Я внес небольшие изменения, чтобы было более понятно.
Для того, чтобы выполнить наше задание, откроем панель gulp, сделать это можно кликнув правой кнопкой мыши по файлу «gulpfile.js» и выбрать пункт «Show Gulp Tasks» или из меню программы «View — Tools WIndows — Gulp». В результате чего отроется панель со списком задач.
Внимание! После любых правок в файле «gulpfile.js», необходимо обновить задачи.
В результате у нас должно появиться ещё одно задание.
Кликаем 2 раза по заданию «nano» и получаем минифицированый файл, без лишних пробелов, отступов, переносов и.т.д.
Как видите ничего сложного нет. Больше полезных плагинов Вы можете найти тут, так же рекомендую подписаться на группу вконтакте, в который Вы сможете следить за развитием проекта и замучать вопросами автора PostCss.
Дальше у Вас скорей всего возникнет логичный вопрос: «Мне каждый раз придется, каждый раз так устанавливать все плагины для других проектов?»
На этом настройка закончена. В целом время на прочтение и настройку займет не больше одного часа. Надеюсь статья будет Вам полезна.
В планах добавить обзор систем контроля версии(git, mercurial).