VS CODE 配置文档说明

VScode配置文档

常用插件：
View In Browser：预览页面（ctrl+F1）

vscode-icons：侧栏的图标，对于一个有视觉强迫症的人是必须要的

HTML Snippets:支持HTML5的标签提示

JS-CSS-HTML Formatter：自动格式化文档；

Path Autocomplete：路径自动补齐

jQuery Code Snippets：jquery 自动提示

Npm Intellisense：npm包代码提示

ESLint：检测JS必备，注意如果结合webpack进行开发时，注意编辑器保存时的格式化风格一定要和eslint相同，否则一直会报错；

Debugger for Chrome：方便调试

Auto Rename Tag：自动同步修改标签

Vue2 Snippets:对于html中vue指令提示比较丰富，也会提供js中的vue属性和方法

VueHelper:和vue2 Snippets功能相似，但是此插件对于js的提示更加丰富，建议配置Vue2 Snippets一起使用；

vue-beautify:功能和JS-CSS-HTML Formatter类似，所以可以忽略；

jsx：在进行react开发时，添加jsx文档格式，否则对于jsx格式的书写，编辑器会报错

常用设置和配置：
关闭保存时代码自动格式化:
帮助 > 欢迎使用 > 配置设置 >搜索editor.formatOnType和editor.formatOnSave，然后将他们的值设置为false；例：

如果，在保存时，还是进行自动格式化代码，那么应该是装了格式化插件了，这个时候需要把插件关闭掉，或者更改相应插件的配置文件，如JS-CSS-HTML Formatter或者vue-beautify插件；

设置失去焦点自动保存
帮助 > 欢迎使用 > 配置设置 >搜索"files.autoSave"，设置值为：“onFocusChange”。例：

配置语言的文件关联：
帮助 > 欢迎使用 > 配置设置 >搜索"files.assiciations",设置值为对象格式：如下：

git的配置：
配置git的路径：
帮助 > 欢迎使用 > 配置设置 >搜索"git.path ",设置值为：git.exe的启动路径；如：

可以进行本地操作，但是远程操作就是一个坑；无法弹出输入密码的弹窗，搜了很多国内外文档都无法解决；
Debugger for Chrome：的坑
首先在项目中使用npm安装anywhere插件；然后在scripts标签中配置启动文件：例：

在vscode的launch配置文件中配置如下：

启动步骤：

npm run backend:debug

启动调试配置：“附加于已启动的 Node 服务器（debug模式）”

在 server/app.js 中加断点

访问 http://localhost:8091/

配置npm调试node：
{

        "type": "node",

       "request": "launch",

        "name": "Launch via NPM",

        "runtimeExecutable": "npm",

        "cwd": "${workspaceRoot}/bwschool/1505E/vue/my_test_vue",

        "windows": {

            "runtimeExecutable": "npm.cmd"

        },

        "runtimeArgs": [

            "start"

        ],

        "protocol": "inspector",

        "port": 9229

    },

在inspector调试模式下，监听的端口号必须是9229端口