DEV Community
·
在VSCode中设置ESLint 9.13.0、Prettier、TypeScript和Vue.js的自动保存自动格式化
💡
原文英文，约600词，阅读约需2分钟。
📝
内容提要
本文指南介绍了如何在Visual Studio Code中配置Vue.js项目，使用ESLint 9.13.0、Prettier和TypeScript，实现自动格式化和检查。步骤包括创建项目、安装依赖、配置ESLint、添加Flat Config和安装VSCode扩展。完成后，项目将支持TypeScript和Vue.js，并在保存时自动格式化代码。
🎯
关键要点
- 本文指南介绍了如何在Visual Studio Code中配置Vue.js项目，使用ESLint 9.13.0、Prettier和TypeScript。
- 步骤包括创建项目、安装依赖、配置ESLint、添加Flat Config和安装VSCode扩展。
- 创建新Vue项目的命令为：npm create vue@latest。
- 安装项目依赖的命令为：npm install，并使用ncu更新依赖。
- 需要安装的NPM包包括：prettier、eslint、prettier-eslint、@typescript-eslint/parser、typescript、vue-eslint-parser、@vue/eslint-config-typescript和@vue/eslint-config-prettier。
- 初始化ESLint配置的命令为：npm init @eslint/config@latest，并根据提示选择相应选项。
- 添加ESLint Flat Config以确保与新格式兼容，需在eslint.config.mjs文件中进行配置。
- 安装VSCode扩展以实现Prettier和ESLint的自动格式化，推荐使用Prettier ESLint扩展。
- 在.vscode/extensions.json文件中添加扩展推荐，以便项目中使用。
- 完成配置后，重启VSCode以确保自动保存和自动格式化功能正常工作。
➡️
