我的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
}