个人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
}