vs 代码 - 使用 es6 自定义 jsx 智能感知

Question

我有一个小型内部库，想为将要使用 JSX 的用户创建智能感知。

基本上，我希望用户开始写作并拥有他需要在自动完成中添加的可用属性。

类型脚本具有允许它显示智能感知的接口和模型。 我正在寻找相同的（即使我需要付出一些努力）

我正在使用 es6 和最新的 vs 代码。

代码并不是特别相关（可以是任何反应代码），但如果有人会给我指导/修改，就在这里。

代码示例：

class Button extends React.Component{
    constructor(props){
    super(props);
  }
  handleClick = () => {
    this.props.onClickFunction(this.props.IncrementValue);
  }
    render(){
    return (
        <button onClick={this.handleClick}>{this.props.IncrementValue}</button>
    )
  }
}
const Result = (props) => {
    return (
    <div>{props.counter}</div>
  );
};
class App extends React.Component{
    state = {counter: 0};

  incrementCounter = (IncrementValue) => {
    this.setState((prevState)=>({
        counter: prevState.counter + IncrementValue
    }));
  };

    render(){
    return(
        <div>
          <Button IncrementValue={1} onClickFunction={this.incrementCounter} />
        <Button IncrementValue={5} onClickFunction={this.incrementCounter} />
          <Button IncrementValue={10} onClickFunction={this.incrementCounter} />
          <Button IncrementValue={100} onClickFunction={this.incrementCounter} />
        <Result counter={this.state.counter} />
        </div>
    )
  }

}

ReactDOM.render(<App />, mountNode);

Answer 1

打开你的 VS Code workspace settings，然后在 settings.json 中添加以下内容。

{
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "editor.formatOnSave": true
}

这将使 VS Code 能够使用特定配置/自动完成功能来处理 React 项目下的每个 js/jsx 文件。 这也将启用保存时的默认代码格式。

希望这会有所帮助！