Как настроить jshint vs code

Ошибка кода Visual Studio — не удалось загрузить библиотеку jshint

Каждый раз, когда код Visual Studio запускается или загружается, он отображает сообщение об ошибке: » Не удалось загрузить библиотеку jshint. Пожалуйста, установите jshint в папку рабочей области, используя ‘npm install jshint’, или глобально, используя ‘npm install -g jshint’, а затем нажмите Retry «. Есть ли доступное решение?

4 ответа

Вам нужно будет следовать инструкциям и установить jshint.

Только для рабочего пространства npm установить jshint

Для всех ваших рабочих мест npm установить -g jshint

У меня была эта проблема, когда я установил jshint , используя yarn глобально ( yarn global add jshint ). Я добавил следующие свойства в settings.json для User для решения проблемы:

Первое свойство, т.е. jshint.packageManager указывает, что yarn используется для управления node пакетами вместо npm . Второй, то есть jshint.nodePath указывает путь к установке jshint . Чтобы проверить, успешно ли загружен jshint , я открыл командный поддон ( CTRL + 3 ) и выполнил команду JSHint: Show output , которая показала это сообщение в выходных данных. :

Это указывало на то, что проблема была решена. После этого сообщения jshint появились в файлах *.js .

Попробуйте удалить с помощью «npm uninstall» и перейдите по ссылке — https: //marketplace.visualstudio. com / items? itemName = dbaeumer.jshint для переустановки.

Чтобы применить изменения к глобальной области, а не только к определенной рабочей области, используйте следующую команду в терминале: —

Для определенного рабочего пространства используйте следующую команду в терминале: —

Источник

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.

В магазине расширений VSCode существует огромное множество плагинов, ниже будут приведены наиболее удобные из них для веб разработки.

HTML & CSS

Верстка и написание стилей — это часто монотонная задача, поэтому вашу работу могут облегчить и ускорить следующие расширения:

• Auto Close Tag и Auto Rename Tag — простые и удобные расширения, для упрощения работы с версткой, имеют поддержку однофайловых компонентов Vue.
• CSS Peek — простое расширение, добавляющее возможность быстрого просмотра правила или навигации к нему.
• Color Info — позволяет просмотреть детальную информацию о цвете, имеет неплохой запас настроек.
• Color Highlight — добавляет отображение цветов в виде border, при обнаружении кодировки цвета в коде.
• IntelliSense for CSS class names in HTML — анализирует рабочее окружение, для добавления возможности автодополнения CSS классов.

JavaScript

Для работы с Vue существует не так много годных расширений, ниже несколько из наиболее полезных:

• Vetur — полный набор самых необходимых дополнений для работы с vue, таких как сниппеты, подсветка синтаксиса.
• Vue Peek — добавляет удобный переход к vue компонентам.

VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:

• GitLens — это наверное наиболее известное расширение для работы с git, которое добавляет множество возможностей просмотра git информации.
• Git History — добавляет возможность удобного просмотра истории изменений в git, имеет довольно удобный интерфейс.
• Git Indicators — простой индикатор git активности в нижнем трее VSCode.

Рабочее окружение и процесс разработки

Для продуктивной работы было бы неплохо иметь помощников в виде дополнений, подсвечивающих простые ошибки, советующие стиль написания и прочие удобные подсказки/действия. Попробуйте воспользоваться следующими расширениями:

• Bracket Pair Colorizer — добавляет полсветку для скобок, окружающих блоки кода, облегчает восприятие кода при глубокой вложенности, визуально разделяя код.
• Beautify — на мой взгляд наиболее удобное расширение для автоматической стилизации кода, подробнее с расширением можно ознакомиться по ссылке.
• Live Server — очень полезное расширение, которое позволяет быстро запустить свой лайв сервер, например для верстки.
• Import Cost — отличное расширение, которое отображает размер импортируемого модуля, позволяет более детально подбирать импортируемые куски модуля не прибегая к анализаторам бандлов.
• NPM Intellisense — автокомплит для npm модулей.
• Open in browser — простое расширение, добавляющее пункт открытия в браузере.
• Path Intellisense — автокомплит для имен файлов и их расположения.
• Settings Sync — после окночания установки необходимых инструментов и настройки окружения удобно сохранить конфиг, данное расширение позволит синхронизировать всё в git gist.
• Sort lines — простой способ организовать сортировку строк в коде по заданным условиям.
• TODO Highlight — простое расширение для подсветки ключевых слов типа TODO, FIXME.
• Trailing Spaces — подсвечивает лишние пробелы.
• VS Live Share — многие сталкивались с проблемой, когда приходится очень долго объяснять удаленному разработчкику, где и что не так, данное расширение упрощает жизнь в подобных ситуациях, позволяя делать живую демонстрацию, поддерживает работу нескольких пользователей, пробрасывает запущенное окружение машине клиента.
• Visual Studio IntelliCode — автоматизирует рутинные задачи для раработчиков на таких языках, как Python, TypeScript/JavaScript и Java.

Оформление редактора

Так же может быть интересно

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

Источник

Код VS с es6

