【从零开始集成低代码平台】在Vite3驱动的Vue3项目下配置ESLint、Prettier

小树ZW
376 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

开源地址：github.com/zmkwjx/baik…

摘要

在构建大型应用程序（尤其是与团队合作）时，可以为代码检查和格式化设置一些自动化过程，以此来改善开发人员代码质量以及开发效率，便于项目的管理和代码格式统一。

上一章我们写了如何搭建一个函数库， 代码检查和格式化也是项目工程化的重要组成部分，也许你从未接触此类工具。接下来我们来了解一下检查和格式化代码的原因， 然后再介绍 Vite3 驱动的 Vue3 项目下的 ESLint 和 Prettier 该如何设置。

Linting 和 ESLint

Linting 是自动检查源代码中的程序和样式错误。这是通过使用 lint 工具（也称为 linter）来完成的。lint 工具是一个基本的静态代码分析器。Linting 不会使您的代码免受任何业务逻辑缺陷的影响，但它会确保您的代码在语法上准确并遵循一些最佳实践。通常 JavaScript 的 lint 工具是 ESLint。 ESLint 不仅能够检测代码中的错误，而且在许多情况下，甚至可以自动为您纠正错误。我们可以通过安装 ESlint 的相关插件，在各种 IDE 编译器下进行应用，通过实时检测代码格式问题或者是语法问题，可以使得程序员在编码时犯更少的错误，我们也可以通过命令行或者插件去自动修复问题。

d4680382-1d2a-4c73-a90b-aaf61e3bb203.png

代码格式化和 Prettier

格式化和 linting 有什么区别？虽然 linting 专注于检测错误，但格式化是为了确保您的代码遵守一些一致的格式化规则，例如制表符宽度、单引号或双引号、尾随逗号、行尾分号等。这样的格式化规则确保您的代码即使由不同的开发人员开发，甚至在不同的 编辑器中也能保持一致，以此来保证整个项目中代码风格的一致性。 格式化代码并不校验代码中的语法错误，而是在代码易读性上面下功夫。为了满足程序的标准化，减少由于手动排版代码带来的时间消费，我们通常将 ESLint 和 Prettier 一起应用，同时处理代码语法错误和代码风格格式化。

2cd30ffe-21b6-4ad9-8174-5d80fa648638.png

在项目中配置 ESLint、Prettier

现在我们知道了 ESLint 和 Prettier 是什么以及它们提供了哪些优势，让我们在一个由 Vite3 支持的 Vue3 项目中设置它们。

搭建一个 Vite 项目

如果你还没有创建 Vite3 + Vue3，可以使用以下指令：

yarn create vite my-vue-app --template vue

根据指引进入项目。

安装 Prettier

使用以下指令开始安装 Prettier。

yarn add prettier --dev --exact

接下来我们在根目录下创建 .prettierrc.json 空文件。 通常情况下我们不用为 Prettier 进行配置，因为它是一个开箱即用的插件，你也可以通过查阅 Prettier 文档 进行个性化配置。，我们这里参考的是 vue源码中的配置，打开并在 .prettierrc.json 中写入以下内容 ：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

安装 ESLint

我们可以使用以下命令安装 ESLint 和 ESLint 的 vue 插件：

yarn add eslint eslint-plugin-vue -D

您可以使用以下命令安装和配置 ESLint：

npm init @eslint/config

以下是命令行选项指引：

  1. 选择模式： To check syntax and find problems
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
  1. 选择模块类型： JavaScript modules 模块
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  1. 选择语言框架： Vue.js
? Which framework does your project use? ...
  React
> Vue.js
  None of these
  1. 本项目不使用 TypeScript 选择：No
? Does your project use TypeScript? » No
  1. 你的代码在哪里运行：Browser
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node
  1. 您希望配置文件的格式：JavaScript
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
  1. 您选择的配置需要安装依赖项 eslint-plugin-vue@latest：Yes
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
√ Would you like to install them now? · Yes
? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

配置完 ESLint 我们会发现根目录下生成了一个 .eslintrc.cjs 文件，稍后我们将修改它。

关闭与 Prettier 冲突的 ESLint 格式规则 我们只需要安装 eslint-config-prettier ，这将禁用 Prettier 将负责处理的 ESLint 中的格式化规则。

yarn add eslint-config-prettier -D

打开并修改 .eslintrc.cjs 文件，解决冲突并加入一些全局配置：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {},
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

添加命令行指令

"scripts": {
  //...
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
  "format": "prettier .  --write"
}

在浏览器中显示 ESLint 错误

通过运行安装 vite-plugin-eslint ，任何 ESLint 错误现在都会在浏览器中报告。

yarn add vite-plugin-eslint -D

打开并编辑 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 增加下面的配置项,这样在运行时就能检查eslint规范
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
})

添加VSCode支持

在 VSCode 应用商城内安装 ESLint 和 Prettier - Code formatter

打开 VSCode 的设置功能，搜索 format，设置以下内容:

"editor.formatOnSave": true
"editor.formatOnSaveMode": "file"

结论

刚开始接触格式化工具的时候，我也是很迷茫的状态。怎么去配置 ESLint，如何解决 ESLint 和 Prettier 之间的冲突，怎么在 VSCode 上应用，本人也是经历过一段时间的学习，以此来记录和引导新手更快捷的配置，减少无用的学习过程。本人也正在学习的路途上，有疑问或者想要交流学习的，可以在下方评论交流，也可以私信我，与君共勉！

avatar
文章
阅读
粉丝