Vue项目之使用EditorConfig, Eslint和Prettier实现代码规范

最新推荐文章于 2024-08-09 00:04:00 发布

AI画手小王

最新推荐文章于 2024-08-09 00:04:00 发布

阅读量3.4k

点赞数 1

文章标签： vue.js 代码规范前端

本文链接：https://blog.csdn.net/qq_53225741/article/details/126478826

版权

本文详细介绍了如何在Vue项目中配置代码规范，包括使用Vue CLI创建项目时选择Eslint + Prettier，自动执行lint规则，独立配置文件，以及为已有项目添加Eslint、Prettier和EditorConfig的步骤。通过这些配置，可以统一团队代码风格，提高代码质量，便于协同开发。

摘要由CSDN通过智能技术生成

背景

每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。。。

如果是一个人独立开发，这些当然都没啥问题，自己想怎么写就怎么写。代码规范化之后可能也没法立即看到带来的好处。并且相反，可能在某些人看来反而是一种束缚。

但是如果是团队协同开发，代码规范化所带来的好处就很明显。比如，统一团队成员的代码风格，方便后期维护，避免扰乱Git Diff等等。

针对以上这些问题，本文会介绍如何在Vue项目中实现基本的代码规范配置。

思路

不同人可能会使用不同开发工具，不同开发工具有着不同的默认配置，针对这个问题，这里我们采用开发工具配置工具EditorConfig去统一这些开发工具的默认配置。

有时候开发中难免会写出一些语法错误等问题，比如使用了未声名的变量，switch语句少写了break等等，而这些问题要等到编译或者运行时才会被发现。针对这个问题，这里我们使用代码检查工具Eslint来检查这些代码问题，将这些问题提前暴露出来并修复，而不是等到编译或运行时提示报错才发现。

此外，每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space，有的人一行宽度设置了80个字符，有的人设置了120甚至更多等等，针对这个问题，这里我们使用代码格式化工具Prettier来统一这些代码风格。