我的VS CODE

在日常開發中，我使用的編輯器是 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 文件提供補全和語法高亮

使用 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
}