Я получаю ошибку перебора в моем коде ‘import’ is only available in ES6 (use ‘esversion: 6’).

Все связанные с es6 вызовут ошибку. Не уверен, что мне нужно настроить, чтобы заставить его работать.

Добавьте файл с именем .jshintrc в свой проект, и внутри этого типа файла это:

Как вы можете видеть это здесь:

Полная документация по параметрам jshint находится здесь: http://jshint.com/docs/options

Редактировать: я добавил способ включить es6, если вы используете ESLint вместо JSHint, а также обновлять снимки экрана, поскольку VSCode изменился со времени моего первоначального ответа.

Метод JSHint:

Если вы используете JSHint, вы можете добавить следующее в свои настройки:

Метод ESLint:

Если вы используете ESLint, вы можете добавить следующее в свои настройки:

Как обновить настройки

1. Когда отобразятся настройки, вы увидите разделы настроек:

Обратите внимание, что есть два раздела, в которых вы можете настроить свои параметры: Настройки пользователя и Настройки рабочего пространства.

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

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

В моем случае, поскольку я знаю, что только некоторые из моих проектов могут использовать ES6, мне нужно иметь подсказку об ошибке, чтобы предупредить меня, если я использую ES6 мои не-ES6 проекты… поэтому я установил это только в мои настройки рабочего пространства

Но если вы знаете, что все, что вы кодируете в VS Code, будет ES6, спроектируйте, затем сохраните шаг и добавьте его в свои пользовательские настройки.

1. Нажмите либо Пользователь/Рабочая область в зависимости от ваших предпочтений. Ищите JSHint или ESLint (в зависимости от того, что вы используете). Нажмите на любую ссылку Изменить в файле settings.json, не имеет значения, какая из них.

1. Добавьте соответствующие настройки в зависимости от того, используете ли вы JSHint или ESLint:

JSHint

ESLint

Вы можете добавить «esversion»: 6 в jshint.options в пользовательских настройках.

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

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

Источник

Как установить и настроить JSHint

При написании JavaScript кода, новички неизбежно допускают ошибки и это нормально. Плагин JSHint как раз позволяет вовремя увидеть все допускаемые ошибки, когда вы пишите свой код в редакторе. На этом уроке мы рассмотрим как установить и настроить данный плагин для редактора VS Code.

Установка JSHint для VS Code

Для работы плагина JSHint, у вас уже должна быть установлена среда Node.js.

NPM это менеджер пакетов, входящий в состав Node.js. В веб-разработке уже существует много готовых решений: компиляторы, плагины и еще много всего полезного. С помощью пакетного менеджера можно быстро все эти полезности устанавливать и что немаловажно, находится они будут в одном месте на вашем компьютере.

Для установки плагина глобально, откройте вкладку «Терминал», введите команду npm install -g jshint и нажмите клавишу «ENTER». Вместо слова install, можно прописать сокращенное название«i».

Теперь проверим, как это все работает. Сделаем намеренно ошибки в коде. Например пропустим точку с запятой на конце. Плагин сразу подчеркивает проблемное место волнистой линией, а во вкладке терминала «Проблемы», сразу выводится сообщение. JSHint подсказывает, что на второй строчке нет точки с запятой.

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

Плагин JSHint очень полезный и удобный инструмент, который подскажет, где у вас проблема. Но есть одна особенность. О ней мы сейчас и поговорим. Дело в том, что после установки, плагин работает по стандартным настройкам. Зачастую «заводские» настройки ориентируются на старые форматы кода. Нас это совсем не устраивает, поэтому необходимо откорректировать настройки JSHint.

Настройка JSHint для VS Code

Создайте внутри проекта системный файл .jshintrc и пропишите внутри файла свои оптимальные настройки. Системные файлы могут не показываться, чтобы увидеть их, необходимо настроить показ скрытых файлов. Файл с настройками, находящийся внутри проекта будет влиять только на этот проект. Чтобы не копировать файл .jshintrc из проекта в проект, поместите его в общую папку с проектами.

Пример файла .jshintrc

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

< "camelcase" : true, // Названия переменных в camelCase стиле
«undef» : true, // Все не глобальные переменные должны быть объявлены до их использования.
«quotmark» : true, // Согласованность стиля кавычек
«maxlen» : 120, // Максимальная длина строки
«trailing» : true, // Запрещены пробелы на концах.
«curly» : true, // Фигурные кавычки обязательны для каждого нового блока или области.
«strict» : true, // Обязательно строгое использование.
«browser» : true, // Стандартный браузер `window`, `document`.
«devel» : true, // Разрешена панель разработчика `console.log();`.
«jquery» : true, // Опция определяет глобальные переменные, предоставляемые библиотекой jQuery.
«esversion» : 8, // Включить функции, представленные в ECMAScript 8.
«node» : true // Определяет доступные глобальные переменные.
>

В этом уроке мы научились работать с одним из самых полезных инструментов для Front-End разработчика. JSHint будет в автоматическом режиме указывать на недочеты и ошибки в нашем коде. Теперь никакие синтаксические ошибки, опечатки и прочие мелочи не испортят ваш код!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник