本次我的项目创立所应用工具版本

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|es5|all>"，默认none    trailingComma: 'es5'}

.eslintrc.cjs文件

三、装置vscode插件

四、ESLint 和 Prettier 配合应用

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

  1. 装置依赖

    pnpm install --save-dev eslint-config-prettierpnpm install --save-dev eslint-plugin-prettierpnpm install --save-dev prettier
  2. 批改eslintrc文件
{  "extends": ["plugin:prettier/recommended"]}

配置后果

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

  1. 双引号报错提醒
  2. 句末加分号报错提醒
  3. 单行超100字符报错提醒

    ctrl+s保留后：报错提醒隐没且代码格式化

以上，就实现了应用eslint+prettier，进行代码格式化的校验和配置，如果还须要其余配置，依据官网文档批改对应文件即可。