vue开发.vsode配置

本文主要是介绍vue开发.vsode配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以下vscode工作区配置功能：

代码保存时格式化
代码保存时eslint自动修复错误
……

配置方法如下：

目录结构
安装Eslint插件
setting.json文件

{// .vue文件template格式化支持，并使用js-beautify-html插件"vetur.format.defaultFormatter.html": "js-beautify-html",// js-beautify-html格式化配置，属性强制换行"vetur.format.defaultFormatterOptions": {"js-beautify-html": {// "wrap_line_length": 160,"wrap_attributes": "force-aligned"}},// 根据文件后缀名定义vue文件类型"files.associations": {"*.vue": "vue"},// 配置 ESLint 检查的文件类型"eslint.validate": ["javascript","javascriptreact",{"language": "typescript","autoFix": true},{"language": "vue","autoFix": true}],// 保存时eslint自动修复错误"eslint.autoFixOnSave": true,// 开启 eslint 支持"prettier.eslintIntegration": true,// 使用单引号"prettier.singleQuote": true,// 结尾不加分号"prettier.semi": false,// CSS"stylelint.enable": true,"css.validate": false,"less.validate": false,"scss.validate": true,"[scss]": {// SCSS 并自动格式化"editor.formatOnSave": true},"[less]": {"editor.formatOnSave": true},"[css]": {"editor.formatOnSave": true}
}

extensions.json文件

{"recommendations": ["dbaeumer.vscode-eslint",// Lint-on-save with Stylelint// https://github.com/shinnn/vscode-stylelint"shinnn.stylelint","octref.vetur","esbenp.prettier-vscode"]
}