VSCode 代码自动格式化

type

status

date

slug

summary

📝 主旨内容

使用的工具

husky: Git hooks 工具

对git执行的一些命令，通过对应的钩子函数触发，执行自定义的脚本程序

eslint：插件化的JS代码检测工具，说实话我不想用，这里就没写了。

prettier: 代码格式化工具，安装插件

editorconfig：文件代码规范

VSCode: 轻量代码编辑器

配置步骤

安装相应插件

针对你的语言选择格式化的插件，Js可以选择 Prettier，Python 选择Black……几乎每个语言都有其对应的格式化工具，接下来的步骤我将以JS为例。

VSCode 配置插件

新建.vscode文件夹，创建setting.json，添加以下设置

这会告诉编辑器在保存文件时自动使用Prettier插件

配置Git钩子

安装husky工具，在提交前运行格式化命令

配置husky

启用git hook，执行 npx husky install，该命令会创建.husky目录和必要的配置文件

利用npm生命周期，自动执行git hook

prepare命令会在install后自动执行，这样在安装依赖的时候husky就被启用了

创建hook

手动创建一个名为 pre-commit 的文件在 .husky/ 目录下

确保文件可执行：使用chmod u+x .husky/pre-commit命令将该文件设置为可执行文件

创建后的脚本内容为：

它会在commit前执行npm run fmt命令，如果报错就会终止commit

配置格式化脚本：在 package.json 文件中添加一个脚本来运行格式化工具，比如 Prettier(需要先安装prettier)：

设置editorconfig（解决成员们编辑器设置不同，影响代码风格）

根目录下创建.editorconfig，添加以下代码

配置prettier

安装

根目录下新建.prettierrc.yaml，加入以下内容

配置.prettierignore，配置prettier校验忽略的文件

🤗 总结归纳

总结文章的内容

其实还有很多可配置的地方，例如commitlint，eslint，但是无论怎么说，自己开发起来最顺手的设置才是好设置，以上的配置对我来说完全ok了。

对于git commit的一些规范，有我们学长的另一篇博客，我将其搬到这里。

🗒️

Git工作流

文章最后，附上我做了一个demo进行commit后的命令行输出。

📎 参考文章

https://juejin.cn/post/6947200436101185566

https://cloud.tencent.com/developer/article/2197340

💡

相关安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~