[譯] 使用 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 檢測和自動化測試！我但願這篇文章幫到一些人。