Eslint+Prettier配置VSCode自动格式化代码

Eslint+Prettier配置VSCode自动格式化代码

配置eslint和prettier插件以实现VSCode的代码自动格式化。

首先，安装eslint插件，进入设置界面勾选Format:Enable选项，确保已安装eslint和eslint-plugin-vue（针对Vue项目）。配置setting.json文件，添加相关选项，并创建.eslintrc.js文件进行个性化设置。配置完成后，通过ctrl+s或ctrl+shift+f快捷键进行代码格式化。同时，可在vue.config.js中加入代码以避免运行项目时因错误导致项目无法启动。

推荐安装prettier插件，专注于代码格式化，不进行代码质量检查。在设置界面安装Prettier-Code formatter插件，进行基本配置。配置settings.json文件时，确保eslint和prettier的规则一致，避免冲突。

进行其他个性化配置，例如使用Trailing Spaces插件删除尾部空格，使用Code Spell Checker进行拼写检查，使用Color Highlight进行颜色高亮，使用Import Cost进行依赖包大小提示，使用Bracket Pair Colorizer 2进行括号对齐，以及使用vscode-icon显示不同文件的不同图标。

总结而言，通过合理配置eslint和prettier插件，结合其他辅助插件，可以实现在VSCode中对代码进行自动格式化，提升开发效率和代码质量。2024-10-11