VSCode配置eslint自动缩进(格式化代码)
配置基于 VSCode v1.41.0 以上版本
1. 打开vscode配置文件 settings.json
{
//自动缩进的开关 (关键配置),设置为true则打开自动缩进
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
// 规定的文件类型 这里不是必要的
"eslint.validate": ["javascript", "vue", "html"]
}
2. 打开项目根文件夹下的 .eslintrc.js
这个配置是决定你 缩进几个空格
在 rules 下配置
module.exports = {
rules:{
// 解决let被强转为const问题
"prefer-const": 0,
// 保存代码时缩进4个空格
"indent": ['error', 4],
}
}
配置完保存就可以了,试一下吧!
这里还有个地方也可以配置缩进,
但是优先级没有 .eslintrc.js 里的高
打开根文件夹下的 .editorconfig 文件
在文件中配置 indent_size 字段
#控制 .editorconfig 是否生效
root = true
#匹配的文件类型
[*.{js,jsx,ts,tsx,vue}]
#缩进风格:空格
indent_style = space
# 这里一般默认是 2,改成4就能缩进4个空格了
indent_size = 4
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true
总结:
.editorconfig 不光可以检验 js 文件的代码风格,还可以对 .py(python 文件)、.md(markdown 文件)进行代码风格控制。
Eslint 和 .editorconfig 并不冲突,同时配合使用可以使代码风格更加优雅。
希望这篇帖子能帮到你!