個人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 文件提供補全和語法高亮
• 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
}