vue3+ts+vite項目中使用eslint+prettier+husky指南

語言: CN / TW / HK

theme: devui-blue

創建項目

使用vue-ts模板創建項目,由於該篇文章的重點不是項目的搭建,所以這裏就簡單帶過。 shell pnpm create vite my-vue-app --template vue-ts

為什麼需要eslintprettier

本文主要以實戰為主,這裏就不過多贅述eslintprettier的作用了,不清晰的同學可以查閲一下相關資料。簡單來説,就是eslint可以保證項目的質量,prettier可以保證項目的統一格式、風格。

配置eslint

執行安裝命令

shell pnpm add eslint -D

執行eslint初始化命令

shell npx eslint --init

依次初始化選項

image.png

```shell (1) How would you like to use ESLint? 選擇:To check syntax and find problems

(2) What type of modules does your project use? 選擇:JavaScript modules (import/export)

(3) Which framework does your project use? 選擇:Vue.js

(4) Does your project use TypeScript? 選擇:Yes

(5) Where does your code run? 選擇:Browser

(6) What format do you want your config file to be in? 選擇:JavaScript

(7) Would you like to install them now? 選擇:Yes

(8) Which package manager do you want to use? 選擇:pnpm ```

依賴安裝完成後,會生成.eslintrc.js配置文件

javsscript module.exports = { "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended" ], "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], "rules": { } }

此時打開.eslintrc.js配置文件會出現一個報錯,需要再env字段中增加node: true配置以解決eslint找不到module的報錯

image.png

