Vue3、Vite、TS、Eslint（Airbnb 规则）：助力生产项目搭建，绕开坑点

Vue.js 3、Vite、TypeScript和ESLint（Airbnb 规则）的结合可谓相得益彰，为开发人员打造了高效且愉悦的开发环境。然而，在构建生产项目时，难免会遇到各种各样的问题。本文将分享我们在搭建 Vue.js 3 + Vite + TypeScript + ESLint（Airbnb 规则）生产项目的过程中遇到的问题和解决办法，希望能够帮助大家少走弯路。

一、开发环境搭建

1. 安装依赖

   首先，我们需要安装必要的依赖。

   npm install -D vue@3 vite typescript eslint eslint-plugin-vue eslint-config-airbnb
   

2. 创建项目

   创建一个新的 Vue.js 项目。

   vue create my-project
   

3. 添加 TypeScript

   在项目中添加 TypeScript 支持。

   vue add typescript
   

4. 添加 ESLint（Airbnb 规则）

   在项目中添加 ESLint 支持，并使用 Airbnb 规则。

   vue add eslint --preset airbnb
   

5. 修改 vite.config.js 文件

   修改 vite.config.js 文件，添加对 TypeScript 和 ESLint 的支持。

   module.exports = {
     plugins: [
       vue(),
       typescript(),
       eslint(),
     ],
   };
   

6. 运行开发服务器

   运行开发服务器。

   npm run dev
   

二、生产环境搭建

1. 构建项目

   构建项目。

   npm run build
   

2. 部署项目

   将构建好的项目部署到服务器上。

三、踩坑指南

1. Airbnb 规则中引号的处理

   Airbnb 规则中要求使用双引号，但在 Vue.js 中，使用单引号更常见。为了避免冲突，我们可以在 eslint.config.js 文件中添加如下配置：

   module.exports = {
     rules: {
       "quotes": ["error", "single"],
     },
   };
   

2. TypeScript 中的类型检查

   TypeScript 中的类型检查有时会过于严格，导致一些代码无法通过编译。为了解决这个问题，我们可以使用 TypeScript 的类型断言功能来忽略类型检查。

   // @ts-ignore
   const foo = (bar: any) => {
     // do something with bar
   };
   

3. Vite 中的热更新

   Vite 中的热更新有时会失效。为了解决这个问题，我们可以尝试清除 Vite 的缓存。

   npm run dev --clearCache
   

4. ESLint 中的错误提示

   ESLint 中的错误提示有时会不够详细，导致难以理解错误原因。为了解决这个问题，我们可以使用 ESLint 的 --verbose 选项来查看更详细的错误提示。

   eslint --verbose src/App.vue
   

四、结语

Vue.js 3、Vite、TypeScript和ESLint（Airbnb 规则）的组合非常适合构建生产项目。但是，在搭建生产项目时，难免会遇到各种各样的问题。本文分享了我们在搭建 Vue.js 3 + Vite + TypeScript + ESLint（Airbnb 规则）生产项目的过程中遇到的问题和解决办法，希望能够帮助大家少走弯路。