Vue_webpack_Vscode 开发常用插件

必备：

vscode-snippet--------自动生成代码块

配置自定义代码片段：

在vs code中，使用快捷键Ctrl+Shift+P打开搜索栏–>输入snippet–>选择首选项，如图：

snippet.jpg

打开了snippet搜索栏–>输入vue–>选择vue.json，如图：

snippet2.jpg

输入(替换) vue.json 配置内容：

{ "Print to console": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div>\n",
        "  </div>",
        "</template>\n",
        "<script>",
        "export default {",
        "  data() {",
        "    return {\n",
        "    }",
        "  },",
        "  methods: {\n",
        "  },",
        "  components: {\n",
        "  }",
        "}",
        "</script>\n",
        "<style>\n",
        "</style>",
        "$2"
    ],
    "description": "创建一个自定义的vue组件代码块"
}
}

后面就可以在 .vue 文件使用 "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 文件路径跳转