当前位置: 首页 > Web前端 > vue.js

vscode自动格式化vue项目代码

时间:2023-03-31 22:00:35 vue.js

不管是多人开发的项目还是个人开发的项目,统一的代码风格对项目的维护都有很大的好处。同时,各种代码质量校验规则也可以避免开发初期的一些低级错误。通过vscode-eslint、vscode-stylelint两个插件,以及.vscode/extensions.json、.vscode/setting.json、.eslintrc.js、.stylelintrc.js四个配置文件,实现vscode保存文件时自动vue的文件的template、script、style部分以统一的格式自动进行纠错和功能配置。vscode/extensions.json自动推荐并安装格式化所需的插件}.vscode/setting.json统一编辑器自动格式化配置,关闭部分vetur配置,减少资源消耗{"source.fixAll.eslint":true,"source.fixAll.stylelint":true},"vetur.format.enable":false,"vetur.validation.template":false,"vetur.validation.script":false,"vetur.validation.style":false}.editorconfig(推荐)统一编辑器的默认换行和缩进规则[*]indent_style=spaceindent_size=2end_of_line=lftrim_trailing_whitespace=trueinsert_final_newline=true.eslintrc.js将默认的plugin:vue/essential替换为plugin:vue/recommended来格式化模板部分,更严格的验证规则也有利于提高代码质量module.exports={//...extends:['plugin:vue/recommended','@vue/standard'],//...}.stylelintrc.js样式格式化配置module.exports={extends:['stylelint-config-standard','stylelint-config-recess-order']}其他的vscode格式化插件大致可以分为prettier、js-beautify-html等format和eslint、stylelint等lint。早期的eslint等验证工具并没有正确的格式。错误的能力,于是出现了以prettier为代表的格式化工具,并受到了高度评??价,但同时也出现了与eslint规则冲突等问题。目前eslint等工具已经支持纠错能力,也具备验证代码质量的能力,所以比较推荐(可能是我对prettier了解不够,有没有其他优势请指出)格式化工具也可以通过如下配置(不推荐)保存文件时自动格式化文件。vscode/setting.json{"editor.formatOnSave":true}