我的VS CODE

2024年5月17日 205次阅读 来源: BBQ只有番薯

在一样平常开辟中，我运用的编辑器是 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
}
    原文作者：BBQ只有番薯
    原文地址: https://segmentfault.com/a/1190000018048026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