原文：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步及它如何有用。
-
将 .js 文件重命名为 .tsx
-
添加一些 interfaces
-
使用这些 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
},
{
