[译]使用VSCode加速前端开发

原文&＃xff1a;Supercharging Frontend Development with VS Code
作者&＃xff1a;zachcodes

过去几天&＃xff0c;为了在开发 GraphQL / React 应用时能获得一个更好的工作体验&＃xff0c;我开始使用 Visual Studio Code 和 TypeScript 。在对比我最近几个月所用的开发工具后&＃xff0c;我发现了一些惊人的东西。如果你将所有的开发工作切换到 VS Code &＃xff0c;在保存文件之前&＃xff0c;你会被捕获的错误提示数量震撼&＃xff01;

ESLint &＃43; GraphQL!

这是我开发生涯遇到的最大的黑科技。永远不停止使用 GraphQL 。感谢 apollo-codegen &＃xff0c;您可以从 GraphQL schema 生成客户端的 types &＃xff01;看起来像这样&＃xff1a;

// 这个文件是自动生成的&＃xff0c;不应该被编辑export type announcementsQuery &＃61; {// Daily announcementsannouncements: Array<{title: string;} | null> | null; }; /* tslint:enable */

它只会生成实际使用的查询的 types &＃xff0c;而不会生成前端未使用的 types 。

好像那还不够酷炫&＃xff0c;我们可以进一步。使用graphql模式转储&＃xff0c;我们可以在使用 eslint-plugin-graphql 提示编写 graphql 查询时的 eslint 错误。当你在查询中输入字段时&＃xff0c;会发生这种情况&＃xff01;

类型

正如上一个例子中提到的&＃xff0c;静态类型非常的棒。这里不罗列 TypeScript 所有的功能&＃xff0c;只给你展示实施所需的3步及它如何有用。

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

这里有一个例子&＃xff1a;

interface MessageProps {name: string; }export default ({ name }: MessageProps) &＃61;> (

Say hello to {name}

);

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

预检查

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

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

然后执行&＃xff1a;

npm install lint-staged husky --save-dev

就是这样&＃xff0c;当相应的 types 文件被提交时&＃xff0c;这些东西就会运行。如果产生失败&＃xff0c;它不会让你提交 commit 。

调试设置

VS代码有一个非常酷的启动配置&＃xff0c;让你通过按下按钮启动应用程序。不再需要使用 npm start 开启服务器&＃xff0c;创建应用程序&＃xff0c;并打开浏览器。我们可以把所有这一切放到一个文件中&＃xff0c;并通过一个按钮按下来启动它。除此之外&＃xff0c;我们可以在编辑器中设置断点&＃xff0c;任何控制台错误将直接跳到我们的代码中&＃xff0c;并显示错误&＃xff01;这是一个我使用的示例配置&＃xff1a;

{"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 &＃xff0c;请确保devtool: &＃39;eval-source-map&＃39;在你的配置中。如果您使用 sourcemap chart 中的任何内容&＃xff0c;断点将不起作用&＃xff0c;堆栈跟踪将转到代码中错误的位置。

添加启动配置&＃xff08;在这里的功能&＃xff09;只需打开调试器选项卡并点击开始&＃xff01;

结论

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