共计 1285 个字符，预计需要花费 4 分钟才能阅读完成。
在日常开发中，我使用的编辑器是 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 sidebarmacha 测试框架的 VS Code 支持
Path Intellisense 对.js 文件提供路径感知，提示功能。如何在.vue 文件中提供路径感知只设置在工作区设置的话，只对当前工作区有效。
TODO HightlightTODO 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
}