本指南将引导您使用 eslint 9.13.0、prettier 和 typescript 配置 vue.js 项目，以在 visual studio code 中保存时启用自动代码格式化和 linting。
1.创建一个新的vue项目
首先创建一个新的 vue 项目：
npm create vue@latest
导航到项目目录：
cd your-project-directory
2. 安装和更新依赖项
安装项目依赖项：
npm install
然后，使用ncu（node check updates）更新项目依赖项：
npx ncu -unpm install
3.先决条件添加eslint、prettier和typescript包
此配置需要在本地或全局安装以下 npm 软件包：
prettiereslint prettier-eslint@typescript-eslint/parsertypescript vue-eslint-parser@vue/eslint-config-typescript @vue/eslint-config-prettier
使用 pnpm 或 npm 安装必要的开发依赖项：
pnpm install -d prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier
4.初始化eslint配置
运行以下命令来设置 eslint 配置：
npm init @eslint/config@latest
出现提示时，进行以下选择来配置 eslint：
您想如何使用 eslint？：检查语法并发现问题。您的项目使用什么类型的模块？：commonjs（需要/导出）。您的项目使用哪个框架？：vue.js。您的项目使用 typescript 吗？：是的。你的代码在哪里运行？：浏览器。当询问您是否要安装依赖项（eslint、globals、@eslint/js、@typescript-eslint、eslint-plugin-vue）时，选择 是 并使用 npm 作为包管理器。
5.添加eslint平面配置
为了确保 eslint 使用新的 flat config 格式，请确保在 eslint.config.mjs 文件中包含必要的配置。对此的调整可能取决于您的具体设置。
import globals from 'globals';import pluginjs from '@eslint/js';import tseslint from 'typescript-eslint';import pluginvue from 'eslint-plugin-vue';import prettier from 'eslint-plugin-prettier/recommended';import vueconfigtypescript from '@vue/eslint-config-typescript';import vueconfigprettier from '@vue/eslint-config-prettier';/** @type {import('eslint').linter.config[]} */export default [ { languageoptions: { globals: { ...globals.browser, ...globals.node, }, }, }, // js pluginjs.configs.recommended, { rules: { 'no-unused-vars': 'off', 'no-undef': 'off', }, }, // ts ...tseslint.configs.recommended, { rules: { '@typescript-eslint/no-unused-vars': 'warn', '@typescript-eslint/no-explicit-any': 'warn', }, }, // vue ...pluginvue.configs['flat/recommended'], { files: ['*.vue', '**/*.vue'], languageoptions: { parseroptions: { parser: tseslint.parser, }, }, }, { rules: { ...vueconfigtypescript.rules, ...vueconfigprettier.rules, 'prettier/prettier': [ 'warn', { singlequote: true, }, ], 'vue/multi-word-component-names': 'off', 'vue/attribute-hyphenation': 'off', 'vue/no-v-html': 'off', 'vue/v-on-event-hyphenation': 'off', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/no-require-imports': 'off', '@typescript-eslint/no-explicit-any': 'off', }, }, { ignores: ['node_modules', '.nuxt', '.output', 'dist'], }, // prettier prettier, { rules: { 'prettier/prettier': ['warn', { singlequote: true }], }, },];
6. 安装 vscode 扩展以进行 prettier-eslint 集成
要使用 prettier 和 eslint 启用保存时自动格式化，请安装以下 visual studio code 扩展：
prettier eslint：在这里下载
7.添加扩展推荐
要为您的项目推荐扩展，请将其添加到 .vscode/extensions.json 文件中：
{ "recommendations": [ "rvest.vs-code-prettier-eslint" ]}
8. 重启vscode
配置项目并安装扩展后，重新启动 visual studio code 以确保自动保存和自动格式化按预期工作。
立即学习“前端免费学习笔记（深入）”；
概括
您的项目现在应该设置为：
eslint 9.13.0，支持 typescript 和 vue.js更漂亮的集成以实现一致的代码格式使用 prettier eslint 扩展在 vscode 中保存时自动格式化
以上就是使用 Prettier、TypeScript、Vuejs 和 VSCode 设置 ESLint 自动保存自动格式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495851.html
微信扫一扫 
支付宝扫一扫 
