如何更快地使用 VS Code 编写 Javascript 和 React！

总结

这篇文章最初于 2020 年 7 月 9 日发布在codepulse.blog上。

如果您使用 VS Code 编写 Javascript 或 React 代码，请继续阅读！

VS Code 是我最喜欢的代码编辑器，我主要用它来编写 Javascript 和 React 代码。

由于我经常使用它，我学到了一些让我作为 JavaScript 和 React 开发者的生活更轻松的东西。其中之一就是代码片段！

另请参阅：Visual Studio Code 的十大键盘快捷键

代码片段非常棒，因为它们使我不必一遍又一遍地编写相同的样板代码，例如在创建 React 组件或定义 for 循环时。

您只需输入要生成的代码的前缀，然后按 Enter 键，您就可以立即获得代码！

在下面的视频中，我将向您展示如何在几分钟内开始使用 Visual Studio Code 编写 React 和 Javascript 代码片段！我还会分享一些我每天最喜欢和最常用的代码片段。

如果您想阅读，这里有一个简短的视频摘要。（我仍然建议您观看该视频，如果您喜欢它，也请订阅我的 YouTube 频道，我将不胜感激！）。

在 VS Code 中，你可以创建自己的代码片段。但这不是必需的，因为你还可以安装一个提供所需代码片段的扩展。

Javascrit 和 React 代码片段有一个很棒的扩展，称为VS Code ES7 React/Redux/React-Native/JS 片段，您可以从 Visual Studio Code 中的扩展选项卡安装它。

安装扩展程序后，您可以立即开始使用代码片段！代码片段可以与扩展程序页面中列出的前缀一起使用。您只需在正在编辑的文件中输入前缀，enter然后按下，代码片段就会自动生成。

以下是我最喜欢的几个片段：

鳍

for(let itemName in objectName { }

nfn

const functionName = (params) => { }

clg

console.log(object)

伊姆里

import React from 'react'

伊姆雷克

import React, { Component } from 'react'

干扰率

import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'

清洁发展机制

componentDidMount = () => { }

循环更新

componentDidUpdate = (prevProps, prevState) => { }

碾压混凝土

import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

远程控制协议

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

rcredux

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

总结

代码片段确实可以节省击键次数，这样也可以节省您的时间，并且您可以更快、更高效地编写代码。

你在用代码片段吗？在下面评论你最喜欢的代码片段！

附言：如果您是 React 新手或刚刚开始使用它，您应该查看我在 Skillshare 上的React 基础课程。现在您可以通过此链接注册 Skillshare 免费获取该课程。

文章来源：https://dev.to/tumee/how-to-write-javascript-and-react-with-vs-code-faster-3jnk

如何使用 VS Code 更快地编写 JavaScript 和 React！总结