/ поток для vscode

Это расширение добавляет поддержку Flow для VS Code. Flow — это средство проверки статического типа, предназначенное для поиска ошибок типа в программах JavaScript. Следуйте официальному руководству, чтобы начать работу.

Хочу помочь сделать Flow в VS Code действительно сияющим? Если это вы, то вы можете легко подготовиться к разработке.

Установка

Найдите «Flow Language Support» на панели расширений VS Code или установите через marketplace.

Настройка

  • Убедитесь, что в вашем проекте есть файл .flowconfig .
  • Убедитесь, что вы можете запустить команду flow из командной строки (или см. Конфигурация, чтобы настроить команду или использовать упакованный поток NPM).
  • Установите для параметра javascript.validate.enable значение false или полностью отключите встроенное расширение TypeScript для ваш проект (см. gif ниже):

Конфигурация

Вы можете указать конфигурацию, изменив файл VS Code settings.json . Доступ к нему через Настройки → Настройки. Вы должны перезагрузить VS Code после установки этого расширения, чтобы эти настройки вступили в силу.

  • flow.useNPMPackagedFlow (по умолчанию: true) позволяет использовать поток из ваших node_modules для VSCode. Предупреждение : установка значения true представляет угрозу безопасности. Когда вы открываете проект, мы немедленно запускаем содержащийся в нем код.

    Примечание: плагин будет искать node_modules в flowconfigDir и корень workspaceFolder

  • flow.pathToFlow (по умолчанию: ‘flow’) Абсолютный путь к двоичному потоку.

     {//Вы можете использовать $ {workspaceFolder}, он будет заменен на путь workspaceFolder "flow.pathToFlow  ":" $ {workspaceFolder}/node_modules/.bin/flow "//Вы также можете использовать var $ {flowconfigDir}, он будет заменен на путь flowconfigDir" flow.pathToFlow ":" $ {flowconfigDir}/node_modules/.bin/ flow "//или использовать абсолютный путь" flow.pathToFlow ":"/home/test/some_path/flow "} 

    Примечание : Путь нормализован, и при необходимости добавляется «.cmd».

  • flow.useBundledFlow (по умолчанию: true) возврат к потоку в комплекте с этим плагином, если ничего не работает.

  • flow.showUncovered (по умолчанию: false) Если true , по умолчанию будет отображаться непокрытый код. Вы также можете переключить его позже, используя команду или щелкнув виджет строки состояния.

  • flow.coverageSeverity (по умолчанию: ‘ info ‘): тип серьезности диагностики покрытия.

    Примечание. Поддерживается только при использовании LSP: true.

  • flow.lazyMode (по умолчанию: null): для поддержки потока lazyMode

    Примечание: Поддерживается только при использовании LSP: true.

  • flow.stopFlowOnExit (по умолчанию: true) остановить сервер потока при выходе из проекта.

  • flow.useCodeSnippetOnFunctionSuggest (по умолчанию: true) Завершите функции с их сигнатурой параметров.

  • flow.runOnEdit (по умолчанию: true) Если true будет запускать поток при каждом редактировании, в противном случае будет выполняться только при сохранении изменений.

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

  • flow.showStatus (по умолчанию: true) Если true отобразит счетчик в строке состояния, пока поток проверяет тип.

    Примечание. Не поддерживается, если useLSP: true. В режиме lsp вы можете использовать виджет строки состояния для просмотра статуса.

  • flow.runOnAllFiles (по умолчанию : false) Запустить Flow для всех файлов, не нужно помещать //комментарий @ flow поверх файлов.

    Примечание. Не поддерживается, если useLSP: true. Вы можете использовать опцию flowconfig all.

  • flow.useLSP (по умолчанию: true) Выключите, чтобы переключить от официальной реализации Flow Language Server к прямой связи с потоком.

    Примечание : для useLSP: true требуется flow> = 0,75

  • flow.enabled (по умолчанию: true) вы можете отключить поток для некоторых Например, Project.

Возможности

  • Поддерживает несколько многокорневых рабочих пространств flowconfig и vscode (требуется useLSP: true )
  • IntelliSense
  • Перейти к определению/просмотреть определение
  • Диагностика (ошибки, предупреждения)
  • Информация о типе наведения
  • Переименовать (обязательно useLSP: true )
  • Код с возможностью переключения Отчеты об охвате

Команды

  • Переключить отображение непокрытых областей : Показать | скрыть непокрытое покрытие области.
  • Перезапустить клиент : перезапускать клиент потока.
  • Показать статус клиента : показать текущий статус клиента.
  • Регистрировать информацию об отладке клиента : регистрировать отладочную информацию клиента на панели вывода.
  • Показать выходной канал : открывает панель вывода плагина.

Известные проблемы

  • Если у вас проблемы с синтаксисом выделение попробуйте Babel Javascript.

Конфигурация отладчика

Сначала следуйте инструкциям по настройке файла конфигурации запуска, launch.json код>.

Чтобы использовать flow-remove-types:

  • Следуйте инструкциям по быстрому запуску flow-remove-type.
  • В launch.json добавьте "runtimeArgs": ["-r", "flow-remove-types/register"] в конфигурацию «запуска» .

Чтобы использовать Babel:

  • Следуйте инструкциям по быстрому запуску Babel.
  • Установите babel- зарегистрируйтесь.
  • В .babelrc добавьте "keepLines": true .
  • В launch.json , добавьте "runtimeArgs": ["-r", "babel-register"] в конфигурацию «запуска».

О

  • Режим Lsp построен с использованием flow lsp (реализация официального языка-сервера-протокола потока)
  • Режим Non lsp построен на основе поддержки Nuclide Flow.

Содействие

  • пожалуйста см. CONTRIBUTING.md

Соавторы

Этот проект существует благодаря всем людям, которые вносят свой вклад. [Внести вклад].

Поддерживающие

Спасибо всем нашим спонсорам ! 🙏 [Станьте спонсором]

Спонсоры

Поддержите этот проект, став спонсором. Здесь будет отображаться ваш логотип со ссылкой на ваш сайт. [Стать спонсором]

Лицензия

См. здесь



11 замечательных расширений JavaScript для кода Visual Studio

O Одна из самых впечатляющих частей Visual Studio Code — это возможность настройки, особенно с помощью расширений. Я не буду описывать специфические расширения фреймворка, но вот некоторые из лучших расширений в VS Code для написания JavaScript.

Изучите код Visual Studio, чтобы узнать все, что вам нужно знать о самом популярном редакторе в веб-разработке, всего за 10 долларов!

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Расширения сниппетов — одна из самых популярных категорий расширений, и это следует за ними. Оно включает в себя сниппеты для современного ES6 JavaScript , а именно вам следует писать (или учиться, если вы еще этого не сделали). Хотя этот фрагмент не относится к какой-либо платформе, эти фрагменты можно запускать из нескольких разных типов файлов.

  • JavaScript (.js)

  • TypeScript (.ts)

  • JavaScript React (.jsx)

  • TypeScript React (.tsx)

  • Html (.html)

  • Vue (.vue)

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

  • imp — импортируйте модуль
  • imd — импортировать именованный экспорт.
  • fre — генерировать для каждого цикла через массив
  • anfn — сгенерировать анонимную функцию.
  • thenc — добавить затем и поймать объявление в профи mise

Есть много других, так что попробуйте!

https://marketplace.visualstudio.com/items?itemName=WallabyJs .quokka-vscode

Вы когда-нибудь хотели протестировать функцию или поиграть с кодом JavaScript? Иногда вы можете протестировать прямо в консоли Chrome Dev Tools, иногда вы открываете CodePen. С Quokka.js вы можете создать блокнот прямо внутри VS Code!

Быстро и легко протестируйте свой JavaScript с помощью Quokka.js.

https://marketplace .visualstudio.com/items? itemName = esbenp.prettier-vscode

Самоуверенный форматировщик кода, который может автоматически форматировать ваш код JavaScript. Установив Prettier, вам больше не придется беспокоиться о форматировании; просто позвольте компьютеру позаботиться об этом!

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

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Хотя console.log () имеет свое место, оно не самое лучшее способ отладки. В Chrome есть встроенные инструменты отладки, но знаете ли вы, что с помощью этого расширения также можно выполнять отладку непосредственно в VS Code ?

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

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

https://marketplace.visualstudio.com/items?itemName = dbaeumer.vscode-eslint

С таким большим количеством удивительные инструменты, вы не должны беспокоиться о форматировании вашего кода. ESLint — один из многих, которые могут auto форматировать ваш код (при сохранении, если вы выберете). Кроме того, линтинговый аспект может «кричать» на вас (из-за отсутствия лучшего слова), чтобы побудить или потребовать следовать определенным рекомендациям.

ESLint или TSLint (для TypeScript) часто настраиваются с большим количеством стартеров проекты, поэтому вам, возможно, даже не придется настраивать его самостоятельно. Просто создав новый проект и открыв его в VS Code, вы получите всю необходимую помощь для написания последовательного кода!

https://marketplace.visualstudio.com/items?itemName = wix.vscode-import-cost

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

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

При попытке сослаться на файл в рабочей области может быть сложно запомнить точные пути и имена файлов. Я стараюсь держать панель меню в VS Code закрытой большую часть времени (чтобы максимально увеличить объем кода), поэтому я ненавижу открывать проводник файлов, чтобы дважды проверить, где находится файл. Вот тут и пригодится Path Intellisense!

Это расширение предоставит вам intellisense при ссылке на пути к файлам . Все, что вам нужно, это начать вводить путь внутри кавычек, и вы получите intellisense для имен папок и файлов.

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode -npm-source

Щелкните свой require или import в вашем коде и щелкните прямо до репозитория GitHub.

Очень полезно, если вы хотите перейти на GitHub, чтобы просмотреть исходный код или просмотреть документы/проблемы.

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

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

Это расширение предоставит комментарии с цветовой кодировкой для решения всех вышеперечисленных проблем. Вот список доступных цветовых кодов.

  • Предупреждения
  • Запросы
  • TODOs
  • Основные

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Вы когда-нибудь заходили импортировать пакет и точно забыли, как его имя? Ну не более того! Это расширение будет предоставлять пакет intellisense при импорте на основе установленных пакетов NPM.

https://marketplace.visualstudio.com/items?itemName= WallabyJs.wallaby-vscode

Запускайте тесты как вы кодируете! От людей, которые принесли нам Quokka.js, вот отличный инструмент для ускорения разработки.

Есть еще какие-нибудь замечательные расширения JavaScript? Дайте нам знать в комментариях, и мы добавим это в этот пост как дополнительные упоминания .

Спасибо за внимание!

Нравится эта статья? Подпишитесь на @jamesqquick в Twitter

Оцените статью
clickpad.ru
Добавить комментарий