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格式的书写,编辑器会报错
常用设置和配置:
1、 关闭保存时代码自动格式化:
帮助 > 欢迎使用 > 配置设置 >搜索editor.formatOnType和editor.formatOnSave,然后将他们的值设置为false;
例:如果,在保存时,还是进行自动格式化代码,那么应该是装了格式化插件了,这个时候需要把插件关闭掉,或者更改相应插件的配置文件,如JS-CSS-HTML Formatter或者vue-beautify插件;
2、设置失去焦点自动保存
帮助 > 欢迎使用 > 配置设置 >搜索"files.autoSave",设置值为:"onFocusChange"。例:
3、配置语言的文件关联:
帮助 > 欢迎使用 > 配置设置 >搜索"files.assiciations",设置值为对象格式:如下:
4、git的配置:
- 配置git的路径:
帮助 > 欢迎使用 > 配置设置 >搜索"git.path ",设置值为:git.exe的启动路径;
如:可以进行本地操作,但是远程操作就是一个坑;无法弹出输入密码的弹窗,搜了很多国内外文档都无法解决;
5、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端口