我的VS CODE

BBQ只有番薯發表於2019-02-16

在日常開發中，我使用的編輯器是 VS CODE。不僅介面簡潔好看，而且外掛豐富，是前端開發的首選工具之一。這些外掛和工具的目的是為了提高我們的開發效率，下面就我日常開發切身使用到和感受到有幫助的外掛和方法做個總結。

VS CODE 常用的個人在用的外掛

  • Chinese (Simplified) Language Pack for Visual Studio Code
    為 vscode 提供中文介面
  • EditorCofig for VS Code
    給 VS Code 專案應用全域性的.editorconfig 設定，包括 Tab 空格數量，檔案結尾符號等
  • Gitconfig Syntab
    為.gitconfig, .gitattributes, .gitmodules 提供語法高亮
  • Mocha sidebar
    macha 測試框架的 VS Code 支援
  • Path Intellisense
    對.js 檔案提供路徑感知，提示功能。如何在.vue 檔案中提供路徑感知
    只設定在工作區設定的話，只對當前工作區有效。
  • TODO Hightlight
    TODO highlight.
  • Vetur
    對.vue 檔案提供語法高亮和自動補全
  • vscode wxml
    對小程式.wxml 檔案提供補全和語法高亮
  • vscode weapp api
    只需要鍵入wx就會有微信api的提示

使用 jsconfig.json 做路徑感知

當我們在專案中整合 webpack 的時候，經常會使用 webpack alias。在 VS Code 中，支援 alias,需要使用jsconfig.json。
很可惜，這個方法在.vue 檔案中不支援，目前沒有找到解決方案。不過我們可以使用上面的path intellisense外掛來做路徑提示。

如何使用 jsconfig.json 讓 vscod 對 js 檔案提供路徑感知

{
    "compilerOptions": {
      "target": "es2017",
      "allowSyntheticDefaultImports": false,
      "baseUrl": "./",
      "paths": {
        "@/*": [ "src/apps/*" ],
        "app/*": [ "src/apps/*" ],
        "Components/*": [ "src/components/*" ],
        "services/*": [ "src/services/*" ],
        "style/*": [ "src/style/*" ]
      }
    },
    "exclude": [
      "node_modules",
      "dist",
      ".nyc_output",
      "build",
      "coverage"
    ]
}

解決 path intellisense 外掛對‘/’的不支援

我們在 vscode 中設定 path intellisense 對`/`的支援

"path-intellisense.mappings": {
  "/": "${workspaceRoot}",
  "@": "${workspaceRoot}/src"
}

其中/ 和 vscode 本身的路徑提示衝突，在這種情況下只會基於當前檔案盤為根目錄，需要關閉 vscode 本身對 js 程式碼 import 的智慧提示(version 1.30.2)

{
  "javascript.suggest.paths": false
}

相關文章