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 ... но это отношение может быстро измениться, когда я теперь готов к работе!