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

keithxiaoy 发布于2019-08-21 16:57 / 751人阅读

摘要：在对比我最近几个月所用的开发工具后，我发现了一些惊人的东西。永远不停止使用。将警告未使用的代码。预检查使用，，和非常有用。不再需要使用开启服务器，创建应用程序，并打开浏览器。尝试使用别的东西，立即出现错误。

原文：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) => (
  
    Say hello to {name}
  
);

现在任何时候我导入这个组件，如果我不传入 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 检测和自动化测试！我希望这篇文章帮到一些人。

云服务器服务器托管 VS Code如何前端中如何使用cdn加速 VS Code 可以在浏览器运行了？微软 vs2005开发版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88945.html

[译] 帮你高效使用 VS Code 的秘诀

摘要：当你处于文件管理器中，你可以像在的中那样用相同的快捷键进行常规操作，比如用方向键导航用键给文件或文件夹重命名用打开当前文件等。原文地址：Tips to use VSCode more efficiently 原文作者：sudolabs 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Baddyo 校对者：xionglong58, hzdaqo ...

cgspine 2019-05-23 17:35 评论0 收藏0
[译] 唯快不破：Web 应用的 13 个优化步骤

摘要：译文地址译唯快不破应用的个优化步骤前端的逆袭知乎专栏原文地址时过境迁，应用比以往任何时候都更具交互性。使用负载均衡方案我们在之前讨论缓存的时候简要提到了内容分发网络。换句话说，元素的串形访问会削弱负载均衡器以最佳形式欢迎关注知乎专栏 —— 前端的逆袭欢迎关注我的博客，知乎，GitHub。译文地址：【译】唯快不破：Web 应用的 13 个优化步骤 - 前端的逆袭 - 知乎专栏原文地...

haobowd 2019-08-19 18:37 评论0 收藏0
2017-07-22 前端日报

摘要：前端日报精选任何网站都可以变成但我们需要做得更好译高性能个新工具加速你的应用在生产环境中使用记录日志手把手教你用开发一个发布中文译继承实例译基于背后的合理化，而非设计掘金实现哪家强中的众成翻译快速入门个人文章一个基于区块链的深网 2017-07-22 前端日报精选任何网站都可以变成 PWA —— 但我们需要做得更好[译] 高性能 React：3 个新工具加速你的应用在生产环境中使用...

endless_road 2019-08-20 18:14 评论0 收藏0
正则表达式

摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

yibinnn 2019-08-21 17:57 评论0 收藏0
2017-08-20 前端日报

摘要：前端日报精选数组所有全解密原生实现最简单的图片懒加载译如何抓取数据中种常见的内存泄露陷阱内部原理，第一部分基础渲染前端国际化中文深入理解笔记模块掘金译热的冷的掘金模块，桌面端的支付请求，和迷津欲有问遮罩层状态丢失及解决方案全 2017-08-20 前端日报精选 JavaScript数组所有API全解密原生JS实现最简单的图片懒加载【译】React如何抓取数据JavaScript 中 ...

molyzzx 2019-08-21 12:02 评论0 收藏0