[译] 使用 VS Code 加速前端开发

原文：Supercharging Frontend Development with VS Code
做者：zachcodes

---

过去几天，为了在开发 GraphQL / React 应用时能得到一个更好的工做体验，我开始使用 Visual Studio Code 和 TypeScript 。在对比我最近几个月所用的开发工具后，我发现了一些惊人的东西。若是你将全部的开发工做切换到 VS Code ，在保存文件以前，你会被捕获的错误提示数量震撼！

ESLint + GraphQL!

这是我开发生涯遇到的最大的黑科技。永远不中止使用 GraphQL 。感谢 apollo-codegen ，您能够从 GraphQL schema 生成客户端的 types ！看起来像这样：

//  这个文件是自动生成的，不该该被编辑

export type announcementsQuery = {
  // Daily announcements
  announcements: Array<{
    title: string;
  } | null> | null;
};
/* tslint:enable */

它只会生成实际使用的查询的 types ，而不会生成前端未使用的 types 。

好像那还不够酷炫，咱们能够进一步。使用graphql模式转储，咱们能够在使用 eslint-plugin-graphql 提示编写 graphql 查询时的 eslint 错误。当你在查询中输入字段时，会发生这种状况！

类型

正如上一个例子中提到的，静态类型很是的棒。这里不罗列 TypeScript 全部的功能，只给你展现实施所需的3步及它如何有用。

1. 将  .js 文件重命名为 .tsx    
2. 添加一些 interfaces   
3. 使用这些 interfaces

这里有一个例子：

interface MessageProps {
  name: string;
}

export default ({ name }: MessageProps) => (
  <p className={styles.container}>
    Say hello to <Link to="/about/zach">{name}</Link>
  </p>
);

如今任什么时候候我导入这个组件，若是我不传入 name ，或者 name 不是一个字符串，或者经过其余 props ，都会收到一个错误。若是你用了
props ，在很长一段时间以后重构代码，或者有新的开发者进入，这将很是有用。VS Code 还容许您从任何地方右键单击并查看类型定义。我最喜欢的其余功能是在 TypeScript 配置中启用 noUnusedLocals
和 noUnusedParameters 。 VS Code 将警告未使用的代码。

预检查

使用 prettier， eslint，和 jest 很是有用。有时一个团队成员会对个人应用作一个小小的贡献，但没有和我同样的开发工具。当它们提交时，代码仍然会被格式化并检查是否出现了 linting 错误。这就是我如何作到的。
把它添加到你的 package.json

"lint-staged": {
    "*.test.tsx": [
      "jest"
    ],
    "*.{js,tsx,ts}": [
      "prettier --single-quote --trailing-comma es5 --write",
      "eslint",
      "git add"
    ]
  },

而后执行：

npm install lint-staged husky --save-dev

就是这样，当相应的 types 文件被提交时，这些东西就会运行。若是产生失败，它不会让你提交 commit 。

调试设置

VS代码有一个很是酷的启动配置，让你经过按下按钮启动应用程序。再也不须要使用 npm start 开启服务器，建立应用程序，并打开浏览器。咱们能够把全部这一切放到一个文件中，并经过一个按钮按下来启动它。除此以外，咱们能够在编辑器中设置断点，任何控制台错误将直接跳到咱们的代码中，并显示错误！这是一个我使用的示例配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/webpack-dev-server",
      "args": ["--hot", "--inline", "--config", "config/dev.config.js"],
      "outFiles": ["${workspaceRoot}/build/*"],
      "stopOnEntry": false,
      "cwd": "${workspaceRoot}",
      "env": {
        "NODE_ENV": "development"
      },
      "console": "internalConsole",
      "sourceMaps": true
    },
    {
      "name": "Browser",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}/"
    }
  ],
  "compounds": [
    {
      "name": "Server/Browser",
      "configurations": ["Server", "Browser"]
    }
  ]
}

若是你像我同样使用 webpack ，请确保devtool: 'eval-source-map'在你的配置中。若是您使用 sourcemap chart 中的任何内容，断点将不起做用，堆栈跟踪将转到代码中错误的位置。

添加启动配置（在 这里 阅读更多的功能）只需打开调试器选项卡并点击开始！

结论

想象一个新的开发人员加入你的团队。你如今有这么多很棒的东西，他们能够当即启动和运行。下载 VS Code ，点击启动调试器，应用程序当即运行。想要更改显示的一些数据？让他们编辑一个 GraphQL query ，会当即被告知该变量是否在 GraphQL schema 中。让他们使用你为列表项制做的 React 组件，他们能够将鼠标悬停在组件上，看看它须要什么 props 。尝试使用别的东西，当即出现错误。如今他们已经准备好提交 commit 了....它是否破坏了有些东西？在 commit 前，会进行 linting 检测和自动化测试！我但愿这篇文章帮到一些人。