diff module.exports = { "env": { "browser": true, "es2021": true, // 新增 + "node": true }, "extends": [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended" ], "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], "rules": { } }

package.json文件中的script中添加lint命令

json { "scripts": { // eslint . 為指定lint當前項目中的文件 // --ext 為指定lint哪些後綴的文件 // --fix 開啟自動修復 "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix" } }

執行lint命令

shell pnpm lint

image.png 這時候命令行中會顯示出上圖中的報錯,意思就是在解析.vue後綴的文件時候出現解析錯誤parsing error

查閲資料後發現,eslint默認是不會解析.vue後綴文件的。因此,需要一個額外的解析器來解析.vue後綴文件。

但是我們查看.eslintrc.js文件中的extends會發現已經有繼承"plugin:vue/vue3-essential"的配置。然後在node_modules中可以找到eslint-plugin-vue/lib/cinfigs/essential,裏面配置了extends是繼承於同級目錄下的base.js,在裏面會發現parser: require.resolve('vue-eslint-parser')這個配置。因此,按道理來説應該是會解析.vue後綴文件的。

繼續往下看.eslintrc.js文件中的extends會發現,extends中還有一個"plugin:@typescript-eslint/recommended",它是來自於/node_modules/@typescript-eslint/eslint-plugin/dist/configs/recommended.js,查看該文件會發現最終繼承於同級目錄下的base.js文件。從該文件中可以發現parser: '@typescript-eslint/parser',配置。

按照.eslintrc.js文件中的extends配置的順序可知,最終導致報錯的原因就是@typescript-eslint/parservue-eslint-parser覆蓋了。 json { "extends": [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended" ], }

查看eslint-plugin-vue官方文檔可知。如果已經使用了另外的解析器(例如"parser": "@typescript-eslint/parser"),則需要將其移至parseOptions,這樣才不會與vue-eslint-parser衝突。

修改.eslintrc.js文件 json module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended" ], "parser": "vue-eslint-parser", "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], "rules": { } } 兩個parser的區別在於,外面的parser用來解析.vue後綴文件,使得eslint能解析<template>標籤中的內容,而parserOptions中的parser,即@typescript-eslint/parser用來解析vue文件中<script>標籤中的代碼。

此時,再執行pnpm lint,就會發現校驗通過了。

安裝vscode插件ESLint

如果寫一行代碼就要執行一遍lint命令,這效率就太低了。所以我們可以配合vscode的ESLint插件,實現每次保存代碼時,自動執行lint命令來修復代碼的錯誤。

在項目中新建.vscode/settings.json文件,然後在其中加入以下配置。 json { // 開啟自動修復 "editor.codeActionsOnSave": { "source.fixAll": true } }

配置prettier

執行安裝命令

shell pnpm add prettier -D

在根目錄下新建.prettierrc.js

添加以下配置,更多配置可查看官方文檔 javascript module.exports = { // 一行的字符數,如果超過會進行換行,默認為80 printWidth: 80, // 一個tab代表幾個空格數,默認為80 tabWidth: 2, // 是否使用tab進行縮進,默認為false,表示用空格進行縮減 useTabs: false, // 字符串是否使用單引號,默認為false,使用雙引號 singleQuote: true, // 行位是否使用分號,默認為true semi: false, // 是否使用尾逗號,有三個可選值"<none|es5|all>" trailingComma: "none", // 對象大括號直接是否有空格,默認為true,效果:{ foo: bar } bracketSpacing: true }

package.json中的script中添加以下命令

json { "scripts": { "format": "prettier --write ./**/*.{html,vue,ts,js,json,md}" } } 運行該命令,會將我們項目中的文件都格式化一遍,後續如果添加其他格式的文件,可在該命令中添加,例如:.less後綴的文件

安裝vscode的Prettier - Code formatter插件

安裝該插件的目的是,讓該插件在我們保存的時候自動完成格式化 在.vscode/settings.json中添加一下規則 json { // 保存的時候自動格式化 "editor.formatOnSave": true, // 默認格式化工具選擇prettier "editor.defaultFormatter": "esbenp.prettier-vscode" }

解決eslintprettier的衝突

在理想的狀態下,eslintprettier應該各司其職。eslint負責我們的代碼質量,prettier負責我們的代碼格式。但是在使用的過程中會發現,由於我們開啟了自動化的eslint修復與自動化的根據prettier來格式化代碼。所以我們已保存代碼,會出現屏幕閃一起後又恢復到了報錯的狀態。

這其中的根本原因就是eslint有部分規則與prettier衝突了,所以保存的時候顯示運行了eslint的修復命令,然後再運行prettier格式化,所以就會出現屏幕閃一下然後又恢復到報錯的現象。這時候你可以檢查一下是否存在衝突的規則。

查閲資料會發現,社區已經為我們提供了一個非常成熟的方案,即eslint-config-prettier + eslint-plugin-prettier

  • eslint-plugin-prettier: 基於 prettier 代碼風格的 eslint 規則,即使eslint使用pretter規則來格式化代碼。
  • eslint-config-prettier: 禁用所有與格式相關的 eslint 規則,解決 prettier 與 eslint 規則衝突,確保將其放在 extends 隊列最後,這樣它將覆蓋其他配置

安裝依賴

shell pnpm add eslint-config-prettier eslint-plugin-prettier -D

在 .eslintrc.jsonextends的最後添加一個配置

diff { extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', + // 新增,必須放在最後面 + 'plugin:prettier/recommended' ], }

最後重啟vscode,你會發現衝突消失了,eslintprettier也按照我們預想的各司其職了。

配置husky

雖然上面已經配置好了eslintpreitter,但是還是存在以下問題。

對於不使用vscode的,或者沒有安裝eslintpreitter插件的同學來説,就不能實現在保存的時候自動的去修復與和格式化代碼。

這樣提交到git倉庫的代碼還是不符合要求的。因此需要引入強制的手段來保證提交到git倉庫的代碼時符合我們的要求的。

husky是一個用來管理git hook的工具,git hook即在我們使用git提交代碼的過程中會觸發的鈎子。

安裝依賴

shell pnpm add husky -D

package.json中的script中添加一條腳本命令

json { "scripts": { "prepare": "husky install" }, } 該命令會在pnpm install之後運行,這樣其他克隆該項目的同學就在裝包的時候就會自動執行該命令來安裝husky。這裏我們就不重新執行pnpm install了,直接執行pnpm prepare,這個時候你會發現多了一個.husky目錄。

然後使用husky命令添加pre-commit鈎子,運行 shell npx husky add .husky/pre-commit "pnpm lint && pnpm format"

執行完上面的命令後,會在.husky目錄下生成一個pre-commit文件 ```bash

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

pnpm lint && pnpm format

```

現在當我們執行git commit的時候就會執行pnpm lintpnpm format,當這兩條命令出現報錯,就不會提交成功。以此來保證提交代碼的質量和格式。

安裝依賴説明

  • eslint: JavaScript 和 JSX 檢查工具
  • eslint-plugin-vue: 使用 ESLint 檢查 .vue文件 的 <template><script>,以及.js文件中的Vue代碼

總結

本篇文章主要是以一個vue-ts-vite的項目的搭建為基礎,在項目中引入eslint + prettier + husky來規範項目。完整的代碼一上傳至github點擊此處可以查看完整代碼。

參考文章

# 實戰--為vite-vue3-ts項目添加 eslint + prettier + lint-staged 項目規範