时间戳

首页 > 解决方案 > 在 VSCode 中获得适当的 Linting 流的推荐方法？

visual-studio-code - 在 VSCode 中获得适当的 Linting 流的推荐方法？

问题描述

我在这里阅读了很多关于如何设置 VSCode 以允许在// @flow文件顶部启用 Javascript 文件的 linting 的讨论。

我相信我已经正确地实施了一些事情，但仍然遇到一些似乎表明其他情况的神秘错误。

例如，我在这里得到Missing type annotation for destructuring.Flow(InferError)一个classes：

const AddCustomer = ({ classes }) => {

所以我把它改成这样：

const AddCustomer = ({ classes:any }) => {

但错误仍然存​​在。

这是对目前在我的 VSCode 中工作方式的另一个观察：

export const useFetch = (initialUrl, initialData) => {

使用此代码，我收到未键入两个参数的警告。所以我把代码改成这样：

export const useFetch = (initialUrl:string, initialData:any) => {

没有立即发生，但是当我保存文件时，警告就消失了。不是什么大问题，但这不是我期望 linter 工作的方式。

@flow可能有人对为什么linting 在我的 VSCode 中不能正常工作有任何想法吗？

标签： visual-studio-codeflowtype

解决方案

因此，对于关于 的第一个问题Missing type annotation for destructuring.Flow(InferError)，我认为类型放置在错误的位置。语法({ classes: any })是将classes第一个参数上的属性重命名为any. 更详尽的解释可以在 MDN 的页面Destructuring assignment中阅读。要正确指定对象参数的类型，您需要将类型定义放在对象之后

const addCustomer = ({ classes }: { classes: any }) => { ... };

这可能会让人觉得冗长和重复，但其想法是将代码与类型分开。例如，客户的类型定义可能是从另一个文件中导入的，因此代码看起来更像

// types.js
export type Customer = { classes: any };

// index.js
import type { Customer } from './types';

const addCustomer = ({ classes }: Customer) => { ... };

这允许以任何方式指定参数（例如，不进行解构）和以任何方式指定类型。

对于您的第二个问题，请检查以确保设置flow.runOnEdit设置为true. 这将允许 Flow 在不保存的情况下检查您的文件。如果这似乎不能解决问题，那么我会向 VSCode 扩展的维护者提出问题。

推荐阅读