配置Prettier与VSCode实现自动格式化代码

本文主要介绍了如何使用Prettier插件实现自动格式化代码，并去除不必要的换行。在项目根目录创建`.prettierrc`配置文件，设置代码风格，包括超过特定长度的行自动换行、使用单引号以及不使用行尾分号。同时，配置Visual Studio Code (VSCode) 的`settings.json`文件，启用自动保存时格式化、Vue支持、ESLint集成等。此外，还调整了JavaScript和Vue文件的格式化规则，例如插入空格、使用单引号以及控制属性换行方式。 在`.prettierrc`配置文件中，设置了以下规则： 1. 行长度限制：当一行代码超过800个字符时，Prettier会自动进行换行。 2. 引号类型：使用单引号而不是双引号作为字符串的包围符号。 3. 分号：禁用行尾分号，即不自动在语句末尾添加分号。 在VSCode的`settings.json`中，做了以下配置： 1. 关闭了根据文件类型自动设置tab size的选项，将tab size设定为2。 2. 开启了每次保存时自动格式化的功能。 3. 添加了Vue支持，并开启ESLint的自动修复功能。 4. 禁用了Vetur对模板的验证，以避免冲突。 5. 集成了Prettier与ESLint，使Prettier使用ESLint的规则进行代码校验。 6. 设置函数名与括号之间插入一个空格。 7. 根据个人偏好，选择了特定的HTML和JavaScript格式化器。 8. 控制了Stylus文件的格式化方式，可能需要安装额外的Stylus支持插件。 通过这些配置，开发者可以享受到Prettier提供的统一代码风格，提高代码的可读性和团队协作效率。同时，结合VSCode的自动保存功能和ESLint的实时错误检查，能够确保代码的整洁和规范，减少手动格式化和错误排查的工作量。尤其对于需要跨浏览器兼容的项目（如提及的IE），保持良好的代码格式和规范尤为重要，因为这有助于减少潜在的兼容性问题。