DEV Community
·
在VSCode中设置ESLint 9.13.0、Prettier、TypeScript和Vue.js的自动保存自动格式化
内容提要
本文指南介绍了如何在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以确保自动保存和自动格式化功能正常工作。
延伸问答
如何在VSCode中创建新的Vue项目？
使用命令npm create vue@latest创建新的Vue项目。
在VSCode中安装ESLint和Prettier需要哪些NPM包？
需要安装的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文件中添加必要的配置，以确保ESLint与新格式兼容。
如何在VSCode中实现自动格式化？
安装Prettier ESLint扩展，并在.vscode/extensions.json文件中添加扩展推荐，然后重启VSCode。
完成配置后需要做什么？
完成配置后，重启VSCode以确保自动保存和自动格式化功能正常工作。
