vite+vue3 配置ESLint与prettier

本次项目创建所使用工具版本

node：v18.16.0 （vite需要你的node的版本在12以上）
vite：v4.4.9

vite内置了eslint和prettier的模板，所以不用像以前那样从头配置Eslint和Prettier

项目创建步骤如下：

一、vite 创建项目

1. npm init vite@latest 项目名字
2. 框架选vue
3. 选customize with create-vue，然后根据项目选择（选择customize with create-vue实际就是去调了npm init vue@latest）

二、项目创建完成后的目录结构

已经自动帮我们生成.eslintrc.cjs和.prettierrc.json两个文件

项目结构

.prettierrc.json 文件

{
    //一行最多多少个字符
    printWidth: 100,
    // 指定每个缩进级别的空格数
    tabWidth: 2,
    // 使用制表符而不是空格缩进行
    useTabs: true,
    // 在语句末尾是否需要分号
    semi: true,
    // 是否使用单引号
    singleQuote: true,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值""，默认none
    trailingComma: 'es5'
}

.eslintrc.cjs文件

三、安装vscode插件

四、ESLint 和 Prettier 配合使用

prettier官方提供了一款工具 eslint-config-prettier
这个工具其实禁用掉了一些不必要的以及和Prettier相冲突的ESLint规则。

1. 安装依赖

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

2. 修改eslintrc文件

{
  "extends": ["plugin:prettier/recommended"]
}

配置结果

通过以上配置，在我们ctrl+s进行保存的时候，会自动按着我们配置的prettier对代码进行格式化。
保存前：因为我们在.prettierrc.json设置了规则，所以

1. 双引号报错提示
2. 句末加分号报错提示
3. 单行超100字符报错提示
   
   ctrl+s保存后：报错提示消失且代码格式化
   

以上，就完成了使用eslint+prettier，进行代码格式化的校验和配置，如果还需要其他配置，根据官方文档修改对应文件即可。