【uniapp - vue3】搭建项目模板第二章代码风格检测与限制(eslint + prettier)

本文链接：https://blog.csdn.net/qq_39959538/article/details/132233463

前言

为什么要有代码风格管理，平常我们开发不是一个人，而是整个团队，每个人都有自己的编码风格，但这样不利于团队之间的配合，统一的编码风格可以提高代码的可读性，可以更快的理解别人写的代码。

本章可以学习到的内容

eslint 与 prettier 是什么
在项目中配置 eslint 与 prettier
vscode中配置保存自动格式化代码

1. eslint

官网地址: eslint , Node.js版本（^12.22.0、^14.17.0 或 >=16.0.0）并支持 SSL。

查找与修复 javascript 代码中的问题。
eslint支持配置规则与自定义规则

1.1 使用eslint

执行，如果没有 package.json文件的话可以先执行下

npm init

再执行

npm init @eslint/config

选择相关配置使用ts的话选择选择yes
在这里插入图片描述

1.2 配置文件

安装完成后项目根目录会创建一个 .eslintrc.js 的文件
在这里插入图片描述
打开来看看里面有什么吧

module.exports = {
  // 指定代码运行的环境
  env: {
    browser: true, // 在浏览器环境中运行
    es2021: true, // 在 ECMAScript 2021 环境中运行
  },

  // 继承的配置
  extends: [
    "eslint:recommended", // 继承 ESLint 官方推荐的一组规则
    "plugin:vue/vue3-essential", // 继承用于 Vue.js 3 的一组基本规则
  ],

  // 针对特定文件进行额外配置
  overrides: [
    {
      env: {
        node: true, // 当解析 .eslintrc.js 或 .eslintrc.cjs 文件时，使用 Node.js 环境
      },
      files: [
        ".eslintrc.{js,cjs}", // 针对这些文件进行配置
      ],
      parserOptions: {
        sourceType: "script", // 文件类型为脚本
      },
    },
  ],

  // 解析器选项
  parserOptions: {
    ecmaVersion: "latest", // 使用最新的 ECMAScript 版本
    sourceType: "module", // 代码是 ECMAScript 模块
  },

  // 使用的插件
  plugins: [
    "vue", // 使用 Vue.js 插件，增强对 Vue.js 代码的检查能力
  ],

  // 规则和其配置
  rules: {
    semi: [2, "always"], // 要求在语句末尾使用分号，报告错误并且自动修复
    quotes: [2, "double"], // 要求使用双引号，报告错误并且自动修复
  },
};

2. prettier

Prettier 是一个代码格式化工具，它可以自动调整和规范化代码的格式，使其具有统一的风格。

2.1 安装

执行下方命令会将 Prettier 安装为当前项目的开发环境依赖项，并且该命令将记录 Prettier 的精确版本。这样其他开发者可以通过运行相同的命令，在其本地项目中安装与你相同版本的 Prettier。

npm install --save-dev --save-exact prettier

我们模板中是要与 eslint 一起使用所以我们集成到 .eslintrc.js 中
执行

npm install --save-dev eslint-config-prettier  // 禁用 ESLint 中与 Prettier 冲突的格式化规则
npm install --save-dev eslint-plugin-prettier  // 将 Prettier 的规则集集成到 ESLint 中

在配置文件中.eslintrc.js 中添加如下配置

{
	plugins: ['prettier'],
	extends: [
		...,
	    'prettier',  // 使用 prettier 规则
    ],
    rules: {
      'prettier/prettier': [  // 设置 prettier 的规则
        'error',
        {
	        endOfLine: 'auto',  // 自动检测行尾换行符
	        printWidth: 80,  // 每行最大字符数为 80
	        tabWidth: 2,  // 使用 2 个空格作为缩进
	        useTabs: false,  // 不使用制表符缩进
	        singleQuote: true,  // 使用单引号
	        semi: false,  // 不使用分号
	        trailingComma: 'es5',  // 在ES5(对象或数组最后一个元素或属性与闭括号]})之间)加逗号
	        bracketSpacing: true,  // 在对象字面量的括号之间打印空格
	        jsxBracketSameLine: false,  // 将多行 JSX 元素的闭合标签放在新的一行上
	        arrowParens: 'avoid',  // 只有一个参数的箭头函数不需要括号
       },
      ],
      'vue/multi-word-component-names': 'none',  // 关闭要求 Vue 组件名使用短横线连接的规则
   },
}

之前在做的时候有个疑惑，为什么安装了两个插件只引入了一个，原因是：
在引用plugins-Prettier 会隐式的引入 config-prettier中的配置.

3. 两者的区别

ESLint 和 Prettier 是两个工具，用于提升代码质量和统一代码风格。

功能：ESLint 是静态代码分析工具，检查 JavaScript 代码中的问题和不一致的代码风格。Prettier 则是代码格式化工具，自动调整代码的格式和风格。
风格约定：ESLint 根据规则提示代码风格问题，可以自定义规则。Prettier 使用自己的默认规则来格式化代码，不可配置。
自动修复：ESLint 可以自动修复简单的代码问题，Prettier 可以整体格式化代码。
插件生态：ESLint 插件丰富，可以扩展规则、支持其他语言或框架。Prettier 功能相对简单，插件系统较少。

ESLint 重点在于代码质量和风格检查，可自定义规则和自动修复问题；
Prettier 专注于代码格式化，提供统一的风格，无法配置。通常结合使用，以获得更好的代码质量和一致的代码风格。

3.自动修复

上面配置eslint 与 prettier 就完成了，现在风格不统一的话会报错，会让我们手动去修改报错信息，有没有一种工具可以在我们保存文件的时候自动帮我们格式化好这些代码呢，答案是有的。

首先安装 eslint 插件
![在这里插入图片描述](https://img-blog.csdnimg.cn/038dbe180c274a798231d74aeaf9ee61.png
安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置打开 VSCode 配置文件,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}