vite+vue3 配置ESLint与prettier

Hard heart / 97 / 2023-09-24 20:09:06

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

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

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)

image.png

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

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

项目结构
image.png

.prettierrc.json 文件
image.png

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

.eslintrc.cjs文件
image.png

三、安装vscode插件

image.png

四、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"]
}

image.png

配置结果

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

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

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


vite+vue3 配置ESLint与prettier
作者
Hard heart
许可协议
CC BY 4.0
发布于
2023-09-24
修改于
2024-07-15
Bonnie image
尚未登录