乐趣区

关于typescript:vitevue3-配置ESLint与prettier

jiezi

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

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-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，进行代码格式化的校验和配置，如果还须要其余配置，依据官网文档批改对应文件即可。

退出移动版