Vue 使用 Eslint 和 Prettier 并采用 Airbnb 规范

本文指导如何使用VueCreate创建新项目,配置ESLint和Airbnb规范,以及在VSCode中安装相关插件,设置自动格式化功能,确保代码质量和保存时的美观性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

初始化项目

  • 使用vue create ${projectName}创建一个新项目。
  • 选择Manually select features进行项目初始化配置。
  • Pick a linter / formatter config:中选择ESLint + Airbnb config.
  • Where do you prefer placing config for Babel, ESLint, etc.中选择In dedicated config files此时项目根目录中就会出现.eslintrc.js文件。

在 VSCode 中安装 ESLint 和 Prettier 插件及相关设置

  • 下载并启用ESLint
  • 下载并启用Prettier ESLint
  • settings.json中配置 以下命令
editor.formatOnSave": true, // 保存时启动格式化

// 配置 vue 和 JavaScript 的默认格式化工具
"[vue]": {
 "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[javascript]": {
 "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},

// 最为重要
"editor.codeActionsOnSave": {
 "source.fixAll": true
}

完成上述配置后,使用ctrl + s即可看到格式化效果

### 正确配置 Vue 3.5 项目中 ESLint Prettier #### 安装依赖包 为了实现代码规范检查格式化,需安装必要的工具。通过 npm 或者 pnpm 来安装 `eslint`、`prettier` 及其插件。 ```bash pnpm add -D eslint prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier ``` 此命令会下载安装 ESLint Prettier 的核心库以及针对 TypeScript Vue.js 特定的支持[^2]。 #### 创建配置文件 创建 `.eslintrc.cjs` 文件用于定义 ESLint 规则: ```javascript module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "plugin:vue/vue3-recommended", "airbnb-base", "plugin:@typescript-eslint/recommended", "prettier", // 关闭 ESLint 中与 Prettier 冲突的规则 ], parserOptions: { ecmaVersion: 12, sourceType: 'module', parser: '@typescript-eslint/parser' }, plugins: ['@typescript-eslint', 'vue'], rules: { // 自定义规则... } }; ``` 同时还需要创建 `.prettierrc.cjs` 文件来指定 Prettier 的选项: ```javascript module.exports = { singleQuote: true, trailingComma: 'all', semi: false, } ``` 这些设置确保了两个工具之间的兼容性一致性[^4]。 #### 解决冲突问题 为了避免 ESLint Prettier 在处理相同类型的格式化时发生冲突,应该在项目的根目录下的 VSCode 设置 (`settings.json`) 中禁用默认的编辑器格式化功能,让其中一个成为唯一的格式化工作者。通常推荐使用 Prettier 处理格式化工作而由 ESLint 负责语法错误检测其他静态分析任务。 #### 添加 NPM Script 为了让开发者能够方便地执行代码风格检查自动修复操作,在 package.json 中添加如下脚本条目: ```json { "scripts": { "lint": "eslint src/**/*.?(ts|tsx|js|jsx)", "format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write" } } ``` 这允许团队成员只需运行简单的命令即可保持整个代码库的一致性[^3]。 #### 使用 Husky 进行 Git Hook 配置 最后一步是利用 husky 工具为仓库增加 pre-commit hook,这样可以在每次提交之前自动触发 lint format 命令,从而强制实施编码标准[^1]。 ```bash npx mrm@2 lint-staged ``` 以上就是在 Vue 3.5 项目里正确配置 ESLint Prettier 达到最佳实践的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值