[譯] 使用 VS Code 加速前端開發(fā)

keithxiaoy 發(fā)布于2019-08-21 16:57 / 915人閱讀

摘要：在對比我最近幾個(gè)月所用的開發(fā)工具后，我發(fā)現(xiàn)了一些驚人的東西。永遠(yuǎn)不停止使用。將警告未使用的代碼。預(yù)檢查使用，，和非常有用。不再需要使用開啟服務(wù)器，創(chuàng)建應(yīng)用程序，并打開瀏覽器。嘗試使用別的東西，立即出現(xiàn)錯(cuò)誤。

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

過去幾天，為了在開發(fā) GraphQL / React 應(yīng)用時(shí)能獲得一個(gè)更好的工作體驗(yàn)，我開始使用 Visual Studio Code 和 TypeScript 。在對比我最近幾個(gè)月所用的開發(fā)工具后，我發(fā)現(xiàn)了一些驚人的東西。如果你將所有的開發(fā)工作切換到 VS Code ，在保存文件之前，你會(huì)被捕獲的錯(cuò)誤提示數(shù)量震撼！

ESLint + GraphQL!

這是我開發(fā)生涯遇到的最大的黑科技。永遠(yuǎn)不停止使用 GraphQL 。感謝 apollo-codegen ，您可以從 GraphQL schema 生成客戶端的 types ！看起來像這樣：

//  這個(gè)文件是自動(dòng)生成的，不應(yīng)該被編輯

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

它只會(huì)生成實(shí)際使用的查詢的 types ，而不會(huì)生成前端未使用的 types 。

好像那還不夠酷炫，我們可以進(jìn)一步。使用graphql模式轉(zhuǎn)儲(chǔ)，我們可以在使用 eslint-plugin-graphql 提示編寫 graphql 查詢時(shí)的 eslint 錯(cuò)誤。當(dāng)你在查詢中輸入字段時(shí)，會(huì)發(fā)生這種情況！

類型

正如上一個(gè)例子中提到的，靜態(tài)類型非常的棒。這里不羅列 TypeScript 所有的功能，只給你展示實(shí)施所需的3步及它如何有用。

1. 將  .js 文件重命名為 .tsx    
2. 添加一些 interfaces   
3. 使用這些 interfaces

這里有一個(gè)例子：

interface MessageProps {
  name: string;
}

export default ({ name }: MessageProps) => (
  
    Say hello to {name}
  
);

現(xiàn)在任何時(shí)候我導(dǎo)入這個(gè)組件，如果我不傳入 name ，或者 name 不是一個(gè)字符串，或者通過其他 props ，都會(huì)收到一個(gè)錯(cuò)誤。如果你用了
props ，在很長一段時(shí)間之后重構(gòu)代碼，或者有新的開發(fā)者進(jìn)入，這將非常有用。VS Code 還允許您從任何地方右鍵單擊并查看類型定義。我最喜歡的其他功能是在 TypeScript 配置中啟用 noUnusedLocals
和 noUnusedParameters 。 VS Code 將警告未使用的代碼。

預(yù)檢查

使用 prettier， eslint，和 jest 非常有用。有時(shí)一個(gè)團(tuán)隊(duì)成員會(huì)對我的應(yīng)用做一個(gè)小小的貢獻(xiàn)，但沒有和我一樣的開發(fā)工具。當(dāng)它們提交時(shí)，代碼仍然會(huì)被格式化并檢查是否出現(xiàn)了 linting 錯(cuò)誤。這就是我如何做到的。
把它添加到你的 package.json

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

然后執(zhí)行：

npm install lint-staged husky --save-dev

就是這樣，當(dāng)相應(yīng)的 types 文件被提交時(shí)，這些東西就會(huì)運(yùn)行。如果產(chǎn)生失敗，它不會(huì)讓你提交 commit 。

調(diào)試設(shè)置

VS代碼有一個(gè)非常酷的啟動(dòng)配置，讓你通過按下按鈕啟動(dòng)應(yīng)用程序。不再需要使用 npm start 開啟服務(wù)器，創(chuàng)建應(yīng)用程序，并打開瀏覽器。我們可以把所有這一切放到一個(gè)文件中，并通過一個(gè)按鈕按下來啟動(dòng)它。除此之外，我們可以在編輯器中設(shè)置斷點(diǎn)，任何控制臺(tái)錯(cuò)誤將直接跳到我們的代碼中，并顯示錯(cuò)誤！這是一個(gè)我使用的示例配置：

{
  "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 中的任何內(nèi)容，斷點(diǎn)將不起作用，堆棧跟蹤將轉(zhuǎn)到代碼中錯(cuò)誤的位置。

添加啟動(dòng)配置（在這里閱讀更多的功能）只需打開調(diào)試器選項(xiàng)卡并點(diǎn)擊開始！

結(jié)論

想象一個(gè)新的開發(fā)人員加入你的團(tuán)隊(duì)。你現(xiàn)在有這么多很棒的東西，他們可以立即啟動(dòng)和運(yùn)行。下載 VS Code ，點(diǎn)擊啟動(dòng)調(diào)試器，應(yīng)用程序立即運(yùn)行。想要更改顯示的一些數(shù)據(jù)？讓他們編輯一個(gè) GraphQL query ，會(huì)立即被告知該變量是否在 GraphQL schema 中。讓他們使用你為列表項(xiàng)制作的 React 組件，他們可以將鼠標(biāo)懸停在組件上，看看它需要什么 props 。嘗試使用別的東西，立即出現(xiàn)錯(cuò)誤。現(xiàn)在他們已經(jīng)準(zhǔn)備好提交 commit 了....它是否破壞了有些東西？在 commit 前，會(huì)進(jìn)行 linting 檢測和自動(dòng)化測試！我希望這篇文章幫到一些人。