创建vite+vue3+typescript项目并在vscode中集成prettier+eslint

一、创建项目

首先确保系统上已安装Nodejs和包管理器，常见包管理器有npm、yarn、pnpm等，本文使用pnpm。

选择想要将项目创建在其下的文件夹，右键点击在终端中打开，运行：

pnpm create vite

其他包管理器运行命令可参考： 开始 | Vite 官方中文文档

根据提示输入项目名称、选择框架和语言，创建完成后根据提示可进行下一步操作，运行：

cd my-project
pnpm install

 上述命令运行结果如下：

二、集成prettier和eslint

（一）eslint

1.安装配置eslint

运行：

pnpm create @eslint/config@latest

其他包管理器运行命令可参考：Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

运行结果如下： 

 生成的配置文件 eslint.config.js 如下：

 2.在vscode 中搜索 eslint 插件并安装

3.验证

建立 /src/try.js文件，输入代码：

/* eslint quotes: ["error", "double"] */
const a = 'a'

 即可看到代码提示，将会出现两个下划线，鼠标移动到上面将会有 eslint 提示：一是变量未使用，二是字符串要用双引号，如下：

（二）集成prettier

1.安装prettier

运行：

pnpm add --save-dev --save-exact prettier

其他包管理器运行命令可参考：Install · Prettier

运行结果如下：

设置prettier的规则，.prettierrc文件：

此处是在prettier默认规则基础上，自定义更改了两项规则，第一条为取消语句结尾的强制分号，第二条为代码打印行的长度从默认的 80 改成 100。

2.禁用eslint中和prettier冲突的格式化规则

安装eslint-config-prettier，参考：https://github.com/prettier/eslint-config-prettier

运行：

pnpm add --save-dev eslint-config-prettier

运行结果如下： 

然后设置eslint.config.js文件：导入eslint-config-prettier，并将其放入配置数组中——在你想要覆盖的其他配置之后。

// ... import someConfig from "some-other-config-you-use";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ... someConfig ...,
  eslintConfigPrettier,
];

结果如下： 

3. 在eslint的配置中设置代码格式化规则

安装eslint-plugin-prettier，参考：GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting

运行：

pnpm install --save-dev eslint-plugin-prettier

然后设置eslint.config.js文件：

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"

export default [
  // Any other config imports go at the top
  eslintPluginPrettierRecommended,
];

结果如下： 

保存文件后出现大量报错，此时错误信息中显示“eslint(prettier/prettier)”，即配置成功。