vscode如何优雅地设置代码缩进,自动格式化?

mac版vscode. 想实现如下功能: tab缩进为4格.js/.html/.css/.less/.vue文件保存/粘贴代码片断时候,自动格式化代码…
关注者
91
被浏览
1,100,719

12 个回答

更新:tslint现在已经基本退役,可以统一使用eslint加typescript预置规则即可。

另外根据个人喜好,还可以引入husky加lint-staged实现代码提交前的本地强制验证。缺点是commit速度会变慢,如果你有在vscode设置保存文件自动格式化,那么这条收益不大,最终的验证肯定是交给CI/CD。

以下为原答案:

别用beautify了,基本过时,等待退休状态。

用prettier,把vscode设置formatter为prettier,并且设置保存文件触发自动格式化。根目录建立.prettierrc文件,设置锁进,引号风格等配置。

然后js的话装个eslint,ts的话装个tslint,在vscode里设置格式化优先继承lint配置,并用prettier配置复写。根目录建立lint的config文件。

然后再装个editorconfig插件,根目录建立.editorconfig配置。这个的作用是为项目统一编辑器的实时格式。简单来说就是它负责敲代码那一刻的格式,prettier负责保存代码那一刻的格式。两者统一体验更好。

最后,你在package.json里面再来一条lint+prettier的全项目自动审阅命令,以及自动全局格式化命令。用来做代码审阅和自动修复,保证很多人参与的大项目都有完全统一的代码格式。

以上基本实现vscode优雅格式化。

手机打字比较麻烦,就不详细讲具体配置了。

保存时自动格式化,目前 VS Code 自带的功能就可以做到。


打开 VS Code 的设置面板,在设置中搜索 format,勾选 Editor: Format On Save ,设置之后,当你每次按下 Ctrl/Command + S 保存文件时,就会自动格式化了。



以上,希望有帮助。