如何在vue3项目中使用ESLint和Prettier

2022/06/27
阅读时间 2 分钟

文章目录

最近使用vue3开发了个新项目，发现以前很多代码质量检测配置不再适用，不管是框架还是工具都在不断升级，而网络上大部分还是以前的旧文章，本文中出现的工具或插件都使用最新版本进行配置，希望对你有所帮助。

安装ESLint和Prettier

ESLint是一个代码质量检测工具，也可以用来格式化代码，而Prettier是一个专业的代码格式化工具，通常会两者结合一起使用，ESLint做代码潜在错误检测，Prettier用来统一代码风格，算是各有所长，物尽其用。

安装命令:

npm install --save-dev eslint

// --save-exact锁定prettier版本号
npm install --save-dev --save-exact prettier

ESLint也可以用来格式化代码，所以会导致和Prettier部分规则冲突，eslint-config-prettier插件可以解决这个问题，我们知道prettier是用来格式化代码的，它本身不做代码检测，为了使prettier规则能作为eslint规则被检测，需要使用eslint-plugin-prettier插件。

安装插件:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

配置ESLint和Prettier规则

ESLint安装完成后，运行npm init @eslint/config命令，通过命令行交互方式创建eslint配置文件，如果是vue项目，生成的配置文件中，extends字段可能会包含plugin:vue/essential插件，这个插件只包含了vue2项目的一些基本规则，请使用plugin:vue/vue3-recommended代替，然后在命令行运行echo {}> .prettierrc.json创建prettier配置文件。

注意：在以命令行交互方式创建eslint配置文件时，它会询问你是否马上安装相关插件，比如eslint-plugin-vue，如果你选择否的话，创建完配置文件还需要手动安装一下这个插件，如果是react项目则需要安装eslint-plugin-react。

eslint配置文件：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["vue"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "semi": false,
        "singleQuote": true
      }
    ],
    "indent": ["error", 2],
  },
   "ignorePatterns": [
    "node_modules",
    "build",
    "dist",
    "public"
  ]
}

注意: plugin:prettier/recommended需要放到extends数组最后一项，因为后面的配置会覆盖前面的配置

prettier配置文件:

{
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

保存时自动格式化

在vscode编辑器中安装ESLint和Prettier扩展插件, 然后打开用户设置，添加默认格式化程序配置,

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.format.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.run": "onSave"
}

以上配置完成后，每当文件保存编辑器会自动根据prettier的配置文件进行代码格式化，如果需要在项目中根据prettier配置批量格式化文件，可以在package.json文件中，配置scripts.format命令，例如：

package.json

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

然后我们就可以通过运行npm run format命令，对不符合prettier风格的文件统一格式化，运行完后会在终端窗口打印项目中的所有文件，你也可以创建.prettierignore文件为prettier指定需要忽略的文件，下面是运行完npm run format命令后的截图，白色高亮代表的是prettier成功进行格式化的文件，灰色指的是符合prettier配置风格的文件，不需要格式化处理。

pret-write

Typescript ESLint配置

如果项目中使用了TypeScript，只需对上面的ESLint配置稍作更改, 我们需要使用@typescript-eslint插件并为ESLint指定TypeScript解析器，以便它识别TypeScript的语法。ESLint的规则和TypeScript的内置规则之间也存在一些冲突，例如未定义或未使用变量的错误，你会想要关闭ESLint规则但保留TypeScript规则，这样编辑器就不会报双重错误。

使用以下命令安装Typescript插件和解析器

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser

使用了Typescript的eslint配置文件:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["vue"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "semi": false,
        "singleQuote": true
      }
    ],
    "indent": ["error", 2],
  },
   "ignorePatterns": [
    "node_modules",
    "build",
    "dist",
    "public"
  ]
}

ESLint报错时中断项目运行

你甚至可以在ESLint报错时，中断项目的运行并在控制台和浏览器显示错误，这个配置是可选的，有些人喜欢有些人烦它。

安装vite-plugin-eslint插件，这里以vite项目做演示

npm install vite-plugin-eslint --save-dev

然后在vite.config.js配置文件导入并注册插件

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [eslintPlugin()],
});

现在ESLint错误应该都会在浏览器中显示，如果没有，请尝试重新启动开发服务器。 error

在git commit时验证

如果你不喜欢ESLint在开发过程中频繁打断你，你也可以选择在git commit时验证，这需要你安装husky和lint-staged，另外请将vscode中的editor.codeActionsOnSave配置项中的source.fixAll.eslint设置为false

npm install husky lint-staged --save-dev

目前husky最新版本是8.0.1，使用方法跟之前有比较大的区别，如果是windows系统还需要升级npm版本到8以上

升级npm到最新版本（mac用户可跳过）

npm install npm@latest -g

向package.json文件添加scripts.prepare字段

npm pkg set scripts.prepare "husky install"

如果此命令设置失败，可以使用npx npe scripts.prepare "husky install"命令，或者手动添加

启用git hooks钩子

执行npm run prepare命令，会在项目根目录生成.husky目录

添加钩子

npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit

向package.json文件添加lint-staged配置

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue src --fix",
    "format": "prettier --write .",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": "eslint --fix"
  }
}

现在，当执行git commit时，会先执行eslint --fix命令，在这里我更推荐使用pretty-quick工具。

安装pretty-quick

npm install pretty-quick --save-dev

修改.husky/pre-commit文件内容，使用npx pretty-quick --staged替换npx lint-staged，

现在执行git commit命令时，只有被添加到暂存区的文件才会被prettier格式化，你也可以将工作区所有变更的文件进行格式化，只需要执行npx pretty-quick命令或者yarn pretty-quick即可，如图：

pretty-quick.

小结

本文介绍了ESLint如何与Prettier以及预提交工具一起使用，需要注意的是当Prettier作为ESLint规则使用时，ESLint与Prettier相同规则的部分，如semi, quote不需要直接在rules中配置了，而应该配置在prettier/prettier规则中，如果你有任何问题，欢迎在下面留言📝

工具 ESLint Prettier