vue开发.vsode配置

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

以下vscode工作区配置功能：

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

配置方法如下：

1. 目录结构
   
2. 安装Eslint插件
   
3. 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}
}

4. extensions.json文件

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

4. 按照自己的需求修改 .vscode 文件夹下的setting.json文件，即可做到在不同的项目中使用不同的vue开发规范了

这篇关于vue开发.vsode配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---