admin管理员组文章数量:1564644
写在开头
这篇文章来聊一聊我在 vscode 代码格式化上遇到的一些坑。
如果你想快速配置自己的 vscode 支持保存自动格式化功能,请看另一篇文章:三步搞定 vscode 代码格式化
先贴出最终的配置文件:
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
// eslint 检测文件类型
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
一、eslint 和 prettier 的区别
1、 eslint
eslint
是用来做代码风格检查的,比较关注代码质量,并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能。
这里我们先对 eslint 做对应的配置:
// 保存时格式化
"editor.formatOnSave": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
为什么说是一部分格式化的功能呢?这里给大家举个例子,如下图是用 eslint 格式化 js 文件的效果:
可以看出,eslint 的确格式化了代码,但是中间的空行并没有被格式化。还是有点欠缺的哈。
2、prettier
prettier
本身就是用来做代码格式化的,准确的说它是来美化代码的,所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充。
那么两者都有格式化的功能,就不会有冲突吗?
当然有了,不过只要简单的配置就可以解决了,比如语句末尾不加分号和强制单引号等 eslint 风格检查。配置如下:
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
来看看效果,这下连空行也可以格式化了:
到这是不是就完了,其实还有个冲突就是匿名函数后空格的问题。 function ()
(eslint 推荐)和 function()
(prettier 推荐) 的冲突。我们后面继续说这个问题。下面来看对 vue 文件格式化的配置。
二、vue 文件格式化配置(Vetur 配置)
vscode 对 vue 的支持也是很棒的。对于 vue 的格式化,我们用到了 Vetur
插件,Vetur 插件的格式化大多也是直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的原因之一。
Vetur 的格式化配置只需修改关于模版的部分就好了。
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
用 prettyhtml
格式化 template 可以消除多余的空行,并且对属性超长的行可以合理换行显示。
三、问题
1、vue 文件和 html 文件,没有 eslint 风格提示。
vue 文件:
html 文件:
解决方法:
在 setting.json 文件中加入如下配置:
// eslint 检测文件类型
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
再看看效果,已经有提示了,html 文件也一样,就不展示了:
2、 function ()
(eslint 推荐)和 function()
(prettier 推荐) 的风格冲突问题
上面提到过这个问题,这里来说说我自己的处理方法,大家可以参考。
如果推崇 eslint
的规范,也就是 function ()
这种的。那么恭喜你,你什么都不用改。
如果你和我一样推崇 prettier
的规范,也就是 function()
这种的。那么就需要改改了。
先把 setting.json
中 eslint.validate
字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候,走
prettier
的规范,而不再需要根据 eslint
的规范,进行 fix。
这样做有个好处是,如果你的项目不需要配置 eslint 来检查代码 ,代码就不需要格式化为 eslint 的规范。
{
"language": "vue"
// "autoFix": true
}
但是如果你的项目配置了 eslint
,比如用 vue-cli 构建的项目,一般都会进行 eslint
检查。那么就在项目根目录的 eslintrc.js
中添加下面的配置,这种情况就可以 autoFix
了,自动修复成 eslint 的规范。
// 自定义的规则
module.exports = {
rules: {
'space-before-function-paren': 0
}
}
over。
版权声明:本文标题:聊一聊 vscode 的代码格式化 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726470548a1072048.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论