vscode vue 插件安装

vetur、Prettier - Code formatter、ESLint一起安装：

设置：在打开的窗口中的【文件】---【首选项】---【用户设置】中加入下面内容：

{    
    
// prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大
 "prettier.printWidth": 120, 
 // prettier:是否在每行末尾加上分号
  "prettier.semi": false, 
 // prettier:如果为true，将使用单行否则使用双引号
  "prettier.singleQuote": true, 
 // vetur:对html的内容使用js-beautify-html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-icons",
  "explorer.confirmDragAndDrop": false
}

Auto Close Tag --------自动补全html标签

Auto Rename Tag --------同步更改html尾标签

HTML CSS Support css--------语法提示

HTML Snippets html--------标签提示

JavaScript (ES6) snippets ES6--------语法快捷键支持

language-stylus stylus --------语法提示

Stylus stylus CSS 语法提示--------主要支持vue文件下stylus

Path Autocomplete --------文件自动路径提示

VS Color Picker color: #fff --------自动提示

Vue 2 Snippets vue --------快捷键提示

eslint--------代码格式化

VueHelper --------可能是目前vscode最好的vue代码提示插件

vetur --------必备

ESLint ESlint--------语法提示

修改settings.json 文件

"eslint.nodePath": "E:/WebStorm", // 应用路径
"eslint.validate": [
"javascript",
"javascriptreact",
"vue" // 添加vue文件支持
]

File Peek 文件路径跳转

修改settings.json 文件

"file_peek.activeLanguages": [
"typescript",
"javascript",
"python",
"vue" // 添加vue支持
],
"file_peek.searchFileExtensions": [
".js",
".ts",
".html",
".css",
".scss",
".vue" // 添加vue支持
]

最后的settings.json

{
    "python.pythonPath": "D:\\Program Files\\Python36\\python.exe",//python路径
    "editor.fontWeight": "100",
    "workbench.colorTheme": "Monokai",//主题 
    "workbench.preferredDarkColorTheme": "Solarized Dark",
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "files.associations": {
        "*.ejs": "html",
        "*.js": "html",
        "*.vue": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.fontSize": 16,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "eslint.nodePath": "D:/Microsoft VS Code", // 应用路径
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue" // 添加vue文件支持
    ],
    // prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大
    "prettier.printWidth": 120,
    // prettier:是否在每行末尾加上分号
    "prettier.semi": false,
    // prettier:如果为true，将使用单行否则使用双引号
    "prettier.singleQuote": true,
    // vetur:对html的内容使用js-beautify-html
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDragAndDrop": false
}

原文地址：https://www.cnblogs.com/binky/p/12672062.html