VSCode下Vue代码⾃动格式化配置
本⼈是⼀名C++程序员，最近因为⼯作的原因需要使⽤Electron开发⼀个⼩软件，所以从未使⽤过前端技术的我需要快速学习HTML、CSS、ES6、Node.js、VUE等⼀⼤堆东西，开发环境也从常⽤的Visual Studio 2010\2015切换到了Visual Studio Code。不得不说VSCode很优秀，但确实不熟悉，经过⼤量的猜测及实践，我将过程整理如下：
1. 通过electron-vue创建⼯程，选择安装eslint并选择standard风格，这就意味着只要代码不符合此风格，连运⾏都够呛，但代码风格统⼀
是⼀名强迫症程序员的必备素质。
2. 语法⾼亮问题，通过VSCode打开⼯程，所有的*.vue⽂件没有语法⾼亮，通过查询资料，安装Vetur插件后解决该问题，完美！
3. 为了能让eslint的配置⽣效，需要安装ESLint插件，安装完毕后，发现所有*.js⽂件⾥代码风格与eslint的standard风格不符的地⽅都以
红⾊波浪线标识出来了，但是，*.vue⽂件⾥的js代码并没有，添加如下配置后解决该问题，完美！
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
复制代码
4. 现在我们希望能在保存代码的时候⾃动格式化，只需加上"editor.formatOnSave": true这个配置就可以了，但是我们发现虽然保存时代
码能够⾃动格式化，但是并不会修复与eslint的standard风格不符合的地⽅，别急，加上"eslint.autoFixOnSave": true这个配置即可解决该问题，完美！
5. 等等，貌似发现⼏个问题，在*.vue⽂件⾥，保存⽂件时，会发现js代码会先格式化成另外⼀种风格，然后再被eslint给修复，现象就是
先出现⼤量红⾊波浪线，然后⼜消失，但是*.js⽂件⾥不会出现此现象，所以猜测是Vetur搞的⿁，经实践发现，只需加
上"vetur.format.defaultFormatter.js": "none"即可解决该问题，完美！
6. 现在还剩最后⼀个问题，*.vue⽂件⾥的html代码在保存时并没有⾃动格式化，通过查询资料发现，只需加
上"vetur.format.defaultFormatter.html": "js-beautify-html"配置即可解决该问题，完美！
7. 此时，代码格式化问题已全部解决，所有的配置如下：
// 保存⾃动化
"editor.formatOnSave": true,
electron vue教程
// 保存时⾃动fix
"eslint.autoFixOnSave": true,
// 添加 vue ⽀持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 使⽤插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 屏蔽vetur的js格式化
"vetur.format.defaultFormatter.js": "none"
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。