在日常開發中，我使用的編輯器是 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 }

總結

以上是生活随笔為你收集整理的我的VS CODE的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。