摘要

总结一下自己的VS code使用过程中遇到的各种场景和问题，持续更新中 ……

一、安装各种扩展

VS Code支持各种插件扩展，点击”查看” -> “扩展”进入，在商店中查找自己想要的扩展并安装

二、Debug

进入调试界面，点击”添加配置 XXX”，之后选择”Chrome”，生成一个launch.json文件

然后在launch.json增加配置

"version": "0.2.0",
"configurations": [
    {
        "name": "启动 Chrome 并打开 localhost",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html",
        //"url":"http://localhost:8080",
        //"runtimeExecutable": "C:\\Users\\ZGQ\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}",
        //"preLaunchTask": "build",
        //"userDataDir": "${tmpdir}",
        "port": 9222
    }
]

之后在代码中打好断点，就可以开始调试了

三、工作区

打开任意一个文件夹，然后在任意空白处，选择将文件夹添加到工作区，此时再选择另一个想加入该工作区的文件夹，确定之后就形成了一个包含两个JS工程的工作区。

最后选择”文件” -> “将工作区另存为”，给工作区起一个名字并保存。

四、推荐插件

网上看到的，加上我个人的分类：

  • 代码规范
    • ESlint
    • HTMLHint
    • beautify
    • vetur
  • 编码帮助
    • HTML Snippets
    • HTML CSS Support
    • jQuery Code Snippets
    • Bootstrap 3 Sinnpet
    • Path Intellisense
    • Npm Intellisense
    • Document this
    • Atuo Rename Tag
    • fileheader
    • filesize
    • VueHelper
  • 调试帮助
    • Debugger for Chrome
  • 界面优化
    • vscode-icon
    • 各种主题