vscode开发vue首选项配置及常用插件扩展

vsCode首选项配置

1.进入vscode页面，点击设置打开开用户设置或者点击文件》首选项进入该页面
在这里插入图片描述
2.如果进入为上述页面，找不到setting.json文件，可通过ctrl+shift+p快捷键，在搜索栏输入preferences:open settings(json)

3.进入用户模式进行配置，初始化用户设置为空，将下面内容拷贝进去（注意大括号{}）,红色的区域主要是为了css提示设置（vscode安装HTML CSS Support）
{
“workbench.iconTheme”: “vscode-icons”,
“editor.fontSize”: 16,
“editor.renderIndentGuides”: false,
“files.autoSave”: “afterDelay”,
“editor.parameterHints”: true,
“editor.quickSuggestions”: {
“other”: true,
“comments”: true,
“strings”: true
},

“liveSassCompile.settings.formats”:[
{
“format”: “expanded”,
“extensionName”: “.css”,
“savePath”: “/css”
},
{
“extensionName”: “.min.css”,
“format”: “compressed”,
“savePath”: “/css”
}
],
“liveSassCompile.settings.excludeList”: [
“/node_modules/”,
“.vscode/**”
],
“liveSassCompile.settings.generateMap”: true,
“easysass.formats”: [
{
“format”: “expanded”,
“extension”: “.css”
},
{
“format”: “compressed”,
“extension”: “.min.css”
}
],
“easysass.targetDir”: “./css/”,
“background.customImages”: [
“file:///D://222.png”
],
“background.useDefault”: false,
“background.style”: {
“content”: “’’”,
“pointer-events”: “none”,
“position”: “absolute”,
“z-index”: “99999”,
“width”: “102%”,
“height”: “100%”,
“background-position”: “0%”,
“background-repeat”: “no-repeat”,
“opacity”: 0.3
},
“cssrem.rootFontSize”: 1,
“cssrem.autoRemovePrefixZero”: false,
“cssrem.fixedDigits”: 3,
“beautify.language”: {
“js”: {
“type”: [
“javascript”,
“json”
],
“filename”: [
“.jshintrc”,
“.jsbeautify”
]
},
“css”: [
“css”,
“scss”
],
“html”: [
“htm”,
“vue”,
“html”
]
}
}
4.vue环境搭建好后，用vscode安装日常用的插件（非常方便），只需点击扩展，在搜索框中搜索你所需要的插件即可
在这里插入图片描述
常用的插件主要有以下：