27个适用于JavaScript开发人员的神奇的VSCode工具-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

Visual Studio Code（也称为VSCode）是一种轻量级但功能强大的跨平台源代码编辑器, 借助对TypeScript 和Chrome调试器等开发工具的内置支持，越来越多的开发都都喜欢使用它。

如果你正在寻找更多的好用的 VSCode 工具，那么这篇或许能够帮助你。以下是 2019年为 JS 开发者提供的27个不可思议的VSCode工具。

1. Project Snippets (代码片段)

project snippets，这是我最喜欢的一个工具，它来自于 VSCode 中内置的原始用户代码片段。该特性允许你创建自己的代码段，以便在整个项目中重用。

但是**“重用”**它们到底意味着什么？

如果咱们经常要重复写下面这样的样板文件：

import { useReducer } from 'react'
 
const initialState = {
  //
}
 
const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}
 
const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}
 
export default useSomeHook

实际上，咱们可以直接将上面的代码放到的用户代码片段中，因此不必写出(或复制和粘贴)整个代码片段，只需键入一个自定义前缀来生成配置的代码片段即可。

打开 VsCode，然后选择 文件 >首选项 > 用户代码片段，则可以选择通过单击 '新建全局代码片段文件'来创建新的全局代码片段。

例如，要为 TypeScript React 项目创建自己的代码片段文件，可以单击新建全局代码片段文件，输入 typescriptreact.json。它将引导咱们访问一个新创建的.json文件，可以使用该文件来构建使用TypeScript 的 React 应用程序。

例如，要从上面的代码示例创建一个用户片段，可以这样做:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

有了它，咱们可以创建一个以.tsx结尾的新TypeScript文件，在新创建的文件输入rsr，然后按回车或 tab 键 VSCode 就会帮咱们生成代码片段内容。

const initialState = {
  //
}
 
const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

全局用户代码片段的问题是，它将贯穿咱们所有项目(在某些情况下，这对于一般的代码片段来说是非常强大的)。

一些项目将以不同的方式配置，当需要区分特定的用例时，用于配置代码片段的全局文件就成了一个问题。

例如，当每个项目的项目结构不同时

阅读剩余部分

27个适用于JavaScript开发人员的神奇的VSCode工具

相关推荐

评论