Flow и Styled Components были недавно рекомендованы мне как вещи, которые мне нужно использовать прямо сейчас в мире React. Но, к сожалению, это был не простой npm install
, и у меня возникли некоторые проблемы с тем, чтобы стилизованные компоненты (1.4.5) и Flow (0.45.0) работали в Windows с помощью Visual Studio Code.
Шаг / Проблема / Исправление 1
Я установил пакет flow-typed, но по-прежнему получаю следующие ошибки:
node_modules/styled-components/dangerfile.js import { danger, warn, fail, message } from 'danger' ^^^^^^^^ danger. Required module not found node_modules/styled-components/lib/models/InlineStyle.js.flow import { StyleSheet } from 'react-native' ^^^^^^^^^^^^^^ react-native. Required module not found node_modules/styled-components/lib/models/StyleSheet.js.flow get injected(): boolean { ^ Potentially unsafe get/set usage. Getters and setters with side effects are potentially unsafe and disabled by default. You may opt-in to using them anyway by putting `unsafe.enable_getters_and_setters=true` into the [options] section of your .flowconfig. node_modules/styled-components/lib/native/index.js.flow import reactNative from 'react-native' ^^^^^^^^^^^^^^ react-native. Required module not found node_modules/styled-components/src/models/InlineStyle.js:3 import { StyleSheet } from 'react-native' ^^^^^^^^^^^^^^ react-native. Required module not found node_modules/styled-components/src/test/utils.js import expect from 'expect' ^^^^^^^^ expect. Required module not found
Одно из решений - просто игнорировать все из стилизованных компонентов:
[ignore] .*/node_modules/styled-components/.*
Но похоже, что это в первую очередь лишает смысла использование Flow. Приведенный ниже .flowconfig
, похоже, работает нормально:
[ignore] #no point including this as the lib folder is our main one .*/node_modules/styled-components/src/.* [include] [libs] node_modules/styled-components/flow-typed/danger_v0.x.x.js node_modules/styled-components/flow-typed/react-native.js [options] unsafe.enable_getters_and_setters=true
Шаг / Проблема / Исправление 2
Отчеты потока «Ошибок нет!» но вы знаете, что ошибки точно есть.
//FILE: app.js // @flow import React from 'react'; import { Button, Card } from '../components'; const b = <Button/>; //FILE: components/index.js //Note that this doesn't have a flow declaration! import Button from './button'; import Card from './card'; export { Button, Card }; //FILE: components/button/index.js // @flow import React from 'react'; const Button = (props: { foo: string }) => { return <div>{props.foo}</div> }; export default Button;
В приведенном выше сценарии у меня есть 3 файла:
app.js
основное приложение, которое использует<Button/>
компонент и должно иметь ошибку о том, чтоfoo
опора не предоставленаcomponents/index.js
отдельный «вспомогательный» модуль, так что все компоненты могут быть импортированы в одной строке как именованные импорты.components/button/index.js
компонент кнопки
Вероятно, это ошибка новичка. Поскольку components/index.js
в начале файла не было // @flow
, похоже, это означает, что Flow не будет в конечном итоге распространять объявления от кнопки вверх в основное приложение. Возможно, это случай утечки, о котором предупреждает документация.
Таким образом, исправление состоит в том, чтобы гарантировать, что каждый файл в вашем проекте начинается с // @flow
, или, в качестве альтернативы, используйте параметр конфигурации все.
Шаг / Проблема / Исправление 3
Чтобы заставить Flow работать в Visual Studio Code, нужно было не просто установить расширение.
Рекомендовать плагин VS Code Flow Language Support (0.6.0), похоже, не поддерживает функциональные компоненты без сохранения состояния. Альтернативный вариант vscode-flow-ide, кажется, работает намного лучше, но все же требует некоторой настройки.
Он предназначен для работы с Flow, установленным глобально или локально, но в обоих случаях у меня все еще возникает ошибка о том, что он не может найти Flow:
[Flow] Невозможно найти поток в PATH. Попробуйте установить его с помощью npm install flow-bin -g
Вы также можете получить следующую ошибку для аннотированных типов Flow:
[js] "типы" можно использовать только в файле .ts.
Чтобы исправить это, добавьте в файл VS Code settings.json
следующее:
"flowide.pathToFlow": "flow", "javascript.validate.enable": false
Немного странно, что pathToFlow
на самом деле не путь, но он работает. Отключение проверки JavaScript также кажется немного странным, но, похоже, это не имеет значения, поскольку я использую ESLint, который по-прежнему выделяет синтаксические ошибки в VS Code.
Шаг / Проблема / Исправление 4
При запуске из командной строки я довольно часто получаю следующий результат:
[0KОшибок нет! Сервер не отвечает (осталось 3 попытки): [обработка] |] \
Он говорит, что ошибок нет, но явно не работает, потому что по какой-то причине не может связаться с сервером. На самом деле это должно быть не с ошибкой «ОК, нет ошибок!» сообщение, также обратите внимание, что текст испорчен и перезаписывается.
Кажется, исправление состоит в том, чтобы снова запустить команду ...
Заключение
Мой опыт работы с Flow в Windows с выбранными мной инструментами не был особенно приятным. Некоторые из проблем были на этой стороне клавиатуры, а некоторые будут решены, когда она (и ее инструменты) созреют. Очевидно, что Flow - популярный и мощный инструмент, но сейчас моя первая реакция заключается в том, что у меня не было такого количества проблем с использованием TypeScript 3 года назад, поэтому, если бы я действительно хотел использовать «JavaScript со статическими типами» прямо сейчас, я бы вероятно, просто используйте TypeScript ... но это отношение может быстро измениться, когда я теперь готов к работе!